Aksesibilitas web (disingkat a11y: huruf a, 11 huruf di tengah, lalu y) artinya website kamu bisa dipakai semua orang: pengguna tunanetra dengan screen reader (program yang membacakan isi layar), orang yang cuma bisa pakai keyboard, orang dengan penglihatan lemah, orang tuli, sampai kamu sendiri waktu membaca HP di bawah terik matahari. Alatnya sudah kamu kenal di pelajaran HTML: tag semantik, alt, <label>, ARIA. Di sini kamu lihat apa yang sampai ke penggunanya, dan standar yang dipakai buat mengujinya.
🧪 Tebakan cepat: teks abu-abu muda di atas latar putih. Apakah pengguna screen reader ikut kesulitan? Tebak dulu, jawabannya ada di bagian "Kontras warna".
Peran dan nama: yang dibacakan screen reader
Dua formulir langganan ini tampil hampir sama di layar:
<!-- Versi 1: kelihatan beres, tapi rusak buat banyak orang -->
<img src="logo.svg">
<span>Email</span>
<input type="email">
<div class="btn" onclick="langganan()">Langganan</div>
<!-- Versi 2: bisa dipakai semua orang -->
<img src="logo.svg" alt="Kopi Senja">
<label for="email">Email</label>
<input id="email" type="email">
<button onclick="langganan()">Langganan</button>
Dari HTML, browser menyusun daftar khusus buat alat bantu seperti screen reader. Tiap elemen di daftar itu punya peran (tombol, link, kotak isian, gambar) dan nama (teks yang dibacakan).
<img>tanpaaltgak punya nama, jadi screen reader bisa membacakan nama filenya.alt="Kopi Senja"jadi namanya. Teks ini juga tampil di tempat gambar kalau gambarnya gagal dimuat.<span>Email</span>cuma teks yang kebetulan ada di sebelah kotak.<label for="email">, yangfor-nya sama denganidkotak itu, memberinya nama "Email".<div>gak punya peran. Screen reader gak menyebutnya tombol, dan tombol Tab melewatinya.<button>berperan tombol, bisa dicapai pakai Tab, dan jalan waktu ditekan Enter atau Spasi.
Hasilnya, waktu kamu menekan Tab di versi 2, screen reader bilang kira-kira "Email, kotak isian" lalu "Langganan, tombol". Tag <nav> dan <main> juga memberi peran, jadi pengguna screen reader bisa langsung melompat ke menu atau ke isi utama.
Keyboard: semua bisa dipakai tanpa mouse
Banyak orang gak bisa memakai mouse. Semua yang bisa diklik harus bisa dicapai dan dipakai lewat keyboard:
- Tab pindah ke elemen berikutnya, Shift+Tab mundur.
- Enter menjalankan link dan tombol, Spasi menekan tombol dan mencentang checkbox.
- Escape menutup dialog, tombol panah bergerak di dalam menu atau pilihan radio.
<a href>, <button>, <input> dan <select> masuk urutan Tab dengan sendirinya. Garis fokus (outline) di sekeliling elemen menunjukkan posisi kamu sekarang, jadi jangan dihapus tanpa pengganti.
Kontras warna
Rasio kontras membandingkan terangnya warna teks dengan latarnya, dari 1:1 (warnanya sama) sampai 21:1 (hitam di atas putih). Syarat WCAG level AA:
| Jenis | Minimal |
|---|---|
| Teks biasa | 4.5:1 |
| Teks besar (24px, atau 18.66px tebal) | 3:1 |
| Ikon dan garis tepi kotak isian | 3:1 |
Contohnya, abu-abu #767676 di atas putih kontrasnya 4.54:1, pas lolos. #a3a3a3 cuma 2.5:1, gagal. Jawaban tebakannya: pengguna screen reader gak terganggu, karena teksnya tetap dibacakan. Yang kesulitan adalah orang dengan penglihatan lemah, orang tua, dan siapa pun yang membaca di bawah matahari.
WCAG: standar buat mengujinya
WCAG (Web Content Accessibility Guidelines) adalah standar aksesibilitas dari W3C, lembaga standar web. Versi terbarunya 2.2. Tiap aturannya punya level: A (paling dasar), AA (target yang biasa diminta perusahaan dan aturan pemerintah), dan AAA (paling ketat, misalnya kontras teks 7:1).
| Aturan | Level | Artinya |
|---|---|---|
| 1.1.1 Konten non-teks | A | gambar punya teks pengganti (alt) |
| 2.1.1 Keyboard | A | semua fungsi bisa dipakai lewat keyboard |
| 1.4.3 Kontras (minimum) | AA | teks biasa minimal 4.5:1 |
| 2.4.7 Fokus terlihat | AA | posisi fokus keyboard kelihatan |
Cara mengecek: pakai halamanmu cuma dengan keyboard, jalankan pemeriksa otomatis seperti axe DevTools atau audit Accessibility di Lighthouse, lalu dengarkan pakai screen reader: NVDA (gratis di Windows), VoiceOver (bawaan Mac dan iPhone), atau TalkBack (bawaan Android).
⚠️ Jebakan yang sering ketemu
- Placeholder dipakai sebagai label. Placeholder hilang begitu orang mulai mengetik, dan warnanya biasanya pucat. Tetap pakai
<label>. outline: nonetanpa pengganti. Pengguna keyboard gak tahu lagi posisinya. Mau gaya sendiri? Ubah lewat:focus-visible, jangan dihapus.- Cuma percaya alat otomatis. axe dan Lighthouse gak bisa menilai apakah
alt-nya masuk akal atau urutan Tab-nya logis. Tetap coba sendiri. - Zoom dikunci.
user-scalable=nodi<meta name="viewport">bisa mencegah orang memperbesar halaman. WCAG minta teks tetap bisa dibaca dan dipakai waktu diperbesar sampai 200%. - Tombol yang terlalu kecil. WCAG 2.2 minta target ketuk minimal 24 x 24 piksel, atau diberi jarak yang cukup dari target lain.
TL;DR: Aksesibilitas berarti website bisa dipakai semua orang, termasuk pengguna screen reader dan keyboard. Screen reader membacakan peran dan nama tiap elemen, jadi pakai <button>, alt, dan <label for> yang tersambung ke id. Semua fungsi harus bisa dipakai lewat Tab, Enter dan Spasi, dengan garis fokus yang kelihatan. WCAG 2.2 level AA minta kontras minimal 4.5:1 buat teks biasa dan 3:1 buat teks besar.
