Tombol ikon butuh nama
Tombol yang isinya hanya ikon tidak punya teks untuk dibacakan, sehingga screen reader hanya menyebut 'tombol' tanpa menjelaskan fungsinya. aria-label memberi nama yang bisa diakses tanpa mengubah tampilan sedikit pun. Ini termasuk temuan paling sering muncul di audit aksesibilitas, terutama pada tombol tutup, menu, dan pencarian. Alternatif lain yang sama diterimanya adalah menaruh teks asli lalu menyembunyikannya secara visual dengan CSS, sehingga tetap terbaca teknologi bantu.
👀 Contoh dulu
<!-- screen reader hanya menyebut "tombol" --> <button>☰</button> <!-- sekarang jelas fungsinya --> <button aria-label="Buka menu navigasi">☰</button>
Hasilnya: Tampilannya identik. Bedanya, versi kedua dibacakan sebagai 'Buka menu navigasi, tombol'.
💡 aria-label menimpa teks yang terlihat sebagai nama yang dibacakan — jadi pakai hanya saat tidak ada teks yang bermakna.
📝 Sekarang giliranmu
Buat <button> berisi karakter × dengan aria-label bernilai Tutup dialog.