Aksesibilitas bukan fitur tambahan melainkan syarat dasar antarmuka yang baik. Section ini membahas peran CSS dalam aksesibilitas: kontras warna, focus yang terlihat, teks yang tetap terbaca saat di-zoom, forced colors, dan cara mengujinya.

# Color Contrast

Kenali ambang kontras WCAG untuk tiap jenis konten — teks normal, teks besar, dan elemen non-teks — serta biasakan memeriksa pasangan warna sejak desain.

Buka → # Visible Focus

Rancang indikator fokus yang tetap terlihat dan berkontras bagi pengguna keyboard, mulai dari outline bawaan hingga cincin kustom.

Buka → # Text Resizing

Pastikan teks tetap terbaca saat pengguna memperbesar: gunakan rem, jaga layout tetap utuh, dan uji zoom 200% sesuai WCAG 1.4.4.

Buka → # Reduced Motion

Pahami dampak gerak antarmuka bagi pengguna dengan gangguan vestibular, kaitkan dengan WCAG 2.3.3, dan pastikan animasi dapat dihentikan.

Buka → # Forced Colors

Hormati mode kontras tinggi sistem operasi dengan media query forced-colors, system colors, dan forced-color-adjust.

Buka → # Target Size

Ukur area sasaran tombol dan kontrol dengan benar: ambang WCAG 2.5.8 sebesar 24×24px, praktik baik 44×44px, dan peran spacing antartarget.

Buka → # Accessibility Testing

Susun alur pemeriksaan aksesibilitas halaman: uji keyboard, zoom 200%, emulasi reduced motion dan forced colors di DevTools, serta checklist rutin.

Buka →