Studi Kasus Accessibility – Web Form

Di artikel sebelumnya, kita telah belajar bahwa Accessibility adalah sebuah hal yang wajib ada dan memudahkan para pengguna disabilitas untuk mengakses produk kita seperti website layaknya orang normal. Pada bagian ini, saya akan menjelaskan studi kasus Accesibility pada sebuah form website dan menggunakan Lighthouse pada browser Chrome versi 63.0.3239.132 sebagai audit.

Studi kasus – Web Form

Form web yang kita rancang sebagai berikut:

  1. Nama dan username menggunakan <input type="text">
  2. Alamat menggunakan <textarea>
  3. Email menggunakan <input type="email">
  4. Password menggunakan <input type="password"> dan menambahkan atribut required
  5. Jenis kelamin menggunakan <input type="radio">
  6. Hobi menggunakan <input type="checkbox">
  7. Asal kota menggunakan <select>

Saya telah membuatkan file no-a11y-form.html dan sebagai developer yang baik cukup copy paste source code di bawah.

Selanjutnya, bukalah no-a11y-form.html di browser Chrome dan gunakan kursor anda untuk melakukan percobaan dengan meng-klik setiap label di form tersebut. Apakah kursor keyboard langsung mengarah pada setiap field? Jika tidak, maka hal ini perlu kita perbaiki bersama. Mengapa? Dalam dunia Accessibility, pengguna disabilitas sangat bergantung dengan interaksi keyboard, mouse dan screen reader.

Kita akan gunakan salah satu screen reader bernama Voice Over yang tertanam dalam Mac OS untuk menguji no-a11y-form.html. Umumnya, ketika ingin berpindah dari satu tempat ke tempat lain dalam satu halaman, pengguna disabilitas menggunakan tombol TAB keyboard. Hasil pengujiannya seperti video di bawah ini.

Kita bisa lihat bahwa label nama, email, username, dsb tidak terbaca oleh screen reader dan hal tersebut akan membuat pengguna disabilitas bingung serta kemungkinan paling buruk adalah meninggalkan halaman web. Tentu hal tersebut tidak kita inginkan!

Sebelum kita mulai memperbaiki, kita lakukan audit Lighthouse pada browser Chrome. Lighthouse telah tertanam secara default di versi Chrome 60 ke atas dan jika browser anda berada di bawah versi tersebut, silahkan menggunakan extension Lighthouse yang disediakan oleh Chrome. Klik kanan pada halaman no-a11y-form.html => pilih inspect atau inspect element => pilih tab Audits => pilih perform an audit => centang Accessibility. Biarkan Lighthouse melakukan inspeksi dan hasilnya seperti di bawah.

Audit no-a11y form tanggal 24 Januari 2018

Dari hasil audit Accessibility pada form no-a11y sebesar 97/100. Dan jika anda perhatikan, ada satu isu yang perlu diperhatikan yakni Form elements do not have associated labels. Maksudnya adalah setiap elemen form yang kita buat harus berasosiasi atau terhubung dengan label yang kita buat agar dijabarkan dengan benar oleh teknologi pembantu seperti screen reader.

Terdapat dua cara untuk memperbaikinya. Cara pertama saya berikan nama form-a11y-alternative-1.html

Jika anda perhatikan source code di atas dengan seksama maka <label> telah berasosiasi dengan elemen form yang kita buat. Hal ini bisa ditunjukkan pada sintaks di bawah.

Kita hanya perlu menyisipkan atribut for pada label dan atribut id pada elemen form yang kita asosiasikan serta value dari kedua atribut harus sama.

Kita akan lakukan lagi pengujian menggunakan Voice Over dan hasilnya seperti video di bawah ini.

Kita bisa lihat bahwa label nama, email, username, dsb sudah terbaca oleh screen reader. Berikutnya kita audit form-a11y-alternative-1.html dengan Lighthouse.

Audit form-a11y-alternative-1.html tanggal 24 Januari 2018

Cara kedua saya berikan nama form-a11y-alternative-2.html

Jika anda perhatikan source code di atas dengan seksama pada field email, <label> membungkus elemen form email yang kita buat seperti sintaks di bawah.

Kita lakukan pengujian dengan Voice Over seperti video di bawah ini.

Jika anda menggunakan screen reader seperti Voice Over (Mac) atau NVDA (Windows) dan menggunakan tombol TAB di keyboard akan berbunyi “Hobi Ngoding”, “Hobi Tidur”, “Hobi Makan”, “Jenis kelamin Perempuan”, “Jenis kelamin laki-laki”. Berikutnya kita lakukan audit pada form-a11y-alternative-2.html menggunakan Lighthouse, hasilnya seperti sama seperti form-a11y-alternative-1.html.

Audit form-a11y-alternative-2.html tanggal 24 Januari 2018

Bonus

Jika anda memperhatikan source code pada form-a11y-alternative2.html maka terdapat sebuah atribut bernama aria-labelledby pada field Hobi dan Jenis kelamin. Hal ini akan dibahas pada artikel selanjutnya.

Kesimpulan

  1. Setiap form elemen harus berasosiasi dengan label.
  2. Terdapat dua cara untuk melakukan hal tersebut. Pertama menambahkan atribut <for> pada label dan atribut <id> pada elemen form. Kedua, menambahkan membungkus form elemen dengan <label>. Kedua cara tersebut dapat digunakan sesuai dengan kenyamanan anda dalam menciptakan Accessibility yang baik bagi pengguna disabilitas.

Terima kasih telah membaca artikel ini, semoga bermanfaat, sebarkan dan jangan ragu bila ingin bertanya atau menyampaikan kritik dan saran di kolom komentar. 😉

 

satyakresna

~Tetap Fokus~