HTML Form Accessibility Lanjut Autocomplete Aria Describedby Error Messaging

Definisi

Form aksesibel butuh: autocomplete token standar (nama, email, baru-password), aria-describedby menghubungkan field ke teks bantuan/error, dan aria-invalid + role="alert" saat ada kesalahan. Tujuannya pengguna pembaca layar tidak tersesat saat mengisi & saat error.

Kapan dipakai

Selalu untuk form produksi — terutama checkout, login, registrasi. Autocomplete membantu browser mengisi otomatis; aria membantu pengguna disabilitas memahami error.

Cara kerja

Autocomplete + hint

html

<label for="email">Email</label>
<input id="email" name="email" type="email"
       autocomplete="email"
       aria-describedby="email-hint">
<p id="email-hint">Kami tak akan bagikan email Anda.</p>

Error state

html

<input id="pwd" type="password" autocomplete="new-password"
       aria-invalid="true" aria-describedby="pwd-err">
<p id="pwd-err" role="alert">Password minimal 8 karakter.</p>

Struktur alur

Catatan implementasi

• Token autocomplete resmi (w3c): name, email, username, new-password, street-address, dll.
• role="alert" mengumumkan perubahan teks secara otomatis; jangan dipakai untuk error yang belum terjadi.
• Pindahkan fokus ke field error pertama saat submit gagal (JS) untuk UX lebih baik.
• Hindari placeholder sebagai pengganti label — placeholder hilang saat diketik.

Kesalahan umum

• Tanpa label: field tidak terhubung; pakai <label for>.
• autocomplete salah: password untuk registrasi sebaiknya new-password.
• Error tanpa aria-invalid: reader tidak tahu field bermasalah.
• Placeholder sebagai label: a11y buruk; selalu label nyata.

Referensi terkait

• HTML Forms, Inputs, Labels, Validation, Accessibility
• JavaScript Async Error Handling Patterns: AbortController, Retry
• React Forms: Controlled, Validation, Submit Flow