Dengan menggunakan elemen HTML semantik yang tepat, Anda mungkin dapat memenuhi sebagian besar atau semua
kebutuhan akses keyboard Anda. Artinya, Anda dapat menghemat waktu untuk mengatur tabindex
,
dan lebih banyak pengguna yang puas.
Dukungan keyboard untuk pengalaman seluler yang gratis (dan lebih baik)
Ada sejumlah elemen interaktif bawaan dengan semantik dan dukungan keyboard yang tepat. Yang paling banyak digunakan developer adalah:
Selain itu, elemen dengan atribut
contenteditable
terkadang digunakan untuk entri teks bentuk bebas.
Dukungan keyboard bawaan yang ditawarkan oleh elemen ini mudah diabaikan.
Berikut adalah beberapa contoh elemen yang dapat dijelajahi. Sebagai ganti mouse, coba gunakan keyboard untuk mengoperasikannya. Anda dapat menggunakan TAB
(atau SHIFT +
TAB
) untuk berpindah di antara kontrol, dan Anda dapat menggunakan tombol panah dan tombol seperti
ENTER
dan SPACE
untuk memanipulasi nilainya.
Jika Anda memiliki ponsel, Anda dapat melihat bahwa sering kali elemen bawaan ini memiliki interaksi unik di perangkat seluler. Mencoba mereproduksi sendiri interaksi seluler ini adalah pekerjaan berat! Ini adalah alasan bagus lainnya untuk menggunakan elemen bawaan jika memungkinkan.
Gunakan button
, bukan div
Anti-pola aksesibilitas yang umum adalah memperlakukan elemen non-interaktif, seperti
div
atau span
, sebagai tombol dengan menambahkan pengendali klik ke elemen tersebut.
Namun, agar dianggap mudah diakses, tombol harus:
- Dapat difokuskan melalui keyboard
- Dukungan dinonaktifkan
- Mendukung tombol
ENTER
atauSPACE
untuk melakukan tindakan - Diucapkan dengan benar oleh pembaca layar
Tombol div
tidak memiliki salah satu dari hal-hal ini. Artinya, Anda harus menulis
kode tambahan untuk mereplikasi apa yang diberikan elemen button
secara gratis.
Misalnya, elemen button
memiliki trik rapi yang disebut *aktivasi klik
sintetis*. Jika Anda menambahkan pengendali "klik" ke button
, pengendali tersebut akan berjalan saat
pengguna menekan ENTER
atau SPACE
. Tombol div
tidak memiliki fitur ini, jadi
Anda harus menulis kode tambahan untuk memproses peristiwa keydown
, memeriksa
bahwa kode kuncinya adalah ENTER
atau SPACE
, lalu menjalankan pengendali klik. Aduh!
Itu banyak sekali pekerjaan tambahan.
Bandingkan perbedaannya dalam contoh ini. TAB
untuk mengontrol, dan gunakan ENTER
dan SPACE
untuk mencoba mengkliknya.
Jika Anda memiliki tombol div
di situs atau aplikasi yang ada, pertimbangkan untuk
mengganti tombol tersebut dengan elemen button
. button
mudah ditata dan penuh dengan
keunggulan aksesibilitas.
Link versus tombol
Anti-pola umum lainnya adalah memperlakukan link sebagai tombol dengan melampirkan perilaku JavaScript ke link tersebut.
<a href="#" onclick="// perform some action">
Tombol dan link mendukung beberapa bentuk aktivasi klik sintetis. Jadi, manakah yang harus Anda pilih?
- Jika mengklik elemen akan melakukan tindakan di halaman, gunakan
<button>
. - Jika mengklik elemen akan menavigasi pengguna ke halaman baru, gunakan
<a>
. Hal ini mencakup aplikasi web satu halaman yang memuat konten baru dan memperbarui URL menggunakan History API.
Alasannya adalah karena tombol dan link diumumkan secara berbeda oleh pembaca layar. Menggunakan elemen yang benar akan membantu pengguna pembaca layar mengetahui hasil yang diharapkan.
TODO: DevSite - Penilaian Think and Check
Penataan gaya
Beberapa elemen bawaan, khususnya <input>
, mungkin sulit untuk ditata gayanya.
Dengan sedikit CSS yang cerdas, Anda mungkin dapat mengatasi beberapa
batasan ini. Project WTFForms (yang dinamai lucu)
berisi contoh
stylesheet
yang menunjukkan sejumlah teknik untuk menata gaya beberapa elemen bawaan
yang lebih sulit.
Langkah berikutnya
Penggunaan elemen HTML bawaan dapat sangat meningkatkan aksesibilitas situs Anda, dan secara signifikan mengurangi beban kerja Anda. Coba gunakan tombol tab di situs Anda dan cari kontrol yang tidak memiliki dukungan keyboard. Jika memungkinkan, ganti dengan alternatif HTML standar.
Terkadang Anda mungkin menemukan elemen yang tidak memiliki pasangan di HTML.
Tidak apa-apa. Baca terus untuk mempelajari cara menambahkan dukungan keyboard ke kontrol interaktif
kustom menggunakan tabindex
.