𝗛𝗮𝗿𝗮 𝗠𝗲𝗻𝗵𝘂𝗯𝘂𝗻𝗴𝗸𝗮𝗻 𝗔𝗥𝗜𝗔 𝘂𝗻𝘁𝘂𝗸 𝗘𝗿𝗿𝗼𝗿 𝗽𝗮𝗱𝗮 𝗙𝗼𝗿𝗺
Sebagian besar formulir berfungsi dengan baik bagi pengguna yang dapat melihat (sighted users), tetapi gagal bagi orang yang menggunakan teknologi asistif. Pengguna yang dapat melihat akan melihat bingkai merah dan pesan kesalahan. Pengguna pembaca layar (screen reader) sering kali tidak mendengar apa pun.
Anda dapat memperbaiki ini dengan dua atribut ARIA dan sebuah live region kecil. Perubahan ini membutuhkan kurang dari 50 baris kode.
Berikut adalah cara menghubungkan error Anda ke input Anda.
- Gunakan aria-describedby Input perlu merujuk ke elemen error. Tambahkan aria-describedby pada input Anda dan atur nilainya ke ID dari div error Anda.
Contoh:
- ID Input: email-input
- ID Error: email-error
- Kode: aria-describedby="email-error"
Ini memberi tahu pembaca layar untuk membacakan pesan kesalahan saat pengguna fokus pada input tersebut. Anda dapat menambahkan beberapa ID jika Anda juga memiliki teks bantuan.
- Gunakan aria-invalid Atribut ini memberi tahu pengguna bahwa entri tersebut salah. Atur aria-invalid ke true saat kesalahan muncul. Atur ke false saat kesalahan hilang.
Kesalahan umum adalah memberi gaya warna merah pada div pembungkus (wrapper div) tetapi hanya menempatkan aria-invalid pada input. Hal ini menciptakan ketidaksesuaian. Pastikan gaya visual dan atribut ARIA Anda menargetkan elemen yang sama.
- Tambahkan live region Jika kesalahan muncul saat pengguna masih mengetik, mereka mungkin melewatkannya. Gunakan aria-live="polite" pada div error Anda.
- aria-live="polite" memberi tahu pembaca layar untuk mengumumkan kesalahan selama jeda alami.
- Jangan gunakan "assertive" kecuali dalam keadaan darurat. Kesalahan formulir bukanlah keadaan darurat.
- Tangani validasi asinkron (async validation) Jika Anda memeriksa nama pengguna atau alamat di latar belakang, pengguna perlu tahu bahwa sistem sedang bekerja.
- Pola A: Gunakan aria-busy="true" pada input selama pemeriksaan berlangsung.
- Pola B: Gunakan live region tersembunyi untuk mengumumkan pembaruan status seperti "Memverifikasi nama pengguna..."
Pola B lebih andal di berbagai pembaca layar yang berbeda.
Pengujian bersifat wajib. Alat otomatis memang membantu, tetapi tidak dapat menggantikan pengujian manual. Gunakan NVDA di Windows atau VoiceOver di macOS.
Daftar periksa pengujian Anda:
- Tab ke dalam kolom. Label harus diumumkan.
- Masukkan nilai yang tidak valid. Error harus diumumkan.
- Tab kembali ke kolom. Label harus diumumkan bersamaan dengan error.
- Perbaiki error. Pesan kesalahan harus hilang.