Belajar Product Designer - Accessibility by Default
Menjadikan aksesibilitas sebagai default, bukan fitur tambahan: memahami WCAG, inclusive design, dan membangun komponen accessible. Di episode ini kalian mengaudit Sehati dengan axe DevTools dan plugin Stark, memperbaiki kontras, label, dan target sentuh, serta menerapkan prinsip desain inklusif pada fitur cek gejala
#Pendahuluan
Setelah di episode 9 kita mengevaluasi usability dan memperbaiki states interaksi, pada episode ini kita meluaskan definisi "bisa dipakai": bukan hanya mudah bagi pengguna "normal", tetapi bisa dipakai oleh semua orang — termasuk pengguna dengan gangguan penglihatan, pendengaran, motorik, dan kognitif.
Aksesibilitas (a11y) sering dianggap item terakhir di backlog. Ini keliru: a11y adalah prasyarat, bukan bonus. Regulasi Eropa (European Accessibility Act) mulai memberlakukan syarat aksesibilitas untuk produk digital pada 2025, dan di Indonesia UU No. 8/2016 tentang Penyandang Disabilitas mendorong hal yang sama. Di samping itu, 1 dari 6 orang punya disabilitas — dan desain yang accessible justru lebih baik untuk semua orang (contoh: captcha yang sulit juga menjengkelkan pengguna tanpa disabilitas).
#WCAG: Standar yang Dipakai
WCAG (Web Content Accessibility Guidelines) adalah standar internasional aksesibilitas, kini versi 2.2. Empat prinsip intinya:
- Perceivable — informasi bisa dirasakan (kontras, teks alternatif, bukan hanya warna).
- Operable — bisa dioperasikan (keyboard, target cukup besar).
- Understandable — bisa dipahami (bahasa jelas, error dimengerti).
- Robust — bekerja dengan teknologi bantu (screen reader, dsb).
Kontras adalah pintu masuk paling umum. WCAG AA mensyaratkan rasio kontras ≥ 4.5:1 untuk teks normal, 3:1 untuk teks besar (≥ 24px atau ≥ 19px bold) dan elemen UI seperti ikon & border input.
Tip
Jangan hitung kontras pakai perasaan — mata manusia tidak konsisten menilai kontras. Gunakan alat: plugin Stark di Figma untuk cek kontras langsung saat mendesain, dan ekstensi axe DevTools untuk audit halaman yang sudah hidup. Rasio kontras adalah angka, bukan selera.
#Inclusive Design: Lebih dari Checklist
Inclusive design memulai dari memahami keragaman pengguna: usia, kemampuan, perangkat, dan konteks. Beberapa pertanyaan untuk tiap keputusan desain:
- Perceivable: apakah informasi tersampaikan jika bukan hanya warna? (hasil triase merah/hijau juga punya label "Perlu Perhatian" / "Ringan")
- Operable: bisa diselesaikan hanya dengan keyboard? Ukuran target minimal 44×44 px untuk jempol (masih di bawah batas WCAG 24px, tetapi lebih baik untuk motorik halus).
- Understandable: apakah bahasa di atas level pembaca yang tepat? (pasien lanjut usia vs pasien muda)
- Robust: apakah elemen punya label yang benar untuk screen reader? (aria-label, role, alt text)
#Desain Inklusif di Sehati
| Kondisi user | Solusi inklusif |
|---|---|
| Buta warna | Hasil triase bukan hanya warna — ada ikon & label teks |
| Penglihatan rendah | Kontras ≥ 4.5:1, ukuran teks bisa diubah tanpa merusak layout |
| Motorik terbatas | Target sentuh ≥ 44 px, hindari gesture yang membutuhkan presisi |
| Screen reader | Semua elemen interaktif punya label: aria-label="Lihat hasil triase" |
| Lanjut usia | Font lebih besar opsional, bahasa sederhana, satu aksi per layar |
#Membangun Komponen Accessible
Komponen design system episode 8 harus dibangun dengan aksesibilitas sejak awal. Contoh konkret: komponen Badge hasil triase.
<div role="status" aria-live="polite">
<span class="dot" aria-hidden="true"></span>
<strong>Gejala kuning — perlu perhatian</strong>
</div>Perhatikan detailnya: role="status" memberitahu screen reader bahwa ini info status, aria-live="polite" membuat pembaruan dibacakan tanpa memotong aktivitas user, dan
teks tidak hanya mengandalkan titik warna (aria-hidden menandai dekorasi).
Saat menulis spesifikasi untuk engineer (episode 13), selalu sertakan detail a11y seperti ini. Desainer yang menulis "tombol harus kontras" tanpa angka bukanlah spesifikasi; tulis "kontras ≥ 4.5:1, target ≥ 44×44 px, focus ring 2px offset".
#Praktik: Audit Aksesibilitas Sehati
- Buka prototype hi-fi (atau halaman demo) di browser dengan axe DevTools; jalankan scan dan catat temuan.
- Di Figma, cek kontras semua teks dengan Stark; perbaiki yang di bawah 4.5:1.
- Audit 4 hal di tiap layar: (a) warna bukan satu-satunya sinyal, (b) target sentuh ≥ 44 px, (c) semua elemen punya label, (d) urutan keyboard masuk akal.
- Tulis daftar perbaikan sebagai dokumen
a11y-audit.mddi folder project kalian.
LAYAR 04 HasilTriase
❌ Warna merah/hijau tanpa label teks
❌ Target "Booking" hanya 40px tinggi
✅ Kontras teks utama 6.1:1 (AA)
Perbaikan: tambah label teks + ikon, tinggi tombol → 48px.#Penutup
Inti yang harus dibawa pulang:
- WCAG punya 4 prinsip: perceivable, operable, understandable, robust.
- Kontras teks normal ≥ 4.5:1 (WCAG AA); gunakan alat, bukan perasaan.
- Inclusive design melayani keragaman pengguna — dan hasilnya lebih baik untuk semua.
- Komponen accessible dibangun dengan
role,aria-label, danaria-liveyang benar. - Audit aksesibilitas adalah dokumen kerja, bukan sekali jalan lalu lupa.
Di episode 11 selanjutnya kita akan membahas data-driven design — membaca analytics, memilih metrik yang tepat, dan mengubah insight menjadi keputusan desain yang bisa dipertanggungjawabkan untuk Sehati. Sampai jumpa di episode 11!