Accessibility & Inclusive Design
Aksesibilitas bukan fitur tambahan, melainkan kualitas dasar. Modul ini membahas WCAG, kontras, navigasi keyboard, focus state, dasar screen reader, label form, dan desain inklusif untuk berbagai kemampuan dan konteks.
Tujuan Modul
User bisa membuat produk yang bisa digunakan lebih banyak orang.
- Memahami prinsip dasar WCAG.
- Memastikan kontras dan ukuran teks memadai.
- Mendukung navigasi keyboard dan focus state.
- Menulis label dan pesan error yang aksesibel.
Kontras, Keyboard & Focus State
24 menit
Tujuan Lesson
Prinsip WCAG sederhana
WCAG bersandar pada empat prinsip: Perceivable (bisa dilihat/didengar), Operable (bisa dioperasikan), Understandable (bisa dipahami), Robust (kompatibel dengan teknologi bantu). Ingat dengan kata POUR.
Kontras & ukuran teks
Teks normal butuh rasio kontras minimal 4.5:1, teks besar 3:1. Body minimal 14-16px agar nyaman. Jangan menaruh teks abu tipis di atas putih atau teks putih di atas warna terang.
Navigasi keyboard
Banyak orang tidak memakai mouse. Semua aksi penting harus bisa dicapai dengan Tab dan Enter. Urutan fokus harus logis mengikuti urutan baca, dan tidak ada jebakan fokus.
Focus state
Focus state menunjukkan elemen mana yang sedang aktif saat navigasi keyboard. Jangan pernah menghilangkan outline fokus tanpa menggantinya dengan indikator yang jelas.
Contoh Baik
Form yang seluruh field dan tombolnya bisa dijangkau lewat Tab, dengan focus ring jelas dan kontras teks yang nyaman dibaca.
✕ Contoh Buruk
Form dengan outline:none di semua elemen sehingga user keyboard tidak tahu posisinya, plus teks abu tipis yang sulit dibaca.
Kesalahan Umum Pemula
- ⚠Menghapus outline fokus tanpa pengganti.
- ⚠Kontras teks terlalu rendah.
- ⚠Aksi penting hanya bisa lewat hover/mouse.
- ⚠Urutan fokus tidak logis.
Designer Mahal Berpikir Begini
Coba Latihan
- Audit kontras 3 website memakai checker.
- Pastikan satu form bisa dioperasikan penuh dengan keyboard.
- Perbaiki focus state pada komponen interaktif.
Checklist Lesson
Uji Pemahaman
Apa kepanjangan prinsip WCAG (POUR)?
Label, Error & Inclusive Design
22 menit
Tujuan Lesson
Label form yang benar
Setiap field butuh label yang terlihat dan terhubung secara semantik. Placeholder bukan pengganti label karena hilang saat user mengetik. Screen reader membaca label untuk menjelaskan field.
Pesan error aksesibel
Error harus disampaikan lewat teks, bukan hanya warna merah. Tempatkan dekat field, jelaskan masalah dan solusinya, dan pastikan bisa dibaca screen reader.
Dasar screen reader
Screen reader membaca struktur halaman: heading, label, tombol. Gunakan HTML semantik dan tambahkan aria-label hanya bila perlu. Gambar penting butuh alt text yang deskriptif.
Inclusive design
Desain inklusif mempertimbangkan low literacy, lansia, koneksi lambat, dan situasi sementara (tangan terluka, layar silau). Bahasa sederhana dan target sentuh besar membantu semua orang.
Contoh Baik
Field email dengan label terlihat 'Email', error 'Email harus mengandung @' di bawah field, dan teks alt deskriptif pada ikon penting.
✕ Contoh Buruk
Field hanya berisi placeholder 'Email' yang hilang saat diketik, error hanya berupa border merah tanpa teks penjelasan.
Kesalahan Umum Pemula
- ⚠Memakai placeholder sebagai satu-satunya label.
- ⚠Error hanya ditandai warna.
- ⚠Tidak ada alt text pada gambar penting.
- ⚠Bahasa terlalu teknis untuk low literacy.
Designer Mahal Berpikir Begini
Coba Latihan
- Perbaiki form login agar aksesibel (label + error teks).
- Buat checklist accessibility untuk timmu.
- Tulis alt text untuk 5 gambar fungsional.
Checklist Lesson
Uji Pemahaman
Kenapa placeholder bukan pengganti label?
Project Modul
Accessibility Audit & Fix
Audit aksesibilitas 3 halaman, perbaiki form login, dan susun checklist accessibility yang bisa dipakai tim.
Deliverables:
- Laporan audit kontras & keyboard 3 halaman.
- Form login yang sudah aksesibel.
- Color contrast checklist.
- Accessibility checklist tim.