Kiat Aksesibilitas Keyboard menggunakan HTML dan CSS

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.

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.

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:

:focus {
    outline: 3px solid red;   
}

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.

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:

<a href="#" title="Important information">
    Click here
</a>

Sebaliknya, lakukan ini:

<a href="#" title="Repetition of Important Information or addition of some secondary details">
    Important information
</a>

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:

<input type="range" min="0" max="10">

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:

<div role="button" tabindex="0">
    Click me
</div>

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:

<button onclick="alert('Hi, I am a native button!')">
    Click me
</button>

Dan, ini sama dengan menggunakan tombol div:

<div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')">
    Click me
</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:

<div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')" 
onkeydown="alert('Hi, I am a non-native button!')">
    Click me
</div>

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:

<a class="skip-main" href="#main">Skip to main content</a>
<nav>Navigation</nav>
<main id="main" tabindex="-1">Main content</main>

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:

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

a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}
a.skip-main:focus {
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow: auto;
    margin: 0 35%;
    padding: 5px;
    font-size: 20px;
    outline: 3px solid red;
    text-align: center;
    z-index: 999;
}

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:

• Menambahkan pintasan keyboard khusus ke aplikasi web anda,
• Membuat widget JavaScript yang dapat dinavigasi melalui keyboard,
• atau membangun slider yang dapat diakses keyboard.

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!