Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Kiat Aksesibilitas Keyboard menggunakan HTML dan CSS

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Membuat situs web anda dapat diakses khusus untuk pengguna keyboard adalah bagian penting dari gambaran aksesibilitas yang lebih besar. Berikut beberapa kiat aksesibilitas keyboard yang dapat anda terapkan dengan cepat menggunakan dasar HTML dan CSS.

A11y dari Dasar

Kiat-kiat ini adalah bagian dari Aksesibilitas Web: Panduan Belajar Lengkap, tempat kami mengumpulkan berbagai tutorial, artikel, kursus, dan ebook, untuk membantu anda memahami aksesibilitas web dari dasar.

Apa itu Aksesibilitas Keyboard?

Keyboard dapat menjadi sarana utama bagi sebagian pengguna untuk melakukan navigasi sebuah website. Saat ini, ketika sebagian besar antarmuka website dirancang dengan kursor mouse dan interaksi dalam sebuah sentuhan, navigasi keyboard menjadi diabaikan. Aksesibilitas keyboard adalah praktik untuk memastikan bahwa pengguna dapat melakukan navigasi secara efisien dan tanpa hambatan hanya dengan menggunakan keyboard mereka.

Siapa yang Mungkin Membutuhkan Aksesibilitas Keyboard?

Ini adalah sekumpulan target utama dari aksesibilitas keyboard:

  • Pengguna dengan disabilitas motorik yang mengalami kesulitan menggunakan mouse, menggunakan perangkat sentuh, atau mengklik hal-hal kecil.
  • Pengguna tunanetra atau pengguna yang sering memiliki kekurangan dalam pengelihatan lebih memilih untuk melakukan navigasi pada sebuah website dengan keyboard khusus braille.
  • Diamputasi atau mereka dengan amputasi bawaan (lahir tanpa anggota badan, khususnya tangan dalam kasus ini) sering menggunakan perangkat keras khusus meniru fungsi dari keyboard.
  • Siapa pun yang tidak memiliki akses ke mouse atau fungsi ke perangkat panel sentuh.

1. Menguji Website anda untuk Aksesibilitas Keyboard

Sasaran yang paling penting dari aksesibilitas keyboard adalah membuat setiap elemen interaktif, seperti tautan dan kontrol terhadap formulir, tersedia dengan tombol Tab. Beginilah cara pengguna melakukan navigasi halaman website hanya melalui keyboard. Menguji website anda untuk aksesibilitas keyboard sebenarnya cukup mudah: cukup tekan tombol Tab dan lakukan navigasi dari bagian atas halaman ke bawah, sorot elemen aktif saat anda melakukannya.

Navigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab key
Melakukan navigasi terhadap tautan secara cepat pada footer halaman website Tuts+ dengan tombol Tab

Amati seberapa mudah atau sulitnya untuk mendapatkan konten utama, klik menu, menisi formulir, mengoperasikan slider, atau mengikuti posisi anda saat ini di halaman. Anda juga dapat menguji arah sebaliknya menggunakan tombol pintasan keyboard Shift + Tab.

2. Membuat css :focus agar mudah dilihat

CSS memiliki pseudo class :focus yang dipicu ketika pengguna melakukan proses klik atau tap pada sebuah item, atau memilih dengan tombol Tab. Kondisi :focus hanya berlaku untuk element yang dapat difokuskan, yaitu <a>, <button><input>, <textarea>, <select>, dan <area>.

Setiap browser hadir dengan default style tersendiri, style :focus biasanya sebuah garis putus-putus hitam di sekitar elemen atau cahaya yang kabur, namun banyak desainer menemukannya tidak sesuai selera mereka dan akan benar-sepenuhnya menghapusnya. Ini sebenarnya adalah kesalahan nomor satu yang merusak akses keyboard pada halaman web. Jika anda tidak menyukai style secara default, gunakan sesuatu yang cocok dengan desain website anda.

focus styles in Google Chrome browserfocus styles in Google Chrome browserfocus styles in Google Chrome browser
Default style :focus dalam browser Google Chrome

Pilih gaya yang mudah terlihat namun tidak hanya mengandalkan pada warna. Berikut adalah contoh yang mungkin dapat bekerja dengan baik bagi pengguna yang hanya menggunakan keyboard:

3. Gunakan Penunjuk Warna yang Bebas untuk Tautan

Hyperlink tidak boleh hanya dibedakan berdasarkan warna. Prinsip ini biasanya disebutkan dalam kaitannya dengan aksesibilitas visual, karena orang yang memiliki kekurangan pada penglihatan sulit membedakan antara warna-warna tertentu. Namun, tautan yang terlihat jelas juga penting untuk aksesibilitas pengguna keyboard. Pengguna yang hanya menggunakan keyboard harus dapat melihat tautan secepat mungkin. Ini membantu mereka memindai halaman dan mencari tahu cara melakukan navigasi ke bagian yang mereka inginkan.

Demikian pula style untuk :focus, hyperlink juga hadir dengan style bawaan browser secara default - garis bawah biru dalam banyak kasus. Namun, desainer sering menghapus garis bawah dan hanya menggunakan warna untuk menunjukkan adanya tautan. Jika anda menghapus garis bawah standar selalu gunakan penunjuk warna bebas lain yang cocok dengan desain website anda, seperti pada border, ikon, atau garis luar / outline.

Clear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visited
Hapus tautan pada gov.uk: (1) hyperlink (2) kondisi fokus (3) kondisi visited (dikunjungi)

Anda dapat menggunakan atribut title untuk mendeskripsikan konten tautan, tetapi hanya terlihat ketika seseorang mengarahkan(hover) pada tautan. Pengguna yang hanya menggunakan keyboard tidak memiliki akses ke event hover, jadi jangan pernah menempatkan informasi penting pada atribut title. Ini juga tidak dihitung sebagai penunjuk warna yang bebas. Misalnya, jangan pernah melakukan ini:

Sebaliknya, lakukan ini:

WCAG 2.0 juga memperingatkan tentang masalah aksesibilitas atribut pada title. Gunakan dengan hati-hati atau tidak menggunakannya sama sekali.

4. Gunakan Elemen Kontrol Asli

Form merupakan elemen interaktif, jadi mereka harus dapat diakses melalui keyboard. Pengguna yang hanya menggunakan keyboard harus dapat mengisi formulir, menekan tombol, menggunakan rentang slider, memilih opsi, dan mengoperasikan kontrol dengan mudah. Jika anda memiliki form apa pun pada website anda, anda harus mengujinya satu per satu, menggunakan tombol Tab. Pikirkan tentang form pendaftaran, form untuk newsletter, formulir untuk login, form untuk komentar, keranjang belanja, dan sebagainya.

Cara terbaik untuk membuat form tersebut memungkinkan untuk mudah diakses adalah dengan menggunakan elemen kontrol asli dimana pun. Elemen kontrol asli hadir dilengkapi dengan aksesibilitas pada keyboard, yang berarti mereka dapat fokus dan merespon event penekanan pada tombol secara default. Mereka adalah sebagai berikut:

  • <button>
  • <input>
  • <textarea>
  • <select>
  • <option>

Misalnya, Anda dapat membuat penggeser rentang yang dapat diakses keyboard dengan HTML berikut:

Pengguna keyboard dapat memfokuskannya terlebih dahulu dengan tombol Tab, kemudian gerakkan penggeser ke atas dan ke bawah dengan Spasi.

Jika Anda perlu menggunakan tag HTML yang tidak dapat difokuskan untuk elemen interaktif karena alasan tertentu, Anda dapat membuatnya dapat difokuskan dengan atribut tabindex="0". Misalnya, <div> berikut ini berubah menjadi tombol yang dapat difokuskan:

Atribut role="button" pada snippet kode di atas adalah peran penunjuk ARIA. Meskipun pengguna yang hanya menggunakan keyboard tidak membutuhkannya, itu sangat diperlukan untuk pengguna pembaca layar dan akses visual.

Bahkan jika tombol yang bukan asli telah dibuat fokus, itu masih kalah dengan mitra asalnya dalam hal akses keyboard. Anda akan segera memahami ini saat anda mencoba menambahkan pengendali event ke tombol. Inilah yang terlihat seperti event listener klik dengan elemen <button> asli:

Dan, ini sama dengan menggunakan tombol div:

Jika anda mengklik tombol menggunakan mouse atau touchpad, anda dapat melihat kedua pesan peringatan. Namun, jika anda melakukan navigasi ke setiap tombol menggunakan tombol Tab dan tekan Enter untuk memprosesnya, anda hanya akan melihat pesan pertama, milik tombol asli. Untuk membuat tombol yang bukan asli memproses input keyboard, anda juga perlu menentukan penanganan event pada tombol secara terpisah:

Sekarang, ketika pengguna keyboard menekan tombol Enter, mereka juga melihat pesan milik tombol yang bukan asli. Seperti yang anda lihat, jauh lebih mudah dan lebih cepat untuk menggunakan versi asli. Jadi, kecuali anda memiliki alasan kuat untuk tidak menggunakannya, selalu gunakan elemen kontrol asli.

5. Tambahkan tautan "Lewati menuju Konten Utama"

Menambahkan Lewati ke konten utama atau Lewati tautan navigasi ke halaman website anda sangat membantu pengguna yang hanya menggunakan keyboard. Dalam banyak kasus, pengguna ini tidak ingin melompati semua tautan navigasi sebelum mereka mulai membaca konten. Ini memang benar ketika mereka melihat lebih dari satu halaman di website anda. Bayangkan saja, tanpa tautan lewati navigasi, mereka harus melalui tautan navigasi yang sama di beranda setiap waktu. Itu tidak tampak seperti aktivitas yang sangat menghibur.

Untuk membuat fungsi tautan navigasi lompatan, anda perlu mengikatnya ke konten utama menggunakan atribut HTML id dan href dengan cara berikut:

Anda juga perlu menambahkan atribut tabindex="-1" ke container dari konten utama. Ini adalah tabindex yang sama yang telah digunakan di atas untuk membuat tombol yang bukan asli yang dapat difokuskan. Atribut tabindex digunakan untuk memodifikasi urutan navigasi default. Dengan nilai 0, membuat elemen yang tidak bisa fokus dapat difokuskan. Dengan nilai -1, itu juga membuat elemen-elemen dapat difokuskan tetapi mereka menjadi tidak dapat dijangkau dengan navigasi keyboard seacara default. Browser tertentu, seperti Chrome dan IE, memerlukan kehadiran tabindex="-1" pada target tautan navigasi yang akan dilewati, jadi jangan pernah mengabaikannya.

Memperlihatkan Tautan Lewati Hanya untuk Pengguna Keyboard

Anda dapat menggunakan CSS untuk membuat tautan navigasi yang dilewati hanya terlihat untuk pengguna keyboard. Dalam kondisi awalnya, sembunyikan tautan dari pengguna biasa dengan memposisikannya di luar area pandang. Kemudian, perlihatkan untuk pengguna keyboard dengan membuat style terpisah untuk kondisi fokus yang dipicu saat pengguna menekan tombol Tab.

Anda dapat melihat efek ini dalam tindakan pada situs seperti webaim.org, www.w3.org, dan (seperti biasa) www.gov.uk:

Reveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard Users
Pernahkah Anda melihat tautan ini sebelumnya?

CSS berikut adalah versi yang disederhanakan dari kode navigasi yang dilewati dari Buku Panduan Aksesibilitas TI NC State University:

Ketika pengguna menekan tombol Tab, elemen .skip-main diberikan status fokusnya dan tautan navigasi yang dilawati muncul pada layar.

Anda dapat dengan cepat menguji cara kerjanya jika anda melakukan klik pada bagian paling atas dari demo di bawah ini dan menekan tombol Tab. Sebagai gantinya anda mungkin merasa lebih mudah untuk membuka demo di bawah ini dalam tampilan halaman penuh.

Langkah Selanjutnya

Dalam artikel ini, saya berbagi beberapa kiat dari dasar aksesibilitas keyboard yang dapat anda terapkan menggunakan HMTL dan CSS. Ada hal-hal lain yang lebih maju yang bisa anda lakukan untuk aksesibilitas keyboard juga. Misalnya, Anda dapat:

Selain kiat-kiat ini, hindari penggunaan CAPTCHA jika memungkinkan, karena mereka memiliki masalah aksesibilitas yang serius, baik untuk pembaca melalui layar dan pengguna yang hanya menggunakan keyboard. Jika anda masih perlu menggunakannya, berikan lebih dari dua cara untuk menyelesaikannya, jika tidak, pengguna dengan kebutuhan aksesibilitas akan kesulitan untuk memproses form anda. Beri tahu kami jika anda memiliki kiat aksesibilitas keyboard tersendiri!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.