𝗖𝗮𝗿𝗮 𝗠𝗲𝗻𝗴𝗵𝘂𝗯𝘂𝗻𝗴𝗸𝗮𝗻 𝗔𝗥𝗜𝗔 𝘂𝗻𝘁𝘂𝗸 𝗥𝗮𝗹𝗮𝘁 𝗕𝗼𝗿𝗮𝗻𝗴
Kebanyakan borang berfungsi dengan baik untuk pengguna yang boleh melihat, tetapi gagal untuk individu yang menggunakan teknologi bantuan. Pengguna yang boleh melihat akan nampak sempadan merah dan mesej ralat. Pengguna pembaca skrin (screen reader) pula sering tidak mendengar apa-apa.
Anda boleh membetulkan perkara ini dengan dua atribut ARIA dan satu kawasan langsung (live region) yang kecil. Perubahan ini memerlukan kurang daripada 50 baris kod.
Berikut adalah cara anda menghubungkan ralat dengan input anda.
- Gunakan aria-describedby
Input perlu merujuk kepada elemen ralat tersebut. Tambahkan aria-describedby pada input anda dan tetapkan nilainya kepada ID bagi
divralat anda.
Contoh:
- ID Input: email-input
- ID Ralat: email-error
- Kod: aria-describedby="email-error"
Ini memberitahu pembaca skrin untuk membaca mesej ralat apabila pengguna memberi fokus pada input tersebut. Anda boleh menambah beberapa ID jika anda mempunyai teks bantuan juga.
- Gunakan aria-invalid Atribut ini memberitahu pengguna bahawa entri tersebut salah. Tetapkan aria-invalid kepada true apabila ralat muncul. Tetapkan kepada false apabila ralat hilang.
Kesilapan biasa adalah dengan mewarnakan div pembungkus (wrapper) kepada warna merah tetapi hanya meletakkan aria-invalid pada input. Ini mewujudkan ketidakpadanan. Pastikan gaya visual dan atribut ARIA anda menyasarkan elemen yang sama.
- Tambah kawasan langsung (live region)
Jika ralat muncul semasa pengguna masih menaip, mereka mungkin terlepas pandang. Gunakan aria-live="polite" pada
divralat anda.
- aria-live="polite" memberitahu pembaca skrin untuk mengumumkan ralat semasa jeda semula jadi.
- Jangan gunakan "assertive" melainkan ia adalah kecemasan. Ralat borang bukanlah satu kecemasan.
- Kendalikan pengesahan asinkron (async validation) Jika anda menyemak nama pengguna atau alamat di latar belakang, pengguna perlu tahu bahawa sistem sedang berfungsi.
- Corak A: Gunakan aria-busy="true" pada input semasa semakan sedang berjalan.
- Corak B: Gunakan kawasan langsung yang tersembunyi untuk mengumumkan kemas kini status seperti "Menyemak nama pengguna..."
Corak B adalah lebih dipercayai merentasi pelbagai pembaca skrin yang berbeza.
Pengujian adalah wajib. Alat automatik memang membantu tetapi ia tidak boleh menggantikan pengujian manual. Gunakan NVDA pada Windows atau VoiceOver pada macOS.
Senarai semak pengujian anda:
- Tekan Tab ke dalam medan. Label sepatutnya diumumkan.
- Masukkan nilai yang tidak sah. Ralat sepatutnya diumumkan.
- Tekan Tab semula ke medan tersebut. Label sepatutnya diumumkan bersama dengan ralat.
- Betulkan ralat. Mesej ralat sepatutnya hilang.