Materi
Kriteria 2.1.1 Keyboard (tingkat A) meminta semua fungsi bisa dijalankan lewat papan ketik tanpa waktu penekanan tertentu, dan 2.1.2 No Keyboard Trap (A) meminta fokus yang masuk ke sebuah komponen bisa keluar lagi dengan papan ketik. Elemen bawaan seperti a dengan href, button, dan input sudah bisa difokus dan dijalankan; div yang hanya diberi penangan klik tidak.
Kriteria 2.4.3 Focus Order (A) meminta urutan fokus yang mempertahankan makna. Urutan Tab mengikuti urutan kode sumber, dan atribut tabindex mengubahnya. MDN menjelaskan tiga bentuk nilainya: 0 memasukkan elemen ke urutan Tab sesuai posisinya di kode; nilai negatif, ditulis -1, membuat elemen tidak dicapai Tab tetapi bisa difokus lewat skrip, misalnya jendela modal; nilai positif didahulukan sebelum semua elemen lain sesuai angkanya. MDN memperingatkan agar hanya 0 dan -1 yang dipakai, dan W3C mencatat kegagalan F44: tabindex yang menghasilkan urutan yang tidak mempertahankan makna.
Kriteria 2.4.7 Focus Visible (AA) meminta indikator fokus terlihat. Kegagalan F78 adalah gaya outline atau border yang menghilangkan indikator itu, misalnya :focus { outline: none } tanpa pengganti. Pseudo-kelas :focus-visible berlaku saat peramban menilai fokus perlu ditampilkan, sehingga indikator bisa dibedakan antara tetikus dan papan ketik. Kriteria baru di WCAG 2.2, 2.4.11 Focus Not Obscured (Minimum) tingkat AA, meminta komponen yang difokus tidak tertutup seluruhnya oleh konten buatan penulis, seperti header lengket atau spanduk cookie.
Kriteria 2.4.1 Bypass Blocks (A) meminta cara melewati blok yang berulang di banyak halaman. Salah satu tekniknya skip link: menurut MDN, elemen a yang diletakkan sedekat mungkin dengan tag pembuka body dan menaut ke awal isi utama. Teknik lain untuk kriteria yang sama adalah landmark dan heading.
<body>
<a class="lewati" href="#konten">Lewati ke konten</a>
…
<main id="konten">…</main>
</body>
<style>
a:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
</style>
