Fokus keyboard

Banyak orang menggunakan keyboard, atau software/hardware lain yang meniru fungsi keyboard, seperti perangkat tombol akses, sebagai alat navigasi utama. Pengguna dengan keterbatasan fisik sementara, seperti pergelangan tangan terkilir atau disabilitas motorik halus seperti terowongan karpal, serta beberapa orang yang tidak disabilitas, dapat memilih menggunakan keyboard untuk membuka halaman karena preferensi pribadi, efisiensi, atau hardware yang rusak.

Pengguna tunanetra atau yang memiliki gangguan penglihatan dapat menggunakan keyboard untuk navigasi yang dikombinasikan dengan software pembaca layar atau pembesaran. Namun, mereka mungkin menggunakan perintah pintasan keyboard yang berbeda untuk menavigasi layar dibandingkan dengan yang dilakukan pengguna yang berpenglihatan normal.

Dukungan keyboard untuk semua disabilitas dan situasi ini sangat penting. Sebagian besar aksesibilitas keyboard dipusatkan pada fokus. Fokus merujuk pada elemen mana di layar yang saat ini menerima input dari keyboard.

Dalam modul ini, kita akan membahas struktur HTML dan gaya CSS untuk keyboard dan elemen yang dapat difokuskan. Modul JavaScript menyertakan informasi selengkapnya tentang pengelolaan fokus dan penekanan tombol untuk elemen interaktif.

Fokuskan urutan

Elemen yang dapat dibuka oleh pengguna keyboard disebut elemen yang dapat difokuskan. Urutan fokus, juga disebut urutan tab atau navigasi, adalah urutan elemen menerima fokus. Urutan fokus default harus logis, intuitif, dan cocok dengan urutan visual halaman.

Untuk sebagian besar bahasa, urutan fokus dimulai di bagian atas halaman dan berakhir di bagian bawah, berpindah dari kiri ke kanan. Namun, beberapa bahasa dibaca dari kanan ke kiri, sehingga bahasa utama halaman mungkin memerlukan urutan fokus yang berbeda.

Secara default, urutan fokus menyertakan elemen HTML yang dapat difokuskan secara alami, seperti link, kotak centang, dan input teks. Elemen HTML yang dapat difokuskan secara alami menyertakan dukungan urutan tab bawaan dan penanganan peristiwa keyboard dasar.

Anda dapat memperbarui urutan fokus untuk menyertakan elemen apa pun yang biasanya tidak menerima fokus, seperti elemen HTML noninteraktif, komponen kustom, atau elemen dengan ARIA yang mengganti semantik fokus alami.

Indeks tab

Urutan fokus dimulai dengan elemen yang memiliki atribut tabindex positif (jika ada) dan berpindah dari angka positif terkecil ke yang terbesar (seperti 1, 2, 3). Kemudian, proses akan berlanjut melalui elemen dengan tabindex nol sesuai urutannya dalam DOM. Setiap elemen dengan tabindex negatif dihapus dari urutan fokus alami.

Saat tabindex nol (tabindex="0") diterapkan ke elemen yang biasanya tidak dapat difokuskan, elemen tersebut akan ditambahkan ke urutan fokus alami halaman sesuai dengan tampilannya di DOM. Namun, tidak seperti elemen HTML yang dapat difokuskan secara alami, Anda harus memberikan dukungan keyboard tambahan agar elemen tersebut dapat diakses sepenuhnya.

Demikian pula, jika Anda memiliki elemen yang biasanya dapat difokuskan, tetapi tidak aktif—seperti tombol yang tidak beroperasi hingga kolom input diisi—Anda harus menambahkan tabindex negatif (tabindex="-1") ke elemen ini. Menambahkan sinyal tabindex negatif ke keyboard dan teknologi pendukung bahwa tombol ini harus dihapus dari urutan fokus alami. Namun, jangan khawatir—Anda dapat menggunakan JavaScript untuk menambahkan fokus kembali ke elemen jika diperlukan.

Dalam contoh ini, atribut tabindex ditambahkan ke elemen yang tidak secara alami menerima fokus. Urutan elemen dimanipulasi menggunakan tabindex untuk menggambarkan kekuatan yang dapat dimilikinya pada urutan fokus. Ini adalah contoh apa yang tidak boleh dilakukan.

Urutan fokus baru mencerminkan HTML.
Tonton sebagai pengguna keyboard melalui HTML CodePen.

Sebagian besar situs saat ini memiliki daftar panjang link menu di header utama halaman yang konsisten dari halaman ke halaman. Ini bagus untuk navigasi umum, tetapi dapat menyulitkan pengguna yang hanya menggunakan keyboard untuk membuka konten utama situs tanpa harus membuka tab beberapa kali.

Salah satu cara untuk melewati grup link yang berlebihan atau tidak berguna adalah dengan menambahkan link lewati. Link lewati adalah link yang mengarah ke bagian berbeda pada halaman yang sama, menggunakan ID bagian tersebut, bukan mengarahkan pengguna ke halaman lain di situs atau resource eksternal. Link lewati biasanya ditambahkan sebagai elemen pertama yang dapat difokuskan yang akan ditemui pengguna saat tiba di situs dan dapat terlihat atau disembunyikan secara visual hingga pengguna mengkliknya, bergantung pada apa yang diminta oleh desain.

Saat pengguna menekan tombol tab, dan link lewati yang aktif ada, fokus keyboard akan dikirimkan ke link lewati. Pengguna dapat mengklik link lewati dan melewati bagian header dan navigasi utama. Jika mereka memilih untuk tidak mengklik link lewati dan melanjutkan ke tab di bawah DOM, mereka akan diarahkan ke elemen berikutnya yang dapat difokuskan.

Seperti semua link, link lewati harus menyertakan konteks tentang tujuan link. Menambahkan frasa "Lewati ke konten utama", memungkinkan pengguna mengetahui ke mana link tersebut akan mengarahkan mereka. Ada banyak opsi kode yang dapat dipilih saat memberikan konteks tambahan ke link Anda, seperti aria-labelledby, aria-label, atau menambahkannya ke konten teks elemen <a>, seperti yang ditunjukkan dalam contoh.

Pratinjau CodePen dengan fokus keyboard.
Lihat pengguna keyboard melakukan navigasi dengan dan tanpa link lewati.

Indikator fokus

Seperti yang baru saja Anda pelajari, urutan fokus merupakan aspek penting dari aksesibilitas keyboard. Penting juga untuk menentukan cara penataan gaya fokus. Meskipun meskipun urutan fokusnya bagus, bagaimana pengguna dapat mengetahui posisi mereka di halaman tanpa gaya visual yang tepat?

Indikator fokus yang terlihat adalah alat penting dalam memberi tahu pengguna posisi mereka kapan saja di halaman. Hal ini sangat penting bagi pengguna keyboard yang berpenglihatan normal.

Gaya visual default browser

Saat ini, setiap browser web modern memiliki gaya visual default berbeda yang berlaku untuk elemen yang dapat difokuskan di situs atau aplikasi Anda—beberapa di antaranya lebih mudah terlihat daripada yang lain. Saat pengguna berpindah tab di halaman, gaya ini diterapkan saat elemen menerima fokus keyboard.

Jika Anda mengizinkan browser menangani gaya visual fokus, Anda perlu meninjau kode untuk memastikan bahwa tema Anda tidak akan menggantikan gaya default browser. Penggantian sering ditulis sebagai "outline: 0" atau "outline: none" di stylesheet Anda. Potongan kecil kode ini dapat menghapus gaya visual indikator fokus default browser, yang menyulitkan pengguna untuk membuka situs atau aplikasi Anda.

Larangan
a:focus {
  outline: none; /* don't do this! */
}
Anjuran
a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Gaya kustom

Tentu saja, Anda dapat melampaui gaya browser default dan membuat indikator fokus kustom yang melengkapi tema Anda. Saat membuat indikator fokus khusus, Anda memiliki banyak kebebasan untuk menjadi kreatif!

Bentuk indikator fokus dapat memiliki berbagai bentuk, baik itu garis batas, batas, garis bawah, kotak, perubahan latar belakang, atau beberapa perubahan gaya yang jelas lainnya yang tidak bergantung pada warna saja untuk menunjukkan fokus keyboard aktif pada elemen tersebut.

Anda dapat mengubah gaya indikator fokus untuk memastikannya tidak hilang di latar belakang. Misalnya, saat halaman memiliki latar belakang putih, Anda dapat menyetel indikator fokus tombol ke latar belakang biru. Jika halaman memiliki latar belakang biru, Anda dapat menyetel gaya fokus tombol yang sama ke latar belakang putih.

Anda dapat mengubah gaya elemen fokus berdasarkan jenis elemen. Misalnya, Anda dapat menggunakan garis bawah putus-putus untuk link isi, tetapi memilih batas membulat untuk elemen tombol.

Gaya fokus seperti yang ditunjukkan dalam CSS.
Amati apa yang terjadi saat pengguna keyboard menekan tab pada setiap elemen fokus yang diberi gaya.

Tidak ada aturan tentang jumlah gaya indikator fokus yang Anda miliki di satu halaman—tetapi pastikan untuk menjaganya dalam jumlah yang wajar untuk menghindari kebingungan yang tidak perlu.

Penutup

Agar situs atau aplikasi dianggap dapat diakses, semua hal yang dapat diakses dengan mouse juga harus diakses dengan keyboard. Modul ini berfokus pada aspek visual aksesibilitas keyboard, khususnya, urutan fokus dan indikator fokus.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang ARIA dan HTML

Manakah contoh gaya CSS :focus yang paling mudah diakses dengan latar belakang putih?

outline: 0.5rem solid yellow;
Ini tidak akan memenuhi panduan kontras warna WCAG.
background-color:black;
Meskipun memungkinkan, desain ini memerlukan pertimbangan tambahan tentang warna teks dan penempatan dalam dokumen.
text-decoration: dotted underline 2px blue;
Desain ini adalah pilihan yang paling mudah diakses dalam daftar ini. Namun, ini bukan satu-satunya pilihan desain yang dapat diakses. Ingatlah bahwa desain Anda harus mematuhi rasio kontras warna 3:1 yang ditetapkan oleh WCAG.
outline: none; text-decoration:none; background:none;
Indikator visual penting bagi beberapa pengguna {i>keyboard<i}. Selalu sertakan gaya untuk fokus.

Apa tujuan dari link lewati?

Membantu pengguna keyboard melewati grup link yang berlebihan atau tidak berguna.
Ini sangat membantu dalam menu navigasi yang panjang, ketika pengguna mungkin sudah membuka halaman yang diminati.
Membantu pengguna keyboard melewati konten yang tidak menarik.
Tidak mungkin untuk mengetahui konten apa yang menarik atau tidak menarik bagi pengguna mana pun. Ini bukan cara yang tepat untuk menentukan penggunaan link lewati.