Advanced · Level 15: AccessibilityAdvanced65 menitBahasa Indonesia

Accessible Form Errors

Membuat error form yang menyebut field, masalah, perbaikan, dan jalur focus yang dapat ditemukan user.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menghubungkan label, instruction, dan error dengan field yang tepat
Menulis pesan error yang menyebut masalah serta cara memperbaikinya
Membedakan inline error dari error summary setelah submit
Menentukan focus strategy setelah validation gagal tanpa membuat feedback berulang

FormsValidation UXError MessagesARIAAccessibility

Isi lesson

6 blok

1.
Error harus membantu user kembali ke pekerjaanBelum selesaiWajib
2.
Label, instruction, dan error berada dalam satu relationshipBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan menumpuk semua mekanisme pengumuman sekaligusBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Error harus membantu user kembali ke pekerjaan

Wajib

Error form yang accessible menjawab tiga hal: field mana yang bermasalah, apa yang salah, dan bagaimana memperbaikinya. Label tetap menjadi nama field; instruction memberi format sebelum user mengisi; inline error menjelaskan masalah saat terjadi. Setelah submit gagal, error summary di bagian awal form membantu user menemukan semua issue, terutama pada form panjang. Summary dapat memiliki link ke field terkait, sementara focus dipindahkan secara sengaja ke summary atau field error pertama sesuai perubahan UI dan scope form. Jangan memberi border merah saja, jangan memakai placeholder sebagai label, dan jangan mengumumkan setiap ketikan sebagai error mendesak.

Bagian ini memengaruhi progres lesson.

Label, instruction, dan error berada dalam satu relationship

Wajib

tsx

function EnrollmentEmail({ hasError }: { hasError: boolean }) {
  return (
    <div>
      <label htmlFor="enrollment-email">Alamat email</label>
      <p id="enrollment-email-hint">Gunakan alamat email yang masih aktif.</p>
      <input
        id="enrollment-email"
        name="email"
        type="email"
        aria-invalid={hasError}
        aria-describedby={
          hasError
            ? "enrollment-email-hint enrollment-email-error"
            : "enrollment-email-hint"
        }
      />
      {hasError ? (
        <p id="enrollment-email-error">
          Masukkan alamat email dengan format nama@domain.com.
        </p>
      ) : null}
    </div>
  );
}

Label memberi nama yang dapat dipakai visual user, voice input, screen reader, dan Testing Library. Instruction serta error dihubungkan lewat aria-describedby hanya saat relevan. aria-invalid menyatakan field tidak valid; ia bukan pengganti pesan text. Di form nyata, pastikan error summary, inline error, dan focus strategy tidak mengumumkan informasi sama secara berlebihan.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Improve course enrollment errors

Hubungkan label, instruction, dan error email agar user dapat menemukan serta memperbaiki masalah form.

Tujuan awal: Fokus di tab HTML.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

9 cek otomatis6 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Setelah submit form panjang gagal dengan beberapa error, langkah yang paling membantu adalah

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Opsional

Jangan menumpuk semua mekanisme pengumuman sekaligus

Memindahkan focus ke summary, memakai role alert, aria-live, dan menampilkan beberapa inline error sekaligus dapat membuat screen reader membaca pesan berulang. Tentukan perubahan apa yang perlu diketahui sekarang, pilih satu strategy yang sesuai, lalu uji dengan keyboard serta screen reader. Semakin banyak ARIA tidak otomatis semakin jelas.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Label memberi nama field; placeholder tidak menggantikannya.
Instruction muncul sebelum dibutuhkan, sementara error menyebut masalah dan perbaikannya.
aria-invalid dan aria-describedby memperjelas state serta relationship, bukan menggantikan pesan text.
Error summary membantu orientasi setelah submit gagal; inline error membantu perbaikan field.
Berikutnya, UI yang accessible juga menghormati preference user ketika motion dapat mengganggu atau tidak diperlukan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Error harus membantu user kembali ke pekerjaan.

Memuat progres Review module