Tombol Ikon yang Tetap Memiliki Nama

Tombol yang hanya berisi ikon terlihat jelas bagi mata, tetapi pembaca layar mungkin hanya mengatakan tombol tanpa petunjuk tentang fungsinya. 🔇

Setiap kontrol interaktif harus memiliki nama yang aksesibel. Pada tombol teks, teks menyediakannya; tombol yang hanya berisi ikon tidak memiliki teks untuk digunakan.

Perbaikan paling sederhana: letakkan aria-label pada tombol itu sendiri untuk memberi nama tindakan, meskipun isinya hanya ikon.

Tandai ikon di dalamnya dengan aria-hidden="true". Tombol membawa namanya; ikon menjadi murni dekorasi setelah label tersedia.

Lebih menyukai teks sungguhan? Tambahkan span dengan kelas visually-hidden. Pengguna yang dapat melihat hanya melihat ikon; pembaca layar membacakan kata-katanya.

Kelas visually-hidden memotong teks menjadi satu piksel tanpa menggunakan display none, yang juga akan menyembunyikannya dari pembaca layar.

Beri label pada tindakan yang terjadi, bukan pada gambarnya. Gunakan Delete, bukan tempat sampah. Pengguna membutuhkan kata kerja, bukan deskripsi gambar.

Atribut title HTML tidak dapat diandalkan sebagai nama karena sepenuhnya melewatkan pengguna layar sentuh dan papan ketik. Gunakan aria-label atau teks tersembunyi sebagai gantinya.

Untuk toggle ikon seperti bisukan, tambahkan juga aria-pressed agar tombol mengumumkan apakah saat ini aktif atau tidak aktif.

Jika tombol ikon mengubah makna, perbarui juga name-nya. Tombol putar yang berubah menjadi jeda kini harus mengumumkan Jeda, bukan Putar.

Di pemeriksa aksesibilitas, pilih tombol tersebut dan baca computed name-nya. Namanya harus sesuai dengan tindakan dan tidak boleh kosong.

Beri nama pada tombol yang hanya berisi ikon melalui aria-label atau teks yang disembunyikan secara visual, sembunyikan ikonnya, dan beri label pada tindakannya. Kini setiap tombol dapat berbicara. ✅