Elemen interaktif menunjukkan tujuan dan statusnya

Elemen interaktif, seperti link dan tombol, harus menunjukkan statusnya dan dapat dibedakan dari elemen non-interaktif. Untuk memeriksa apakah elemen interaktif menunjukkan tujuan dan statusnya, gunakan pengujian visual dan pembaca layar.

Cara menguji secara manual

Anda harus menguji elemen interaktif secara visual dan dengan {i>screen reader<i}.

Uji fokus visual

Untuk menguji fokus visual secara manual, tekan TAB di halaman Anda.

  • Dapatkah Anda TAB untuk setiap elemen interaktif?
  • Saat Anda membuka elemen interaktif, apakah ada petunjuk visual bahwa pengguna dapat berinteraksi dengannya?
  • Apakah setiap elemen interaktif berubah tampilannya saat Anda memilihnya?

Ada banyak cara untuk menata gaya indikator fokus untuk setiap elemen interaktif. Salah satu caranya adalah menata gaya class semu :focus. Gaya tersebut diterapkan setiap kali elemen difokuskan, terlepas dari perangkat input atau metode yang digunakan untuk memfokuskannya.

Pelajari lebih lanjut cara menata gaya fokus.

Menguji dengan pembaca layar

Gunakan pembaca layar untuk membuka halaman Anda dan memeriksa apakah pembaca layar 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 cara pemberian label pada elemen interaktif. Pengguna {i>screen reader<i} dan teknologi pendukung lainnya mengandalkan label untuk memahami konteks elemen tersebut. Label yang tidak jelas adalah hal yang umum, dan tidak membantu saat menavigasi konten. Pelajari cara meningkatkan kualitas Label dan teks alternatif.

Mengapa ini penting

Memberikan petunjuk visual tentang fungsi suatu kontrol dapat membantu orang mengoperasikan dan menavigasi situs Anda. Petunjuk ini disebut kemampuan. Affordances memungkinkan orang menggunakan situs Anda di berbagai perangkat.

Resource

Kode sumber untuk audit Elemen interaktif menunjukkan tujuan dan statusnya