HTML Accessibility Wcag Skip Link Focus Keyboard
Ringkasan
Aksesibilitas (a11y) membuat halaman usable oleh semua orang, termasuk pengguna keyboard & screen reader. Prinsip WCAG: perceivable, operable, understandable, robust.
Konsep Dasar
- Skip link:
<a href="#main" class="skip">Lewati ke konten</a>agar keyboard user langsung ke isi. - Focus management: elemen interaktif harus bisa difokus & terlihat
:focus-visible. - Keyboard: semua aksi bisa dijalankan tanpa mouse.
- Kontras: teks vs latar cukup kontras (WCAG AA ≥ 4.5:1).
Cara Kerja / Struktur
html<a class="skip" href="#main">Lewati ke konten</a>
<main id="main" tabindex="-1">...</main>CSS: .skip{position:absolute;left:-999px}.skip:focus{left:0}
Catatan Implementasi
tabindex="-1"pada target skip agar bisa menerima fokus programatis.- Jangan
outline:nonetanpa pengganti fokus yang jelas.
Kesalahan Umum
- Menghapus
outlineglobal tanpa ganti. - Skip link disembunyikan tapi tidak bisa difokus.
Glosarium
- WCAG: pedoman aksesibilitas web.
- Skip link: tautan lompat ke konten utama.