Belajar UI Designer - Accessibility in UI

#Pendahuluan

Setelah di episode 14 kita mengevaluasi usability, pada episode ini kita memastikan antarmuka bisa dipakai oleh semua orang — bukan rata-rata orang. Accessibility (a11y) adalah bagian dari UI design yang tidak bisa dianggap bonus: di 2026, standar regulasi seperti EU Accessibility Act dan Web Content Accessibility Guidelines (WCAG 2.2) semakin sering menjadi syarat hukum, bukan hanya sopan santun.

Mengapa a11y menjadi kompetensi inti UI designer? Karena hampir semua keputusan aksesibilitas adalah keputusan visual: kontras warna, ukuran target sentuh, visibilitas focus, toleransi scaling teks. Jika kalian tidak menangani ini di Figma, masalahnya sudah terlambat saat sampai di kode — dan memperbaikinya di kode jauh lebih mahal.

#Kontras (Diwajibkan, Bukan Opsional)

Di episode 3 kita membahas kontras WCAG sebagai bagian palette. Di sini aturannya dipegang ketat:

• Teks normal — AA 4.5 : 1.
• Teks besar (≥ 18pt / 14pt bold) — AA 3 : 1.
• UI components & graphics (ikon, border input, state focus) — AA 3 : 1 terhadap latar sekitarnya.

Perhatikan poin ketiga: ikon pun wajib kontras — bukan hanya teks. Ikon tab bar yang kontrasnya 2 : 1 dengan latar gagal WCAG. Plugin Stark di Figma mengukur semua ini; jadikan pengecekan sebagai rutinitas tiap kali komponen selesai.

#Touch Targets

Area sentuh yang terlalu kecil adalah salah satu penyebab frustrasi mobile terbesar. Standar industri:

• Target minimal: 44 × 44 px (Apple HIG), 48 × 48 px (Material 3) — termasuk hit area, bukan hanya tampilan visual.
• Jarak antar target: minimal 8 px agar jempol tidak salah tekan.

Contoh nyata: tombol ikon "hapus transaksi" yang tampil 24 × 24 px secara visual wajib diberi hit area tak terlihat 44 × 44 px — di Figma, buat transparent container atau catat spesifikasinya untuk developer. Tombol yang tampak kecil tapi mudah diklik jauh lebih baik daripada tampak rapi tapi sering salah tekan.

#Focus States

Untuk pengguna keyboard (termasuk screen reader user), focus state adalah "kursor" mereka. Aturan wajib:

• Setiap elemen interaktif punya focus yang terlihat jelas — umumnya outline/ring 2 px dengan kontras tinggi (bukan sekadar perubahan warna yang halus).
• Focus tidak boleh dihilangkan demi estetika (menghilangkan outline default browser tanpa pengganti adalah kesalahan aksesibilitas klasik).
• Urutan focus (tab order) harus logis — mengikuti alur baca, bukan lompat-lompat.

Focus ring yang terlihat (contoh CSS)

input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Di Figma, desain state focus sebagai variant pada komponen input & tombol — developer tidak perlu menebak seperti apa focus-nya.

#Text Scaling

Pengguna bisa memperbesar teks sistem hingga 200% atau lebih. Desain yang tidak siap akan "pecah": teks terpotong, tombol menumpuk, elemen saling menimpa. Aturan desain agar tahan scaling:

• Jangan kunci ukuran — gunakan Auto layout dengan Hug pada tombol dan container, bukan ukuran tetap.
• Gunakan relative unit dalam keputusan desain (developer memakai rem, bukan px absolut untuk teks).
• Cek di 200% — dalam Figma, coba render layar dengan teks diperbesar; pastikan tidak ada teks terpotong atau elemen saling bertabrakan.
• Min/max — container pakai min/max width (episode 11) agar tetap fluid.

#Peran UI Designer dalam A11y

UI designer bukan penanggung jawab aksesibilitas tunggal (itu kerjaan tim: konten, dev, QA), tetapi kalian memegang lapisan visual:

• Struktur visual — kontras, target, focus, scaling (episode ini).
• Semantik — memastikan hierarki heading jelas (h1 → h2, tidak melompat), label form tersedia, dan teks alternatif untuk ikon/ilustrasi direncanakan.
• Kolaborasi — memberi tahu developer state dan spesifikasi a11y di handoff (episode 13), dan menguji hasilnya bersama (episode 25).

#Praktik: Kantongin Accessible

1. Audit kontras semua teks & ikon layar beranda dengan Stark — perbaiki yang di bawah AA.
2. Cek semua target sentuh minimal 44 px (hitung hit area, bukan visual).
3. Tambahkan state focus ke komponen Input dan Button.
4. Uji teks 200% — perbaiki elemen yang terpotong.
5. Pastikan hierarki heading layar logis (judul layar = h1, kartu = h2).

#Common Pitfalls

• Kontras hanya dicek untuk teks — ikon dan komponen UI lolos dari audit.
• Focus state dihapus — "supaya rapi", padahal menghilangkan navigasi keyboard.
• Hit area kecil — tombol ikon 24 px tanpa perbesar target.
• Scaling diabaikan — layout "rapi di 16px" pecah saat teks 200%.
• Menganggap a11y tugas developer — keputusan kontras, target, dan focus lahir di Figma.

#Penutup

Pada episode 15 ini, kalian telah menjadikan accessibility sebagai bagian dari keputusan desain, bukan tambahan.

Inti yang harus dibawa pulang:

• Kontras berlaku untuk teks, ikon, dan komponen UI — cek dengan Stark.
• Touch targets minimal 44 × 44 px (termasuk hit area), jarak antar target ≥ 8 px.
• Focus states yang terlihat adalah kewajiban untuk navigasi keyboard & screen reader.
• Text scaling dijaga dengan Auto layout + relative unit; uji di 200%.

Di episode 16 selanjutnya kita akan membahas motion & micro-interactions — timing, easing, dan gerakan kecil yang membuat Kantongin terasa hidup dan responsif. Sampai jumpa di episode 16!