Belajar UX Designer - Accessibility & Inclusive Design

#Pendahuluan

Setelah di episode 8 kita mengevaluasi prototype JagaKota dengan heuristics, saatnya membahas dimensi yang sering dianggap "nice to have" padahal non-negotiable: accessibility. Aksesibilitas bukan fitur bonus untuk segelintir orang — ia fondasi yang membuat produk bisa dipakai oleh semua orang, dalam semua kondisi.

Mengapa penting? Karena pengalaman pengguna yang baik tidak ada artinya jika tidak bisa diakses. Warga JagaKota tidak hanya terdiri dari orang muda bermata normal dengan koneksi cepat — ada lansia dengan rabun, pengguna screen reader, dan warga dengan tremor yang kesulitan menekan tombol kecil. Inklusivitas dimulai dari sadar bahwa "user rata-rata" itu tidak ada.

#WCAG: Standar yang Harus Dikenal

WCAG (Web Content Accessibility Guidelines) adalah standar internasional yang menjadi rujukan hukum di banyak negara. Strukturnya empat prinsip — POUR:

Tingkat kesesuaian: A (minimum), AA (standar target), AAA (maksimal). Target industri umumnya AA. Untuk JagaKota, contoh cek konkret:

Teks normal   → rasio kontras ≥ 4.5 : 1
Teks besar    → rasio kontras ≥ 3 : 1
UI component  → batas visual ≥ 3 : 1

Warna tombol JagaKota: hijau #166534 di atas latar putih #FFFFFF — rasio kontras ~7.1:1, lolos AA. Warna teks abu-abu #9CA3AF di atas putih hanya ~2.4:1 — gagal. Audit kontras dengan Stark (plugin Figma) atau axe DevTools (browser).

#Mendesain untuk Semua Kemampuan

#Navigasi Keyboard dan Screen Reader

JagaKota harus bisa digunakan tanpa mouse: semua elemen interaktif dapat dicapai dengan Tab, fokus terlihat jelas, dan konten dibaca dalam urutan yang logis. Setiap field form butuh label yang terhubung:

Label terhubung ke input

<label for="lokasi">Lokasi kejadian</label>
<input id="lokasi" type="text" autocomplete="street-address">

Tanpa for dan id yang cocok, screen reader membacakan input tanpa nama — pengguna buta tidak tahu apa yang harus diisi.

#Target Sentuh yang Cukup

Target sentuh minimal 44 × 44 px (pedoman platform; WCAG 2.2 menyarankan minimum 24 × 24 dengan jarak yang memadai). Tombol kecil rapat-rapat membuat pengguna tremor atau jari besar salah tekan.

#Konten yang Adaptif

Jangan andalkan warna saja untuk menyampaikan makna. Status laporan JagaKota sebaiknya disertai icon dan teks, bukan hanya hijau/merah — pengguna buta warna tidak melihat bedanya.

#Bahasa Inklusif

Inklusivitas juga bahasa. Prinsip: netral, hormat, dan menghindari asumsi. Contoh untuk JagaKota:

#Audit Inklusivitas JagaKota

Lakukan audit cepat dengan checklist ini:

1. Kontras: semua teks ≥ 4.5:1 (AA) — cek dengan Stark/axe.
2. Keyboard: seluruh alur lapor bisa dijalankan tanpa mouse.
3. Screen reader: buka prototype di browser, jalankan screen reader (VoiceOver/ChromeVox), dengarkan apakah label dibaca dengan benar.
4. Target sentuh: semua tombol ≥ 44 × 44 px.
5. Bahasa: tidak ada istilah yang mengecualikan.
6. Perbesar teks: hingga 200% tanpa konten terpotong.

#Common Pitfalls

• Kontras hanya dihitung di warna brand — ingat semua state: hover, disabled, fokus.
• Placeholder sebagai label — label menghilang saat mengetik; selalu sertakan label permanen.
• Error hanya warna merah — sertakan teks dan icon.
• Menguji aksesibilitas di akhir — audit tiap fase, bukan setelah rilis.

#Penutup

Inti yang harus dibawa pulang:

• WCAG memberi empat prinsip: Perceivable, Operable, Understandable, Robust; target industri adalah AA.
• Kontras, navigasi keyboard, label terhubung, dan target sentuh adalah cek wajib.
• Bahasa inklusif adalah bagian dari UX, bukan politik.
• Inclusive design: solusi untuk kebutuhan ekstrem membantu semua orang.

Di episode 10 selanjutnya kita akan membahas psikologi dan cognitive load — mental models, beban kognitif, dan decision fatigue — untuk merancang JagaKota yang tidak menguras tenaga pengguna. Sampai jumpa di episode 10!