Apa itu aksesibilitas dan bagaimana merancang aksesibilitas untuk desainer?

Beberapa waktu yang lalu saya diundang Suarise untuk membawakan materi yang sama. Saya merasa tidak ada salahnya menerjemahkan presentasi saya menjadi sebuah tulisan.

Aksesibilitas sering disebut juga dengan A11y (dibaca ALLY), yaitu a + (11 huruf di antara a dan y) + y.

Apa itu aksesibilitas?

Menurut Peter Morville yang dikutip dari The Interaction Design Foundation, ada 7 hal yang memengaruhi pengalaman pengguna (UX).

1. Manfaat (useful),
2. Kebergunaan (usable),
3. Kemudahan pencarian (findable),
4. Kredibilitas (credible),
5. Menarik (desirable),
6. Aksesibilitas (accessible), dan
7. Bernilai (valuable).

Ketujuh hal ini saling memengaruhi satu sama lain. Sebagai contoh di dunia nyata adalah akses kursi roda.

Ada dua masalah yang saya temukan dari kolase gambar akses kursi roda ini.

• Tingkat kemiringannya tidak masuk akal. Berjalan kaki dengan kemiringan ini saja sangat sulit, apalagi menanjak dengan kursi roda. Lalu bagaimana saat ingin turun memakai kursi roda?
• Ada satu bahkan yang memiliki gap cukup jauh dari tanah.

Aksesibilitas dalam gambar ini dianggap sebagai fitur pelengkap saja. Ketika aksesibilitas menjadi sebuah fitur, maka faktor pemengaruh UX lainnya malah jadi bernilai buruk.

• Berguna/bermanfaat bagi pengguna kursi roda? Tidak.
• Mudah digunakan? Tidak.
• Mudah dicari? Mungkin, karena ada beberapa yang memberikan rambu kursi roda, ada juga yang warnanya disesuaikan.
• Kredibel? Kalau melihat desainnya seperti ini tampaknya tidak.
• Desirable atau menarik bagi pengguna kursi roda untuk menggunakannya? Kalau tidak terpaksa, sepertinya tidak.
• Bernilai? Juga tidak.

Perlawanan dalam aksesibilitas

Tapi ini kan hanya berlaku untuk pengguna kursi roda saja, yang mampu berjalan tidak punya kesulitan.

Ableist

Nah, biasanya perlawanan untuk aksesibilitas ini terkait dengan angka. Mayoritas versus minoritas. Yang mayoritas merasa tidak ada manfaatnya mengikut sertakan minoritas.

Menurut WHO pada 2018, difabel di Indonesia hanya 10% saja. Sedikit sekali. Aksesibilitas dianggap tidak perlu karena “penikmatnya” hanya segelintir saja. Hal ini sungguh keliru.

We all will have disabilities eventually, unless we die first.

Gregg Vanderheiden

Pertama, semua orang akan memiliki disabilitas pada waktunya, kecuali modar duluan.

When you design for accessibility, you will often find that you create products that are easier for everyone to use not just those with disabilities.

IxDF

Kedua, manfaat dari aksesibilitas ini dirasakan juga oleh semuanya, tidak hanya oleh difabel.

Manfaat aksesibilitas

Pernah mencari sesuatu di Google dan salah ketek ketik? Apa yang terjadi?

Kenapa kita salah ketik? Disleksia? Tidak bisa melihat di layar kecil? Jempolnya kegedean? Sedang terburu-buru? Tidak ada masalah sama sekali di kemampuan kita?

Apapun itu, toh Google membantu Anda dengan memberikan koreksi “Did you mean: salah ketik“. Di beberapa kasus lain bahkan Google langsung menampilkan hasil yang sesuai seperti “Showing results for salah ketik“. Google langsung melakukan itu tanpa perlu bertanya “do you have a disability? If so, we’ll activate this accessibility feature.”

Nah, aksesibilitas adalah soal memberikan akses yang setara bagi tiap orang untuk merasakan pengalaman yang sama terlepas dari kemampuannya dan keterbatasannya. Manfaat aksesibilitas dirasakan juga oleh tiap orang, bukan hanya difabel.

---

Panduan aksesibilitas untuk desainer

Beruntungnya kita karena sudah ada banyak panduan aksesibilitas untuk desainer. Salah satu panduan yang banyak digunakan adalah Web Content Accessibility Guidelines (WCAG) yang diterbitkan oleh Web Accessibility Initiative (WAI), bagian dari World Wide Web Consortium (W3C). Walau semua namanya diawali dengan “Web”, bukan berarti panduan ini hanya berlaku di situs web saja. Kita bisa mengadopsinya saat mendesain untuk aplikasi hingga poster.

Panduan WCAG dibagi ke dalam beberapa level yang disebut conformity (kesesuaian):

• A – level rendah
• AA – level menengah
• AAA – level tinggi

Untuk sebuah produk dikatakan memenuhi level AA, maka ia juga harus memenuhi level A.

Level mana yang harus kita kejar? Biasanya AA menjadi patokan yang dipakai karena AAA kadang hanya cocok untuk produk yang khusus untuk pengguna yang memiliki keterbatasan.

Aksesibilitas menjadi tanggung jawab setiap pihak yang mengerjakannya, bukan hanya desainer. Namun, desainer memiliki kuasa terhadap ketiga hal ini.

1. Warna
2. Tulisan
3. Tata letak

Saya menyadur penjelasan panduan ini dari Geri Reid.

Panduan aksesibilitas warna

Penggunaan warna (Use of color – A)

Don’t rely on colour alone to communicate meaning or to distinguish visual elements.

Gari Reid

Jangan bergantung sepenuhnya dengan warna untuk mengkomunikasikan makna atau untuk membedakan elemen visual.

Merah biasanya dipakai untuk mengkomunikasikan galat/error kepada pengguna. Warna merah tidak cukup karena penderita buta warna tidak bisa membedakannya. Sebagai desainer kita perlu menambahkan indikator lainnya seperti error text dan icon yang diletakkan sesuai konteks.

Kontras warna (Contrast minimum – AA dan Contrast enhanced – AAA)

Giving text a strong contrast colour against the background makes it easier for people to read and interact with.

Gari Reid

Dari kedua contoh kontras, mana yang lebih mudah dibaca?

Di dalam WCAG, ada dua level kesesuaian kontras warna yang bisa diikuti.

Contrast minimum (AA)

• 4,5 berbanding 1 untuk teks berukuran kurang dari 24 px atau bold 19 px.
• 3 berbanding 1 untuk teks berukuran lebih dari 24 px atau bold 19 px.

Contrast enhanced (AAA)

• 7 berbanding 1 untuk teks berukuran kurang dari 24 px atau bold 19 px.
• 4,5 berbanding 1 untuk teks berukuran lebih dari 24 px atau bold 19 px.

Bagaimana cara menghitung kontras warna? Ada beberapa alat yang bisa digunakan.

1. Color Contrast Analyser. Gratis, tersedia untuk Mac dan Windows.
2. A11y – Color Contrast Checker. Gratis, tersedia sebagai plugin Figma.
3. Cluse. Gratis, tersedia sebagai plugin Sketch.

Saya pribadi lebih suka Color Contrast Analyser karena bisa dipakai untuk software apapun termasuk ketika sedang berselancar di Chrome.

Kontras warna selain teks (Non-text contrast)

All components and graphics must have a contrast ratio of at least 3:1 against adjacent colours, unless they are purely decorative.

Gari Reid

Warna sebuah elemen visual harus memiliki kontras yang cukup dengan warna latar belakangnya, kecuali untuk elemen dekoratif.

Penggunaan warna yang kontras ini bertujuan untuk memudahkan pengguna membedakan sebuah elemen dengan latar belakangnya. Semakin kontras, semakin mudah mengenali dan membedakannya.

Fokus yang terlihat (Focus visible)

It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it.

Gari Reid

Sebuah elemen harus memiliki keyboard focus, khususnya untuk membantu pengguna keyboard berinteraksi di halaman situs web. Penggunaan keyboard focus ini dikhususkan untuk elemen yang punya interaksi seperti tombol, formulir, dan text link.

Kesalahan umum yang sering dilakukan desainer adalah hanya membuat default state saja. Jarang sekali yang menyertakan state lainnya.

Ketika desainer tidak memberikan state lainnya, pengguna bisa kesulitan untuk membedakan elemen tersebut. Saya menambahkan :hover karena masih banyak sekali yang tidak menyertakannya.

Panduan aksesibilitas tulisan (copy)

Gambar-tulisan (Images of Text – AA)

Text that is essential to the journey must not be presented as part of an image. Text inside an image cannot be resized and deteriorates in quality when magnified.

Gari Reid

Tulisan bisa disebut sebagai gambar apabila disimpan dengan format gambar seperti JPG, PNG, dan sebagainya. Apabila itu terjadi, maka gambar-tulisan tersebut jangan menjadi bagian dari proses yang penting dalam sebuah user journey.

Contohnya, dalam sebuah kuis ada ketentuan yang harus dipenuhi oleh pesertanya. Ketentuan tersebut jangan disajikan sebagai gambar.

Hal ini penting karena:

1. Jarang sekali ada desainer yang membuat gambar-tulisan tersebut menjadi responsif.
2. Jarang sekali ada tim produk yang mau meluangkan waktu menyertakan ALT text.
3. Terkadang developer tidak memperbolehkan pengguna melakukan zoom in/zoom out, sehingga sulit untuk memperbesar gambar-tulisan tersebut.
4. Terkadang developer melakukan kompresi yang cukup tinggi sehingga kualitas tulisan di gambar menjadi menurun dan mungkin sulit terbaca.
5. Screen reader tidak bisa membaca tulisan di gambar.

Apabila penggunaan gambar-tulisan tidak bisa dihindari, ada baiknya desainer juga menyertakan versi tulisan dengan format tulisan.

Contoh yang disarankan adalah artikel ini. Gambar contoh semuanya memiliki ALT text, lalu saya memisahkan gambar contoh menjadi dua kolom yang bersifat responsif sehingga nyaman dilihat baik di desktop maupun mobile. Selain itu, gambar contoh hanya bersifat pelengkap visual saja karena saya sudah menyertakan tulisan yang cukup menjelaskan.

Judul (Headings and labels – AA)

Headings must describe the topic or purpose of the content in the section below. Headings must be used appropriately and nested correctly, only using a capital letter for the first word.

Gari Reid

Judul harus menjelaskan topik atau tujuan dari konten yang ada di bawahnya. Judul harus digunakan secara pantas dan dikemas secara benar, dan menggunakan huruf kapital hanya di kata pertama.

TERKADANG AGAR TERLIHAT ELEGAN DAN MODERN, DESAINER MEMBUAT JUDULNYA DENGAN ALL CAPS. COBA SAJA BACA KALIMAT PANJANG INI YANG SAYA TULIS DENGAN HURUF KAPITAL. NYAMAN TIDAK MEMBACANYA?

Penggunaan ALL CAPS dianggap menyulitkan membaca karena pembaca tidak membaca sebuah huruf satu persatu, melainkan per kata. Penggunaan kombinasi huruf besar dan kecil membantu pembaca dalam mengindentifikasinya dengan mudah karena ada naik-turun di dalam visual kata tersebut.

Lalu, developer yang malas sering kali menerjemahkan sebuah desain secara serampangan, yaitu membuat judul sebagai style. Sebaliknya adalah judul secara semantika, yaitu daftar isi yang bertujuan membentuk struktur dokumen. Oleh screen reader, judul ini digunakan untuk membantu pengguna mengetahui isi dari laman situs web yang sedang ia buka.

Penggunaan judul secara semantika sama halnya ketika kita menyusun Tugas Akhir dan menggunakan fitur di Word untuk secara otomatis membuat daftar isinya.

Penggunaan judul secara semantika ini juga membantu mesin pencari dalam menyusun indeks mereka dan mengenali kaitan/relevansi judul dengan konten yang ada di bawahnya.

Salah satu tool yang sering dipakai untuk mengenali struktur sebuah situs web adalah headingsMap, sebuah plugin di Chrome.

Label (Headings and labels – AA)

Labels must indicate the purpose of the field they relate to.

Gari Reid

Label harus mengindikasikan tujuan dari sebuah isian formulir. Seringkali desainer menghapus label agar desainnya terlihat lebih rapih. Desainer lalu memakai placeholder sebagai cara lain untuk membantu pengguna.

Ketika ini terjadi, pengguna bisa saja lupa apa yang harus mereka isi di sebuah isian, khususnya ketika terjadi error.

Yang benar adalah menggunakan label sebagai mana mestinya. Menggunakan placeholder juga sebagai mana mestinya.

Panduan aksesibilitas tata letak

Urutan yang berarti (Meaningful sequence – A)

Order content in your designs to ensure reading and navigation order are be logical and intuitive.

Gari Reid

Urutan konten di sebuah desain harus logis dan intuitif untuk membantu pengguna membaca, bernavigasi, dan berinteraksi.

Misalnya.. Ada desainer yang ingin tampil beda lalu ia menyusun isian di formulir berdasarkan jenisnya.

• Nama: Nama pengguna dan nama kota
• Alamat: Alamat surel dan alamat rumah
• Nomor: Nomor telepon dan nomor kode pos

Apakah ini bisa membantu pengguna?

Orientasi (Orientation – AA)

A screen must not be locked to either horizontal or vertical orientation, unless this is essential. Essential applications could be a television screen, a messaging or virtual reality app.

Gari Reid

Sebuah situsweb harus bisa dibuka terlepas dari orientasi layar penggunanya, mau itu horizontal atau vertikal, kecuali esensial. Esensial di sini seperti aplikasi game dsb.

Selain tujuan di atas, saya ingin menambahkan kasus terbaru.

Ingin membuka rekening di Mandiri? Gunakan handphone. Buat apa punya Macbook Pro terbaru atau iMac ratusan juta, tidak ada gunanya.

Padahal mengetik di PC lebih mudah dari mengetik di handphone. Apalagi di PC juga lebih mudah untuk multi-tasking seperti mencari alamat kantor, copy-paste alamat kantor, dsb.

Padahal (lagi) ini adalah situs web yang harusnya bisa dibuka dari apa saja.

https://twitter.com/RifatNajmi/status/1374222256264519685

Navigasi yang konsisten (Consistent navigation – AA)

If navigation is repeated across multiple pages, all pages must be presented in a consistent manner.

Gari Reid

Apabila suatu navigasi digunakan berulang kali di berbagai laman, navigasi tersebut harus ditampilkan secara konsisten. Tujuannya adalah memudahkan pengguna mengingat letak navigasi tersebut dan mengurangi cognitive load.

Karakteristik sensorik (Sensory characteristics – A)

Instructions must not rely upon shape, size or visual location.

Gari Reid

Instruksi tidak boleh bergantung dengan bentuk, ukuran, atau letak. Contoh ini saya ambil dari Princeton University.

Contoh lainnya

Kita juga bisa mengkombinasikan karakteristik sensorik dengan penggunaan warna.

Identifikasi yang konsisten (Consistent identification – AA)

If a feature is used in multiple places it must be identified in a consistent way.

Gari Reid

Jika sebuah fitur digunakan di berbagai tempat, maka fitur tersebut harus bisa diidentifikasi dengan cara yang konsisten.

Misalkan ada desainer yang ingin membuat tombol dengan berbagai warna..

Cara yang salah adalah membuatnya dalam berbagai warna namun hanya untuk satu state.

Contoh yang benar adalah membuatnya dalam berbagai warna tergantung prioritasnya dan state-nya.

Ada tombol yang lebih diprioritaskan (primer), ada juga yang sekunder. Ada tombol yang di-disable, ada yang sedang di-hover, ada juga yang sedang fokus.

---

Penutup

Aksesibilitas adalah tanggung jawab semua pihak yang mengerjakannya. Aksesibilitas bukanlah fitur tambahan. Tujuan dari aksesibilitas adalah agar setiap orang memiliki akses yang setara untuk pengalaman pengguna yang sama.

Saya harap panduan aksesibiltas untuk desainer ini bisa membantu untuk membuat produk yang lebih accessible.

Untuk mempelajari aksesibilitas lebih lanjut, kamu bisa bergabung dengan grup Telegram A11y ID untuk mengetahui berbagai diskusi aksesibilitas maupun informasi acara terkait.

46 people recommended this post