Belajar UI/UX Design - Accessibility (A11y) & WCAG

#Pendahuluan

Setelah di episode 12 desain KasirKita dibakukan ke design system, pada episode ini kita memastikan sistem itu dapat dipakai oleh semua orang — termasuk pengguna disabilitas. Accessibility (a11y) bukan fitur tambahan; di 2026 ia persyaratan hukum (EU Accessibility Act) dan inti kualitas produk.

Mengapa penting? Satu dari 12 pria mengalami buta warna; jutaan orang mengandalkan keyboard, screen reader, atau pembesaran layar. KasirKita dipakai pemilik warung usia 55+ dengan penglihatan menurun. Desain yang mengabaikan aksesibilitas bukan sekadar tidak inklusif — ia menghalangi pelanggan nyata.

#WCAG 2.2 dan Draft 3.0

WCAG (Web Content Accessibility Guidelines) adalah standar aksesibilitas internasional dari W3C/WAI. Versi aktif: WCAG 2.2; versi 3.0 masih dalam draft. Level kepatuhan: A (dasar), AA (target umum, diadopsi EU Accessibility Act), AAA (ketat).

Draft WCAG 3.0 menggeser model dari "lulus/gagal" ke skor kesalahan (outcomes), dengan pendekatan lebih fleksibel & mencakup kognitif — tetapi untuk saat ini kalian tetap implementasi WCAG 2.2 AA.

#Prinsip POUR

WCAG dibangun di atas empat prinsip — POUR:

Setiap kriteria WCAG masuk ke salah satu prinsip ini. Saat audit, tanyakan: apakah pengguna bisa melihatnya (P), mengoperasikannya (O), memahaminya (U), dan apakah teknologi bantu bisa membaca strukturnya (R)?

#Keyboard Navigation

Pengguna yang tidak bisa memakai mouse mengandalkan keyboard. Kepatuhan dasarnya:

• Semua interaksi bisa dijangkau tab — Tab bergerak maju, Shift+Tab mundur.
• Indikator fokus jelas — elemen fokus harus terlihat (ring 2px+), jangan dihilangkan.
• Urutan tab logis — mengikuti urutan baca visual (atas→bawah, kiri→kanan).
• Tidak ada keyboard trap — pengguna tidak boleh "terjebak" di modal tanpa cara keluar (Esc selalu keluar).

Contoh urutan tab yang benar di layar Konfirmasi KasirKita: tombol back → daftar item → tombol Batal → tombol Konfirmasi. Jangan sampai fokus melompat acak karena susunan layer di Figma tidak teratur.

Fokus yang benar pada modal (role dialog)

<div role="dialog" aria-modal="true" aria-labelledby="hapus-title">
  <h2 id="hapus-title">Hapus produk ini?</h2>
  <button>Batal</button>
  <button>Hapus</button>
</div>

#Screen Reader

Screen reader membacakan layar untuk pengguna tunanetra. Yang wajib dipahami desainer:

• Order baca mengikuti struktur DOM/semantik, bukan posisi visual.
• Alt text menjelaskan gambar: alt="Ilustrasi stok kosong" — bukan alt="img001.png".
• Label pada input dibacakan — jangan hanya placeholder.
• Announcements — toast & status penting harus diumumkan (aria-live), supaya pengguna screen reader tahu "produk ditambahkan".

#Kontras Warna dan Target Sentuh

Dua area yang paling sering gagal audit:

Cek kontras & target KasirKita

/* Kontras teks normal >= 4.5:1, target sentuh >= 44x44 (panduan kuat) */
.tombol-bayar {
  min-height: 44px;            /* target nyaman untuk jempol */
  color: #FFFFFF;
  background: #0E7490;        /* kontras 5.6:1 */
}
.hint-error {
  color: #B91C1C;              /* kontras terhadap #FFFFFF = 5.9:1 */
}

Aturan praktis kontras: teks normal 4.5:1, teks besar & elemen UI 3:1. Ukuran target sentuh: 44×44px untuk jempol (WCAG 2.2 minimum 24×24, praktik industri 44-48).

#Praktik: Audit Aksesibilitas Desain + Fix

Audit file KasirKita:

1. Kontras (Stark): cek semua pasangan teks-latar; perbaiki yang < 4.5:1.
2. Bukan hanya warna: pastikan setiap status punya ikon + label (episode 9).
3. Target sentuh: pastikan tombol & link minimal 44×44px.
4. Keyboard order: tinjau urutan tab logis pada layar Konfirmasi & Pembayaran.
5. Semantik: tandai role/label yang perlu ada pada modal, toast, dan input.
6. Tulis hasil audit (lulus/gagal + fix) di frame "Audit A11y" — bahan handoff episode 22.

#Common Pitfalls

• Menghilangkan focus ring "biar bersih" — ini mematikan navigasi keyboard.
• Kontras hanya "kayaknya cukup" — kontras harus diukur dengan tool, bukan estimasi mata.
• Alt text kosong/tidak bermakna — alt="" hanya untuk gambar dekoratif; konten informatif butuh deskripsi.
• Label hanya placeholder — placeholder hilang saat mengetik; label permanen wajib.
• Toast tanpa aria-live — pengguna screen reader tidak tahu notifikasi penting muncul.

#Penutup

Pada episode 13 ini, kalian telah memahami standar aksesibilitas dan menjalankan audit pertama KasirKita.

Inti yang harus dibawa pulang:

• WCAG 2.2 AA adalah target kepatuhan; WCAG 3.0 (draft) menggeser ke model skor kesalahan.
• Prinsip POUR — Perceivable, Operable, Understandable, Robust — menjadi kerangka audit.
• Keyboard navigation, focus ring, screen reader labels, dan kontras adalah area audit paling kritis.
• Audit dengan Stark (desain) + axe (kode), dan validasi dengan pengguna nyata.

Di episode 14 selanjutnya kita akan memastikan KasirKita nyaman di semua perangkat: mobile-first & responsive design — mobile-first, breakpoints, thumb zone, dan adaptive/fluid layout. Sampai jumpa di episode 14!