Sebuah halaman bisa berisi HTML yang semantik dan konten yang berkualitas, tetapi tetap sulit dipakai karena keputusan CSS-nya: kontras teks yang tipis, indikator fokus yang dihapus, animasi yang berlebihan, atau ukuran huruf yang menolak membesar. Accessibility — aksesibilitas — adalah usaha memastikan halaman dapat dipakai oleh sebanyak mungkin orang, termasuk pengguna dengan disabilitas. Sebagai penulis CSS, kita memegang hampir seluruh kendali presentasi. Chapter ini memetakan prinsip yang paling relevan bagi pekerjaan CSS, menegaskan apa yang bisa dan tidak bisa diperbaiki lewat CSS, lalu menyusun peta section.
Mengapa Keputusan CSS Berdampak Luas #
Gangguan aksesibilitas jarang muncul sebagai pesan error. Tabel berikut memetakan keputusan CSS sehari-hari ke kelompok yang paling terdampak:
| Keputusan CSS | Kelompok yang paling terdampak |
|---|---|
| Kontras teks yang tipis | penglihatan rendah; semua orang di layar kusam atau bawah matahari |
outline: none tanpa pengganti | pengguna keyboard dan screen reader kehilangan penunjuk posisi |
| Animasi besar dan berulang | pengguna dengan gangguan vestibular atau sensitivitas gerakan |
Tinggi tetap plus overflow: hidden pada wadah teks | pengguna yang memperbesar teks atau zoom halaman |
Ukuran font yang selalu px | pengguna yang mengandalkan setelan ukuran huruf browser |
Hampir semua masalah di atas tidak terlihat dari uji mouse pada layar besar dengan setelan standar — section ini menuntut cara pengujian baru: keyboard, zoom, dan preferensi sistem.
Empat Prinsip WCAG dalam Bahasa CSS #
Standar acuannya adalah Web Content Accessibility Guidelines (WCAG), yang menyusun semua syaratnya di bawah empat prinsip — sering disingkat POUR:
| Prinsip | Artinya | Padanan dalam pekerjaan CSS |
|---|---|---|
| Perceivable | informasi dapat dirasakan indra | kontras memadai; makna tidak bergantung pada warna saja |
| Operable | semua kontrol dapat dioperasikan | fokus terlihat jelas; target cukup besar; urutan Tab masuk akal |
| Understandable | isi dan perilaku mudah dipahami | state form terbaca; tampilan konsisten antarhalaman |
| Robust | kompatibel dengan beragam alat bantu | CSS tidak merusak makna semantik HTML |
Pemenuhan diukur pada tiga level — A, AA, dan AAA. Mayoritas regulasi menargetkan AA, level yang memuat angka 4.5:1 dan 3:1 yang dibedah chapter berikutnya.
Apa yang Bisa dan Tidak Bisa Diperbaiki CSS #
Peta batasnya penting agar kita tidak menyalahkan CSS untuk masalah yang akarnya di HTML:
| CSS bisa membantu | CSS tidak bisa memperbaiki |
|---|---|
| menata kontras, ukuran, dan jarak agar nyaman dibaca | <div> bergaya tombol tetap bukan tombol: tidak bisa diaktifkan dari keyboard |
| menyediakan ring fokus yang jelas dan kontras | atribut alt atau label yang hilang tidak lahir dari CSS |
| membaca dan menghormati preferensi sistem pengguna | urutan Tab yang salah tidak berubah, karena CSS tidak menyentuh urutan DOM |
| menyembunyikan elemen dekoratif dari semua pengguna | mengubah makna sebuah link menjadi tombol |
Perbedaan paling mendasar terlihat pada pasangan berikut:
<!-- Bergaya seperti tombol, tetapi tidak bisa di-Tab dan tidak diumumkan sebagai tombol -->
<div class="tombol-hapus">Hapus</div>
<!-- Tombol sungguhan: bisa difokuskan, bisa diaktifkan dengan Enter dan Spasi, terbaca alat bantu -->
<button type="button" class="tombol-hapus">Hapus</button>Demo berikut memberi kedua elemen gaya yang sama — tekan Tab di dalam bingkai untuk melihat bedanya:
Semantik HTML adalah fondasi; CSS bekerja di atasnya, bukan menggantikannya.
Menghormati Preferensi Pengguna #
Sistem operasi pengguna menyimpan preferensi tentang gerakan, tema, dan kontras, dan CSS membacanya lewat media query — bukan menebak, melainkan menuruti pilihan yang sudah dibuat orangnya:
@media (prefers-reduced-motion: reduce) { /* kurangi gerakan */ }
@media (prefers-color-scheme: dark) { /* ikuti tema gelap */ }
@media (prefers-contrast: more) { /* perkuat kontras */ }Setiap preferensi adalah kesempatan: halaman yang menuruti setelan terasa dibuat untuk penggunanya. Dukungan media query ini luas di seluruh browser modern; untuk prefers-contrast dan forced-colors, periksa dukungan bila perlu menyasar browser lebih lama.
Peta Section Ini #
Section ini terbagi dua bagian. Bagian aksesibilitas membahas kontras teks, fokus keyboard beserta skip link, reduced motion, dan zoom serta perubahan ukuran teks. Bagian debugging beralih ke peralatan: DevTools dan computed styles, penelusuran masalah box model, Flexbox, Grid, specificity, dan layout responsif, ditutup validasi CSS serta checklist sebelum publikasi. Dua bagian ini menuntut kebiasaan yang sama: melihat halaman dari sudut pandang yang bukan milik kita.
Demo berikut merangkum chapter ini sebagai dua daftar beranotasi — kiri kebiasaan yang melebarkan akses, kanan yang menyempitkannya:
Cukup satu keputusan CSS untuk membatalkan fondasi HTML yang sudah benar.
Kesalahan Umum #
| Kesalahan | Akibatnya | Perbaikannya |
|---|---|---|
| Menganggap aksesibilitas tugas HTML saja | presentasi yang menutup akses tetap lolos tanpa sadar | jadikan tinjauan CSS bagian dari definisi “selesai” |
| Menilai dengan mouse di layar besar | masalah fokus, zoom, dan kontras tak pernah terlihat | uji rutin dengan Tab, zoom 200%, dan setelan sistem |
| Menunda preferensi pengguna sampai akhir proyek | media query preferensi jadi terburu-buru dan tidak konsisten | pasang sejak stylesheet pertama, sempurnakan bertahap |
Ringkasan #
CSS memengaruhi aksesibilitas lewat kontras, indikator fokus, gerakan, dan fleksibilitas ukuran — sementara fondasi semantik HTML tetap tidak tergantikan. Empat prinsip WCAG memberi kerangka, dan preferensi pengguna memberi arah konkret yang bisa dibaca CSS lewat media query. Chapter berikutnya menyelam ke keputusan warna yang paling sering gagal audit: kontras teks.