Fokus keyboard

Banyak orang menggunakan {i>keyboard<i}—atau perangkat lunak/perangkat keras lainnya yang meniru fungsi {i>keyboard<i}, seperti perangkat {i>switch<i}—sebagai sarana utama untuk navigasi. Orang dengan keterbatasan fisik sementara, seperti pergelangan tangan terkilir atau gangguan motorik halus seperti terowongan karpal, serta beberapa orang tanpa disabilitas, dapat memilih menggunakan {i>keyboard<i} untuk menavigasi laman karena preferensi, efisiensi, atau perangkat keras yang rusak.

Pengguna dengan gangguan penglihatan atau tunanetra dapat menggunakan {i>keyboard<i} untuk navigasi yang dikombinasikan dengan perangkat lunak pembesaran atau pembaca layar mereka. Namun, mereka mungkin menggunakan perintah {i>shortcut<i} pada {i>keyboard <i}untuk menavigasi layar dibandingkan pengguna yang mampu melihat.

Dukungan keyboard untuk semua disabilitas dan situasi ini sangat penting. J sebagian besar aksesibilitas {i>keyboard<i} dipusatkan pada fokus. Fokus mengacu pada elemen mana di layar menerima input dari {i>keyboard<i}.

Dalam modul ini, kita akan berkonsentrasi pada struktur HTML dan gaya CSS untuk {i>keyboard<i} dan elemen yang dapat difokuskan. Tujuan Modul JavaScript menyertakan lebih banyak informasi tentang manajemen fokus dan penekanan tombol untuk elemen interaktif.

Urutan fokus

Elemen yang dapat dinavigasi oleh pengguna {i>keyboard<i} disebut {i>focusable<i} yang kurang penting. Urutan fokus, juga disebut tab atau urutan navigasi, adalah urutan elemen yang diterima fokus. Urutan fokus default harus logis, intuitif, dan sesuai dengan visual urutan halaman.

Untuk sebagian besar bahasa, urutan fokus dimulai di bagian atas halaman dan berakhir di bagian bawah, 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 meliputi dukungan urutan tab bawaan dan penanganan peristiwa {i>keyboard<i} dasar.

Anda dapat memperbarui urutan fokus untuk menyertakan elemen apa pun yang biasanya tidak menerima fokus, seperti elemen HTML non-interaktif, komponen khusus, atau elemen dengan ARIA yang menggantikan semantik fokus alami.

Indeks tab

Urutan fokus dimulai dengan elemen-elemen yang memiliki tabindex (jika ada) dan berpindah dari angka positif terkecil ke terbesar (seperti 1, 2, 3). Kemudian melanjutkan melalui elemen dengan {i>tabindex <i} nol sesuai dengan urutannya dalam DOM. Elemen apa pun dengan tabindex negatif dihapus dari urutan fokus alami.

Saat tabindex dari nol (tabindex="0") diterapkan ke elemen yang biasanya tidak dapat difokuskan, yaitu ditambahkan ke urutan fokus alami halaman sesuai dengan cara mereka muncul di DOM. Namun, tidak seperti elemen HTML yang bisa difokuskan secara alami, Anda harus menyediakan dukungan keyboard tambahan dapat diakses sepenuhnya.

Demikian pula, jika Anda memiliki elemen yang biasanya dapat difokuskan tetapi tidak aktif—seperti tombol yang tidak beroperasi hingga bidang input diisi in—Anda harus menambahkan tabindex negatif (tabindex="-1") ke elemen ini. Menambahkan {i>tabindex<i} negatif memberi sinyal ke teknologi pendukung dan {i>keyboard<i} bahwa hal ini akan dihapus dari urutan fokus alami. Tetapi jangan khawatir—Anda bisa menggunakan JavaScript untuk menambahkan fokus kembali ke elemen saat dibutuhkan.

Dalam contoh ini, atribut tabindex ditambahkan ke elemen yang tidak menerima fokus secara alami. Urutan elemen dimanipulasi menggunakan tabindex untuk menggambarkan keefektifannya dalam urutan fokus. Ini adalah contoh tentang apa yang tidak boleh dilakukan.

Urutan fokus yang baru mencerminkan HTML.
Menonton sebagai tab pengguna keyboard melalui HTML CodePen.

Sebagian besar situs saat ini memiliki daftar link menu yang panjang di header utama halaman konsisten dari halaman ke halaman. Ini bagus untuk navigasi umum tetapi dapat sulit bagi pengguna {i>keyboard<i} untuk dengan mudah membuka bagian utama {i>website<i} konten tanpa perlu membuka tab beberapa kali.

Salah satu cara untuk mengatasi kelompok tautan yang berlebihan atau tidak berguna adalah dengan menambahkan lewati link. Link lewati adalah anchor tautan yang mengarah ke bagian lain di laman yang sama, menggunakan tautan sendiri, alih-alih mengirim pengguna ke halaman lain di situs atau resource Anda Link lewati biasanya ditambahkan sebagai elemen pertama yang dapat difokuskan pengguna yang akan Anda temui saat tiba di suatu {i>website<i} dan dapat dilihat atau disembunyikan secara visual hingga pengguna memasukkan tab untuknya, tergantung pada apa yang diminta desain.

Ketika pengguna menekan tombol tab, dan ada tautan lewati yang aktif, maka akan fokus {i>keyboard<i} ke tautan lewati. Pengguna dapat mengklik tautan lewati dan beralih melewati bagian {i>header<i} dan navigasi utama. Jika mereka memilih untuk tidak mengklik lewati link dan lanjutkan ke tab di DOM, link akan dikirim ke yang dapat difokuskan.

Seperti halnya semua tautan, penting bahwa tautan lewati menyertakan konteks tentang fungsi tautan. Menambahkan frasa "Langsung ke konten utama", memberi tahu pengguna ke mana tautan itu membawa mereka. Ada banyak opsi kode yang dapat dipilih ketika memberikan konteks tambahan ke link Anda, seperti aria-labelledby, aria-label, atau menambahkannya dengan konten teks elemen <a>, seperti yang ditunjukkan dalam contoh.

Lihat pratinjau CodePen dengan fokus keyboard.
Tonton pengguna keyboard menavigasi dengan dan tanpa link lewati.

Indikator fokus

Seperti yang baru saja Anda pelajari, urutan fokus adalah aspek penting dari {i>keyboard<i} aksesibilitas. Anda juga perlu memutuskan bagaimana fokus tersebut ditata gayanya. Karena bahkan jika urutan fokusnya sangat baik, bagaimana seorang pengguna bisa tahu di mana mereka berada halaman tanpa gaya visual yang tepat?

Indikator fokus yang terlihat adalah alat vital dalam memberi tahu pengguna tentang di mana mereka berada setiap saat di kami. Hal ini sangat penting bagi pengguna yang hanya menggunakan {i>keyboard<i}.

Gaya visual default browser

Saat ini, setiap {i>browser<i} web modern memiliki gaya visual {i>default<i} yang berbeda yang berlaku untuk elemen yang dapat difokuskan di situs atau aplikasi Anda—beberapa lebih mudah terlihat dibandingkan yang lain. Sebagai pengguna tab pada halaman, gaya ini diterapkan sebagai menerima fokus {i>keyboard<i}.

Jika Anda mengizinkan browser menangani gaya fokus, penting untuk meninjau kode Anda untuk mengonfirmasi bahwa tema Anda tidak akan menggantikan default browser gaya visual. Penggantian sering ditulis sebagai "outline: 0" atau "outline: none" di spreadsheet gaya Anda. Kode pendek ini dapat menghapus fokus default browser. gaya indikator, yang membuat pengguna sulit untuk menavigasi situs web 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 bisa lebih dari sekadar gaya browser default dan membuat indikator fokus yang melengkapi tema Anda. Saat membuat fokus kustom Anda memiliki banyak kebebasan untuk menjadi kreatif!

Bentuk indikator fokus dapat memiliki banyak bentuk, baik itu garis batas, batas, garis bawah, kotak, perubahan latar belakang, atau beberapa perubahan gaya yang jelas lainnya yang tidak hanya mengandalkan warna untuk mengindikasikan bahwa fokus {i>keyboard<i} sedang aktif elemen tersebut.

Anda dapat mengubah gaya indikator fokus untuk memastikan gaya indikator tersebut tidak hilang di latar belakang. Misalnya, jika sebuah laman memiliki latar belakang putih, Anda dapat menyetel indikator fokus tombol ke latar belakang biru. Saat halaman berwarna biru latar belakang, 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 bertitik untuk {i>body link<i} tetapi memilih batas membulat untuk elemen tombol.

Fokuskan gaya seperti yang ditunjukkan dalam CSS.
Lihat apa yang terjadi sebagai tab pengguna keyboard melalui setiap elemen fokus yang ditata gayanya.

Tidak ada aturan mengenai berapa banyak gaya indikator fokus yang Anda miliki pada satu gaya. tetapi pastikan jumlahnya dalam jumlah yang wajar untuk menghindari hal yang tidak perlu kebingungan.

Penutup

Agar {i>website<i} atau aplikasi dianggap dapat diakses, semua hal yang dapat diakses dengan {i>mouse<i} juga harus diakses dengan {i>keyboard<i}. Modul ini berfokus pada aspek visual aksesibilitas {i>keyboard<i}, khususnya, fokus urutan dan 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 pedoman kontras warna WCAG.
background-color:black;
Meskipun hal ini mungkin dapat diakses, desain ini memerlukan pertimbangan tambahan terkait warna dan penempatan teks dalam dokumen.
text-decoration: dotted underline 2px blue;
Desain ini adalah opsi 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 sebagaimana yang ditetapkan oleh WCAG.
outline: none; text-decoration:none; background:none;
Indikator visual penting bagi sebagian pengguna keyboard. Selalu sertakan gaya untuk fokus.

Apa tujuan link lewati?

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