Markup yang benar belum berarti halaman yang teruji. Kebiasaan menulis perlu pasangannya: kebiasaan memeriksa — sebelum pengunjung yang menemukan galatnya lebih dulu. Kabar baiknya, pemeriksaan aksesibilitas tidak menuntut perangkat khusus: keyboard yang ada di meja kita, DevTools yang sudah terbuka setiap hari, dan pembaca layar yang bisa dipasang gratis.

Chapter penutup ini menyusun uji berlapis — dari yang termurah ke yang paling dalam — lalu checklist sepuluh butir untuk tiap halaman baru.

Lima Lapis Uji #

  1. Keyboard saja. Lepaskan mouse, jalankan seluruh alur halaman dengan Tab, Shift+Tab, Enter, Space, dan Esc. Setiap titik yang macet adalah temuan nyata.
  2. DevTools. Panel Accessibility pada Chrome DevTools menampilkan pohon aksesibilitas — peran dan nama yang sebenarnya diumumkan pembaca layar. Audit Lighthouse dengan kategori aksesibilitas memeriksa halaman secara otomatis dan melaporkan butir yang gagal.
  3. Pembaca layar singkat. NVDA bisa dipasang gratis di Windows, VoiceOver sudah terpasang di macOS, JAWS banyak dipakai di lingkungan kerja. Tiga pintasan cukup untuk memeriksa: lompatan heading (tombol H), daftar link, dan lompatan landmark.
  4. Kontras otomatis. Color picker DevTools menampilkan rasio kontras setiap warna teks terhadap latarnya; audit Lighthouse ikut menandai teks yang rasionya lemah.
  5. Zoom 200%. Perbesar halaman lewat Ctrl dan + (Cmd dan + di Mac) sampai 200%: layout tidak boleh pecah, teks tidak terpotong, dan seluruh konten tetap terjangkau tanpa menggulir menyamping.

Checklist Sepuluh Butir #

Checklist berikut dijalankan berurutan pada tiap halaman — sembilan butir pertama bisa diperiksa langsung dari kode:

  1. <html lang> menyebut bahasa yang benar.
  2. Satu h1 per halaman; jenjang heading turun satu tingkat setiap kali.
  3. Setiap img punya alt yang sesuai perannya — kosong untuk gambar hias.
  4. Setiap input berlabel eksplisit for/id; grup radio dan checkbox dibungkus fieldset + legend.
  5. Instruksi format tertulis di label atau sebelum input, bukan di placeholder.
  6. Pesan galat berupa teks nyata dan terikat ke kolomnya lewat aria-describedby.
  7. Teks link berdiri sendiri — tujuannya terbaca tanpa konteks sekitar.
  8. Seluruh interaksi bisa dijalankan lewat keyboard; kursor fokus selalu terlihat.
  9. Video memakai takarir kind="captions"; audio memakai transkrip di halaman.
  10. Warna bukan satu-satunya penanda informasi atau galat.

Memperbaiki Temuan #

Temuan dicatat dulu, jangan langsung ditambal: halaman mana, langkah reproduksi, siapa yang terhalang. Setelah terkumpul, urutkan menurut bobotnya — penghalang penuh lebih dulu (keyboard macet, kolom tanpa label, media tanpa teks), lalu hambatan sebagian (kontras lemah, zoom pecah), terakhir penyempurnaan (teks link, nama landmark). Perbaiki satu per satu, lalu uji ulang lapis yang menemukannya: temuan keyboard dites dengan keyboard, temuan pengumuman dites dengan pembaca layar.

Ringkasan #

  • Lima lapis uji: keyboard saja, DevTools + Lighthouse, pembaca layar singkat, kontras, zoom 200%.
  • Checklist sepuluh butir dijalankan berurutan; sembilan butir pertama bisa diperiksa langsung dari kode.
  • Temuan dicatat, diurutkan menurut bobot, diperbaiki, lalu diuji ulang dengan lapis yang menemukannya.
  • Alat otomatis hanya menemukan sebagian masalah — pemeriksaan manusia tetap penentu.

Aksesibilitas adalah bentuk paling terasa dari HTML yang tertata benar. Section berikutnya melengkapinya dengan disiplin yang menyeluruh: memvalidasi dan men-debug markup kita secara sistematis.