UXiD Bandung Meetup Maret 2018: Web Accessibility Primer

If you hear about accessibility, what’s the first thing that pops up in your mind? What’s the relation between accessibility and user experience?
Okay, let’s talk about accessibility furthermore !

Pada hari Sabtu (31/03) berlokasi di Universitas Komputer Indonesia (UNIKOM), UXiD Bandung menggelar meetup dengan mengundang Halida Astatin (UX Lead at Astronaut) sebagai keynote speaker yang membahas tentang accessibility. Meetup kali ini dihadiri oleh UX enthusiasts yang sangat penasaran dan ingin mengetahui peran penting accessibility dalam proses pembuatan sebuah produk ataupun aplikasi. Antusiasme tinggi terlihat selama acara berlangsung terlebih ketika sesi tanya jawab!

Halida menjelaskan bahwa accessibility atau yang seringkali disebut dengan istilah a11y memungkinkan semua orang dengan segala keterbatasan dan disabilitas untuk dapat menggunakan dan mengakses produk ataupun aplikasi secara mudah dengan bantuan assistive technology.

Ada beberapa jenis perbedaan disabilitas dijabarkan sebagai berikut.
1. Audio Impairment: hard of hearing, deafness.
2. Visual Impairment: color blindness, low vision, blindness.
3. Physical: broken limb, muscle pain, paralysis.
4. Speech impairment: stuttering, mutism.
5. Cognitive disability: memory impairment, learning disabilities, autism, seizure.

Kemudian Halida memaparkan tentang assistive technology yang dapat membantu orang dengan disabilitas tersebut.
Speech Recognition: Dragon NaturallySpeaking, Siri.
Screen Reader: VoiceOver, JAWS, built-in, Screen Magnifier, High-contrast Mode, Assistive Touch.

Ada sebuah video menarik dari Apple yang dapat memberikan gambaran bagaimana assistive technology ini dapat meng-empower orang dengan disabilitas. Check it out!

Laws, Rules, Guidelines

Panduan untuk menerapkan accessibility dirangkum sebagai berikut.
Section 508
Web Content Accessibility Guideline (WCAG)
UU VIII/2016 tentang Penyandang Disabilitas

Adapun kasus menarik yang diangkat oleh Halida adalah dua universitas di Amerika yaitu Harvard dan M.I.T (tergabung dalam nonprofit online-learning platform edX) dituntut karena gagal dalam menyediakan caption dalam online lectures, courses, podcasts dan materi edukasi lainnya yang mengabaikan kebutuhan penyandang disabilitas. Lebih lanjut mengenai kasus ini dapat dibaca di artikel ini.

Secara garis besar, ketika mendesain sebuah aplikasi ingatlah bahwa accessibility ini penting jadi sertakan subtitle jika di aplikasi itu terdapat sebuah video sehingga orang dengan audio impairment dapat membaca penjelasan dari konten video tersebut. Kemudian sertakan juga “alt-text” pada sebuah gambar sehingga orang dengan visual impairment dapat mengetahui teks yang mendeskripsikan gambar tersebut ketika dibaca oleh Screen Reader.

Designing for Accessibility

1. Don’t rely on colours

Color blindness people can’t see the errors on form if you only rely on colours

Selalu sertakan statement yang menyatakan adanya error, contohnya pada input form. Jika hanya mengandalkan warna saja maka orang yang buta warna tidak dapat mengakses itu.

2. Pay attention to colour contrasts

Sufficient color contrast helps users with low vision, color blindness, or worsening vision see and read the text on your screen

Colour contrast dapat membantu orang dengan visual impairment untuk melihat dan membaca teks di layar dengan lebih jelas.

3. Provide visual cue on focus

Without visual cue, it’s impossible for keyboard users to tell where the focus is, making the web difficult to navigate

Selalu sertakan visual cue sehingga orang yang menggunakan keyboard dapat mengetahui pada bagian mana mereka sedang berada dalam sebuah website. Ini akan menjadi navigasi bagi mereka.

4. Be clear with forms

Forms without borders and forms without labels pose accessibility problems

Sertakan label pada form karena beberapa orang memiliki short-term memory (cognitive disabilities).

5. Don’t hide important information in hover state

Some assistive technology relies on links being visible to click it

Informasi penting sebaiknya tidak memakai hover karena ini biasanya akan dilewati oleh Screen Reader. Beberapa assistive technology bergantung pada visibile link untuk proses pembacaan.

Tools

Beberapa tools yang dapat digunakan untuk proses mendesain product ataupun aplikasi sehingga memiliki user experience yang lebih baik bagi orang dengan disabilitas sehingga mereka dapat mengakses nya, sebagai berikut.

1. Colorable: contrast checker
   colorable.jxnblk.com
2. Stark: contrast checker, visual impairment simulator | Sketch Plugin
   getstark.co
3. Funkify: disability simulator | Chrome extension
   funkify.org
4. Tenon: accessibility checker
   tenon.io
5. tota11y: accessibility checker | JS file, Chrome extension
   khan.github.io/tota11y
6. a11y: accessibility checker | Command-line interface
   addyosmani.com/a11y

Last but not least,

Design for the extreme user–and make the average user superhuman

— https://www.fastcodesign.com/90160000/how-to-design-for-everyone-in-3-steps

#a11y is not a possibility, it’s a responsibility

UXiD Maret 2018: Web Accessibility Primer

Buat kalian yang kemarin belum sempat menghadiri meetup jangan kecewa karena UXiD Bandung menyediakan video dokumentasi acara kemarin :)

Semoga meetup sesi ini dapat menginspirasi kalian dalam mengaplikasi kan ilmu yang sudah diberikan oleh Halida. Stay tuned dan see you di meetup selanjutnya!

Source: Halida Astatin