Aksesibilitas (sering disingkat a11y) artinya halaman kamu bisa dipakai semua orang, termasuk pengguna tunanetra yang memakai screen reader (program yang membacakan isi layar) dan orang yang cuma pakai keyboard. Kuncinya dua: pakai tag HTML yang tepat, dan kasih teks yang bisa dibacakan ke tiap gambar, tombol dan isian.
🧪 Tebakan cepat: di sebuah form, kolom yang salah cuma ditandai warna merah. Siapa yang bisa kelewatan? Tebak dulu, jawabannya ada di bagian "Jangan cuma pakai warna".
Pakai tag yang tepat
<button>Klik Saya</button>
<img src="foto.jpg" alt="Foto profil pengguna">
<nav aria-label="Menu utama">
<a href="#beranda">Beranda</a>
<a href="#tentang">Tentang</a>
</nav>
<button>adalah tombol asli: bisa dicapai pakai tombol Tab, jalan waktu ditekan Enter, dan dibacakan sebagai "tombol".<div>yang dibikin mirip tombol gak dapat semua itu.alt="Foto profil pengguna"adalah teks pengganti gambar. Screen reader membacakan teks ini. Tulis isi gambarnya, bukan kata "gambar" atau nama filenya.<nav>menandai blok navigasi, dan<a>di dalamnya adalah link yang bisa dicapai pakai Tab.aria-label="Menu utama"memberi nama ke sebuah elemen, khusus buat dibacakan screen reader.
Tampilannya bisa sama persis dengan versi <div>, tapi versi ini bisa dipakai lewat keyboard dan dibacakan dengan benar.
Nama buat tombol ikon: aria-label
<button aria-label="Tutup menu">×</button>
- Tombol yang isinya cuma ikon gak punya nama yang jelas.
aria-labelmemberinya nama, jadi screen reader bilang "Tutup menu, tombol". aria-labelmenimpa teks yang kelihatan. Tombol yang sudah bertuliskan "Simpan" gak perluaria-label.- Atribut berawalan
aria-dan atributroledisebut ARIA: tambahan khusus buat screen reader. Pakai tag yang tepat dulu, ARIA cuma kalau HTML biasa gak cukup.
Label, role, dan hiasan
<nav role="navigation">...</nav>
<label for="nama">Nama:</label>
<input type="text" id="nama">
<span aria-hidden="true">***</span>
<label for="nama">tersambung ke<input id="nama">karena nilaiforsama denganid. Screen reader membacakan "Nama" waktu kotak itu dipilih.rolemenyebut peran elemen.<nav>sebenarnya sudah berperan navigasi, jadirole="navigation"cuma menegaskannya.aria-hidden="true"menyembunyikan hiasan dari screen reader, misalnya deretan bintang***yang cuma pemanis. Jangan pasang di tombol atau link: elemennya tetap bisa di-Tab, tapi jadi tanpa nama.
Jangan cuma pakai warna
Pengguna buta warna bisa gak sadar ada kolom yang salah kalau tandanya cuma merah. Tambah teks pesan atau ikon, misalnya "Email belum diisi". Kontras warna teks dengan latarnya juga minimal 4.5:1 biar tetap kebaca.
⚠️ Jebakan yang sering ketemu
altdihapus di gambar hiasan. Tanpaalt, screen reader bisa membacakan nama filenya. Gambar hiasan cukupalt="".- Label cuma ditaruh di sebelah input. Tanpa
foryang sama denganid, keduanya gak tersambung. - Garis fokus dihapus.
outline: nonebikin pengguna keyboard gak tahu lagi posisinya di mana.
🔬 Coba sendiri
Dua alat di bawah menunjukkan apa yang "dilihat" screen reader dari HTML kamu, dan bagaimana pesan baru diumumkan.
TL;DR: Pakai tag asli (<button>, <a>, <nav>) sebelum ARIA. Gambar butuh alt, tombol ikon butuh aria-label, dan <label for> harus sama dengan id input-nya. role menyebut peran elemen, aria-hidden="true" menyembunyikan hiasan. Jangan tandai error cuma pakai warna, dan jaga kontras minimal 4.5:1.
