Elemen interaktif, seperti link dan tombol, harus menunjukkan statusnya dan dapat dibedakan dari elemen non-interaktif. Untuk memastikan apakah elemen interaktif menunjukkan tujuan dan statusnya, gunakan pengujian visual dan pembaca layar.
Cara menguji fokus visual secara manual
Untuk menguji fokus visual secara manual,
TAB melalui halaman Anda.
- Apakah Anda dapat menekan tombol {i>tab<i} ke setiap elemen interaktif?
- Saat Anda sampai ke elemen interaktif, adakah petunjuk visual bahwa pengguna dapat berinteraksi dengannya?
- Apakah setiap elemen interaktif berubah tampilan saat Anda memilihnya?
Ada banyak cara untuk menata gaya indikator fokus untuk setiap elemen interaktif.
Salah satu caranya adalah dengan menggunakan :focus.
Class pseudo :focus memungkinkan Anda menerapkan gaya yang seragam ke sebuah elemen.
Gaya tersebut diterapkan setiap kali elemen difokuskan,
terlepas dari perangkat input atau metode yang digunakan untuk memfokuskannya.
Pelajari lebih lanjut di Fokus gaya.
Cara menguji secara manual dengan pembaca layar
Dengan menggunakan pembaca layar, buka halaman Anda dan pastikan pembaca layar dapat mengumumkan nama setiap kontrol interaktif, peran kontrol tersebut, dan status interaktif saat ini. Jika peran elemen tidak jelas, dan status elemen tidak jelas, Anda mungkin perlu menambahkan peran ARIA yang sesuai. Pelajari lebih lanjut di Kontrol kustom memiliki peran ARIA.
Penting juga untuk memperhatikan bagaimana elemen interaktif diberi label. Pengguna pembaca layar dan teknologi pendukung lainnya bergantung pada label untuk memahami konteks elemen itu. Label yang tidak jelas adalah hal umum, dan tidak berguna untuk menavigasi konten. Pelajari cara meningkatkan kualitas Label dan alternatif teks.
Mengapa ini penting
Memberikan petunjuk visual tentang apa yang akan dilakukan kontrol membantu orang mengoperasikan dan menavigasi situs Anda. Petunjuk ini disebut {i>affordances<i}. Memberikan kemampuan memungkinkan orang menggunakan situs Anda di berbagai perangkat.
Referensi
Kode sumber untuk audit Elemen interaktif menunjukkan tujuan dan statusnya