Menggunakan HTML semantik untuk memudahkan pencapaian keyboard

Rob Dodson

Dengan menggunakan elemen HTML semantik yang tepat, Anda mungkin dapat memenuhi sebagian besar atau semua kebutuhan akses keyboard Anda. Ini berarti lebih sedikit waktu untuk bermain-main dengan tabindex, dan lebih banyak pengguna yang puas!

Dukungan keyboard secara gratis (dan pengalaman seluler yang lebih baik)

Ada sejumlah elemen interaktif bawaan dengan semantik dan dukungan keyboard yang tepat. Aplikasi yang paling sering digunakan developer adalah:

Selain itu, elemen dengan atribut contenteditable terkadang digunakan untuk entri teks bentuk bebas.

Sangat mudah untuk mengabaikan dukungan {i>keyboard<i} bawaan yang ditawarkan elemen-elemen ini. Berikut adalah beberapa contoh elemen untuk dieksplorasi. Daripada menggunakan mouse, coba gunakan keyboard untuk mengoperasikannya. Anda dapat menggunakan TAB (atau SHIFT + TAB) untuk berpindah antar-kontrol, dan Anda dapat menggunakan tombol panah dan tombol seperti ENTER dan SPACE untuk memanipulasi nilainya.

Jika Anda memiliki ponsel, Anda dapat melihat bahwa berkali-kali elemen bawaan ini memiliki interaksi unik di perangkat seluler. Mencoba mereproduksi interaksi seluler ini sendiri membutuhkan banyak pekerjaan! Ini adalah alasan bagus lainnya untuk tetap berpegang pada elemen {i>built-in<i} bila memungkinkan.

Gunakan button, bukan div

Antipola aksesibilitas umum adalah dengan memperlakukan elemen non-interaktif, seperti div atau span, sebagai tombol dengan menambahkan pengendali klik ke elemen tersebut.

Tetapi agar dianggap dapat diakses, tombol harus:

  • Dapat difokuskan melalui keyboard
  • Dukungan dinonaktifkan
  • Dukung tombol ENTER atau SPACE untuk menjalankan tindakan
  • Dibacakan dengan benar oleh pembaca layar

Tombol div tidak memiliki semua hal tersebut. Artinya, Anda harus menulis kode tambahan untuk mereplikasi elemen button yang diberikan secara gratis.

Misalnya, elemen button memiliki trik menarik yang disebut *aktivasi klik sintetik*. Jika Anda menambahkan pengendali "klik" ke button, pengendali akan berjalan saat pengguna menekan ENTER atau SPACE. Tombol div tidak memiliki fitur ini, sehingga Anda harus menulis kode tambahan untuk memproses peristiwa keydown, memeriksa apakah kode tombolnya adalah ENTER atau SPACE, lalu jalankan pengendali klik Anda. Aduh! Itu merepotkan!

Bandingkan perbedaan dalam contoh ini. TAB untuk mengontrolnya, serta gunakan ENTER dan SPACE untuk mencoba mengkliknya.

Jika Anda memiliki tombol div di situs atau aplikasi yang sudah ada, pertimbangkan untuk menukarnya dengan elemen button. button mudah ditata dan penuh dengan aksesibilitas yang memuaskan!

Antipola 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, mana yang harus Anda pilih?

  • Jika mengklik elemen akan menjalankan tindakan pada halaman, gunakan <button>.
  • Jika mengklik elemen akan mengarahkan pengguna ke halaman baru, gunakan <a>. Metode ini mencakup aplikasi web satu halaman yang memuat konten baru dan memperbarui URL menggunakan History API.

Alasannya adalah tombol dan link dibacakan secara berbeda oleh pembaca layar. Menggunakan elemen yang benar akan membantu pengguna pembaca layar mengetahui hasil yang diharapkan.

TODO: DevSite - Pikirkan dan Periksa penilaian

Gaya visual

Beberapa elemen bawaan, khususnya <input>, dapat sulit untuk ditata gayanya. Dengan sedikit CSS yang cerdas, Anda mungkin dapat mengatasi beberapa keterbatasan ini. Project WTFForms (dinamai dengan 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 mengurangi beban kerja Anda secara signifikan. Coba jelajahi situs Anda dengan {i>tab<i} dan cari kontrol yang tidak memiliki dukungan {i>keyboard<i}. Jika memungkinkan, ganti untuk alternatif HTML standar.

Terkadang Anda mungkin menemukan elemen yang tidak memiliki padanan di HTML. Tidak apa-apa. Baca selengkapnya untuk mempelajari cara menambahkan dukungan keyboard ke kontrol interaktif kustom menggunakan tabindex.