Dengan menggunakan elemen HTML semantik yang benar, Anda mungkin dapat memenuhi sebagian besar atau semua
kebutuhan akses keyboard. Itu berarti lebih sedikit waktu mengutak-atik tabindex,
dan lebih banyak pengguna
yang senang!
Dukungan keyboard untuk pengalaman seluler yang gratis (dan lebih baik)
Ada sejumlah elemen interaktif bawaan dengan semantik dan dukungan keyboard. Yang paling banyak digunakan developer adalah:
Selain itu, elemen dengan
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 memiliki ponsel, Anda dapat melihat bahwa elemen bawaan ini sering kali memiliki interaksi unik di perangkat seluler. Mencoba mereproduksi perangkat seluler ini interaksi Anda sendiri memerlukan banyak upaya! Ini adalah alasan lain yang baik untuk tetap {i>built-in <i}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.
Tetapi agar dianggap dapat diakses, sebuah tombol harus:
- Dapat difokuskan melalui keyboard
- Dukungan dinonaktifkan
- Mendukung tombol
ENTERatauSPACEuntuk melakukan tindakan - Diucapkan dengan benar oleh pembaca layar
Tombol div tidak memiliki salah satu dari hal-hal ini. Itu berarti Anda harus menulis
kode tambahan untuk mereplikasi apa yang diberikan elemen button kepada Anda secara gratis!
Misalnya, elemen button memiliki trik rapi yang disebut *klik sintetis
aktivasi*. Jika Anda menambahkan "klik" ke button, fungsi ini akan berjalan saat
pengguna menekan ENTER atau SPACE. Tombol div tidak memiliki fitur ini, jadi
Anda harus menulis kode tambahan untuk memproses peristiwa keydown. Periksa
kode tombolnya adalah ENTER atau SPACE, lalu jalankan pengendali klik Anda. 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 tautan sebagai tombol dengan melampirkan JavaScript perilaku pelanggan.
<a href="#" onclick="// perform some action">
Baik tombol maupun link mendukung beberapa bentuk aktivasi klik sintetis. Jadi yang mana yang harus Anda pilih?
- Jika mengklik elemen akan melakukan tindakan di halaman, gunakan
<button>. - Jika mengklik elemen akan mengarahkan 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 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. Cobalah menggunakan tab melalui situs Anda dan cari kontrol apa pun yang tidak memiliki dukungan {i>keyboard<i}. Jika memungkinkan, gantilah untuk alternatif HTML terstandardisasi.
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.