Menggunakan HTML semantik untuk memudahkan pencapaian keyboard

Rob Dodson

Dengan menggunakan elemen HTML semantik yang benar, Anda mungkin dapat memenuhi sebagian besar atau semua kebutuhan akses keyboard. Artinya, Anda dapat menghemat waktu untuk mengatur tabindex, dan lebih banyak pengguna yang puas.

Dukungan keyboard gratis (dan pengalaman seluler yang 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 memiliki ponsel, Anda dapat melihat bahwa elemen bawaan ini sering kali memiliki interaksi unik di perangkat seluler. Mencoba mereproduksi interaksi seluler ini sendiri membutuhkan banyak pekerjaan. 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 dapat diakses, tombol harus:

  • Dapat difokuskan melalui keyboard
  • Dukungan dinonaktifkan
  • Mendukung tombol ENTER atau SPACE 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 menggantinya dengan elemen button. button mudah ditata dan penuh dengan keunggulan aksesibilitas.

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 diatur gayanya. Dengan sedikit CSS yang cerdas, Anda mungkin dapat mengatasi beberapa batasan ini. Project WTFForms (bernama 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 beralih 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.