Dokumentasi menjelaskan cara membuat elemen tampil berbeda, tetapi tidak semua perbedaan tampilan aman untuk semua pengguna: teks berkontras rendah sulit dibaca, indikator fokus yang dihapus membuat navigasi keyboard tersesat, dan animasi yang bergerak dapat mengganggu sebagian orang. WCAG 2.2 (Web Content Accessibility Guidelines) dari W3C adalah standar yang menerjemahkan kebutuhan tersebut menjadi kriteria terukur, dan keputusan styling kita menyentuh sebagian besarnya. Chapter ini mengkurasi sumber pedoman resmi dan menetapkan angka-angka yang wajib kita ingat saat menulis CSS.
Kontras Warna: Angka yang Perlu Diingat #
Kriteria WCAG 1.4.3 menetapkan rasio kontras minimum antara warna teks dan latar. Angka yang perlu kita pegang:
| Konteks teks | Minimum Level AA | Level AAA |
|---|---|---|
| Teks normal (kurang dari 24px) | 4.5:1 | 7:1 |
| Teks besar (minimal 24px, atau 19px bold) | 3:1 | 4.5:1 |
| Komponen UI dan grafik (batas input, ikon) | 3:1 | 3:1 |
Cara kerja praktisnya: saat memilih kombinasi warna, buka Quickref WCAG 2.2 untuk melihat kriteria beserta teknik yang disetujui, lalu verifikasi pasangan warna dengan alat pemeriksa kontras. Pedoman resmi hanyalah peta; alat pemeriksa (di antaranya tersedia melalui DevTools dan banyak layanan daring) yang menegakkan angkanya pada palet nyata proyek kita.
Fokus Terlihat dan Preferensi Pengguna #
Dua aturan styling yang paling sering dilanggar berkaitan dengan keyboard dan preferensi sistem. Pertama, menghapus outline dengan outline: none tanpa pengganti membuat pengguna keyboard kehilangan penanda posisi; kriteria WCAG 2.4.7 mensyaratkan indikator fokus terlihat, dan pseudo-class :focus-visible
adalah cara modern menyediakannya. Kedua, animasi sebaiknya dihormati preferensi pengguna melalui media query prefers-reduced-motion
:
.tombol:focus-visible {
outline: 3px solid rgb(2, 132, 199); /* indikator fokus yang selalu tampil */
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.kartu-animasi { transition: none; }
}Pedoman resmi: dokumen lengkap WCAG 2.2
untuk kriteria normatif, Quickref
untuk pencarian cepat kriteria, dan web.dev Learn CSS
modul aksesibilitas untuk sisi penerapan. Topik aksesibilitas khusus CSS — kontras, fokus, prefers-reduced-motion, hingga forced-colors — dibedah mendalam di Section Accessibility
Course ini.
Kapan Menuju ke Pedoman Mana #
| Situasi | Sumber | Kriteria terkait |
|---|---|---|
| Memilih warna teks di atas latar baru | WCAG Quickref | 1.4.3 Contrast (Minimum) |
| Menata gaya status fokus tombol | MDN :focus-visible | 2.4.7 Focus Visible |
| Menambah animasi atau transisi | WCAG dokumen lengkap | 2.3.3 Animation from Interactions |
| Menata ukuran area klik | WCAG dokumen lengkap | 2.5.8 Target Size (Minimum) |
Demo pada chapter ini menyajikan checklist visual: dua kartu kontras (satu lulus AA, satu gagal) dan kotak indikator fokus, lengkap dengan probe computed style.
Hasil di Browser:
Kartu kontras baik menampilkan teks putih di atas emerald
rgb(4, 120, 87); kartu kontras buruk menampilkan abu-abu muda
rgb(148, 163, 184) di atas putih; kotak fokus memakai outline
solid 3px berwarna rgb(2, 132, 199).