Pengujian Aksesibilitas: color-contrast dan fokus

CSS mengendalikan kontras warna, visibilitas indikator fokus, visibilitas elemen (display:none menghapus elemen dari pohon aksesibilitas), dan urutan baca (pengurutan visual melalui order flexbox dibandingkan urutan DOM). Pilihan CSS secara langsung memengaruhi apakah pengguna penyandang disabilitas dapat menggunakan antarmuka.

WCAG 2.1 AA mensyaratkan rasio kontras 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (tebal 18px atau lebih, atau biasa 24px atau lebih). AAA masing-masing mensyaratkan 7:1 dan 4.5:1. Rasio ini membandingkan luminans warna teks latar depan dengan luminans warna latar belakang.

Klik elemen teks apa pun di DevTools → panel Gaya. Contoh warna menampilkan lencana rasio kontras. Tanda centang menunjukkan bahwa persyaratan terpenuhi; tanda X menunjukkan kegagalan. Pemilih warna menampilkan garis ambang AA/AAA pada gradien warna.

axe-core, Lighthouse, dan Pa11y secara otomatis mengaudit rasio kontras pada semua elemen teks. Jalankan axe-core dengan @axe-core/react dalam pengembangan untuk memperoleh peringatan kontras waktu nyata di konsol peramban selama pengembangan.

CSS outline: none atau outline: 0 pada :focus menghapus cincin fokus bawaan peramban, sehingga navigasi keyboard tidak terlihat. Ini merupakan kegagalan aksesibilitas yang kritis. Gantilah dengan gaya fokus kustom yang terlihat, bukan menghapus indikator fokus sepenuhnya.

:focus berlaku untuk semua peristiwa fokus, termasuk klik mouse, sehingga menampilkan cincin yang terlihat saat mengeklik—sesuatu yang tidak disukai desainer. :focus-visible hanya berlaku ketika peramban menentukan bahwa navigasi keyboard sedang digunakan, sehingga pengguna keyboard memperoleh cincin fokus tanpa menampilkannya saat mengeklik dengan mouse.

WCAG 2.2 memperkenalkan Kriteria Keberhasilan 2.4.11 (Tampilan Fokus AA): indikator fokus harus memiliki kontras setidaknya 3:1 terhadap warna di sekitarnya dan mencakup perimeter komponen. Gaya fokus kustom harus memenuhi persyaratan ini, bukan sekadar ada.

Mode Kontras Tinggi Windows mengganti warna CSS dengan warna sistem yang ditentukan pengguna. Gunakan @media (forced-colors: active) untuk menyediakan gaya alternatif yang berfungsi dalam mode kontras tinggi. Uji dengan Pengaturan Windows → Aksesibilitas → Kontras Tinggi.

WCAG 1.4.1 melarang penggunaan warna sebagai satu-satunya cara untuk menyampaikan informasi. Keadaan kesalahan yang hanya berubah menjadi merah tidak memenuhi kriteria ini. Padukan warna dengan ikon, label teks, pola, atau garis bawah agar informasi nonwarna selalu tersedia.

WCAG 1.4.4 mengharuskan teks dapat diperbesar hingga 200% tanpa kehilangan konten. WCAG 1.4.12 mengharuskan penggantian spasi teks (peningkatan letter-spacing, line-height) tidak merusak tata letak. Gunakan unit relatif (rem, em) untuk tipografi agar kedua persyaratan terpenuhi.

Pengujian CSS aksesibilitas yang menyeluruh mencakup ekstensi peramban axe DevTools untuk pengembangan, Lighthouse CI untuk pemeriksaan alur integrasi berkelanjutan otomatis, Pa11y untuk audit halaman melalui baris perintah, serta pengujian navigasi keyboard manual dengan Tab/Shift+Tab untuk memverifikasi visibilitas dan urutan indikator fokus.

Mengapa outline: none tidak boleh menjadi CSS akhir untuk keadaan :focus suatu elemen?

Pengujian aksesibilitas CSS mencakup rasio kontras warna (minimum 4.5:1 untuk AA), indikator fokus yang terlihat dan sesuai WCAG 2.2 menggunakan :focus-visible, penghindaran penggunaan warna sebagai satu-satunya penyampai informasi, dukungan mode forced-colors, serta unit tipografi relatif untuk memenuhi persyaratan pengubahan ukuran. Alat otomatis dan pengujian keyboard manual memastikan cakupan yang menyeluruh.