Aksesibilitas

Aksesibilitas mengukur sejauh mana antarmuka dapat digunakan oleh orang dengan kemampuan, perangkat, dan cara penggunaan yang beragam, dan CSS memegang bagian besar dalam ukuran tersebut. Topik ini membahas kriteria kontras WCAG, penanda fokus papan ketik melalui pseudo-class :focus-visible, kemitraan antara markah semantik dan penataan gaya, warna teks yang tidak ditumpulkan, serta penghormatan terhadap preferensi gerak terkurangi. Kelimanya dipilih karena pengaruhnya langsung dirasakan pengguna, bukan sekadar pada kelulusan pemeriksaan otomatis.

Kriteria kontras WCAG#

WCAG, kependekan dari Web Content Accessibility Guidelines, menetapkan kriteria kesuksesan kontras teks yang menjadi acuan luas industri. Untuk teks normal, rasio kontras antara warna teks dan warna latarnya minimal 4.5:1. Untuk teks besar, yaitu teks setinggi minimal 24 piksel atau teks tebal setinggi minimal 18.66 piksel, rasio minimumnya 3:1.

Pemeriksaan kontras tidak perlu dilakukan dengan perhitungan manual. Alat pemilih warna pada DevTools menampilkan rasio kontras teks terhadap latarnya secara langsung, lengkap dengan penanda apabila rasionya di bawah ambang. Pemeriksa daring juga tersedia dengan masukan berupa dua nilai warna, dan pemeriksaan sebaiknya dilakukan pada setiap pasangan warna yang digunakan untuk teks.

Ambang kontras berlaku pula pada teks redup yang sering digunakan untuk keterangan sekunder. Warna abu-abu muda di atas latar putih lazimnya gagal memenuhi rasio 4.5:1, sehingga keterangan tersebut perlu digelapkan atau ukurannya diperbesar hingga masuk kategori teks besar. Kebiasaan mengetes palet sejak awal lebih hemat daripada membenahi seluruh kombinasi warna saat pemeriksaan akhir.

Penanda fokus dengan :focus-visible#

Browser menampilkan penanda fokus pada elemen yang menerima fokus, dan penanda itu merupakan satu-satunya petunjuk posisi bagi pengguna papan ketik. Menghapus penanda tersebut dengan outline: none membuat navigasi formulir dan tautan kehilangan petunjuk posisi bagi pengguna tanpa tetikus. Pseudo-class :focus-visible memungkinkan penanda fokus ditata ulang secara khas tanpa menghilangkannya.

.tombol:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

Browser menerapkan heuristik saat menentukan kecocokan :focus-visible. Fokus yang diperoleh melalui navigasi papan ketik cocok dengan pseudo-class ini, sedangkan fokus akibat klik tetikus pada sebagian kontrol tidak memunculkannya. Hasilnya, pengguna papan ketik tetap mendapat penanda, dan pengguna tetikus tidak melihat garis fokus yang tidak diperlukannya.

Apabila penanda fokus diganti dengan gaya lain, penggantinya harus sama jelasnya, misalnya perubahan ketebalan tepi atau perubahan latar yang kontrasnya memadai. Menyembunyikan outline tanpa pengganti merupakan kesalahan penataan gaya yang paling sering ditemui pada audit aksesibilitas. Rasio kontras penanda fokus pun perlu diperiksa sebagaimana kontras teks.

Markah semantik dan penataan gaya#

Markah semantik dan penataan gaya bekerja sebagai pasangan, karena gaya tidak dapat memulihkan makna yang hilang dari markahnya. Elemen button membawa perilaku lengkap tanpa satu baris JavaScript pun, yaitu dapat difokuskan, dapat diaktifkan dengan tombol Enter dan spasi, serta dilaporkan sebagai tombol kepada teknologi bantu. Elemen div yang bergaya seperti tombol tidak memperoleh satu pun perilaku tersebut.

Mengubah div menjadi tombol yang layak menuntut atribut role, tabindex, dan penanganan peristiwa papan ketik yang ditulis sendiri, dan sebagian dari pekerjaan itu mudah terlewat. Karena itu, urutan pilihan yang benar adalah menata gaya elemen aslinya terlebih dahulu, bukan menggantinya. Properti appearance dan penataan pada topik formulir memungkinkan elemen asli tampil sesuai keinginan tanpa kehilangan perilakunya.

Prinsip yang sama berlaku pada tautan, daftar, dan judul. Elemen a tetap dipilih untuk navigasi, elemen ul untuk daftar, dan heading untuk judul, lalu gaya menyesuaikan tampilannya. Gaya yang menghapus ciri khas elemen semantik, misalnya garis bawah tautan, perlu diganti dengan penanda lain seperti warna atau ketebalan agar fungsinya tetap terbaca.

Warna teks yang tidak ditumpulkan#

Properti color diwariskan ke keturunannya, dan pewarisan itu perlu dijaga agar warna teks tidak hilang di tengah komponen. Deklarasi color: inherit mengembalikan warna sebuah elemen mengikuti warna yang berlaku pada induknya, sehingga teks di dalam komponen mengikuti konteks tema yang berlaku. Pola ini bermanfaat pada tautan yang berada di dalam kartu bertema. Kebalikannya, warna teks yang dideklarasikan kaku pada satu nilai, misalnya #111827, akan tetap gelap di tema gelap dan membuat teks tidak terbaca. Oleh karena itu, warna teks pada gaya global sebaiknya selalu menggunakan token tema.

.panel {
  color: var(--warna-teks);
}

.panel .tautan-tersier {
  color: inherit;
}

Tanpa deklarasi inherit pada contoh, tautan tetap berwarna bawaan browser dan dapat bertabrakan dengan latar panel bertema gelap. Gaya bawaan tautan juga sering ditimpa demi tampilan, tetapi ciri pembedanya jangan sampai hilang, misalnya garis bawah yang diganti dengan warna aksen yang kontras. Setiap kombinasi warna teks dan latar yang dihasilkan tetap wajib lolos ambang kontras pada bagian WCAG di atas.

Preferensi gerak terkurangi#

Fitur media prefers-reduced-motion menyatakan preferensi pengguna yang meminta antarmuka mengurangi gerakan. Pengguna memilih pengaturan ini pada sistem operasinya karena gerakan membuatnya tidak nyaman atau karena gerakan tidak diperlukan. CSS dapat menjawabnya dengan mematikan atau menyederhanakan transisi dan animasi di dalam blok media query tersebut.

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

Penanganan yang baik bukan sekadar menghapus seluruh animasi, melainkan menggantinya dengan umpan balik yang tidak bergerak, misalnya perubahan keadaan yang langsung terlihat. Pola lengkap untuk animasi dan transisi dibahas pada topik gerak terkurangi. Kaitannya dengan aksesibilitas tetap sama, yaitu penghormatan terhadap preferensi yang dinyatakan pengguna secara eksplisit.

Ringkasan#

• WCAG menetapkan kontras minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar, dan DevTools menampilkan rasio kontras secara langsung.
• :focus-visible menata penanda fokus papan ketik tanpa memunculkannya pada setiap klik tetikus, dan penandanya tidak boleh dihapus tanpa pengganti.
• Elemen semantik seperti button membawa perilaku aksesibel yang tidak dapat dipulihkan oleh gaya, sehingga elemen asli ditata gaya alih-alih diganti.
• color: inherit menjaga teks mengikuti konteks komponennya, dan prefers-reduced-motion menghormati preferensi gerak pengguna.

Referensi#

• Understanding WCAG — MDN — Ringkasan resmi struktur WCAG dan kriteria kesuksesannya, termasuk kriteria kontras.
• :focus-visible — MDN — Dokumentasi pseudo-class :focus-visible beserta heuristik kecocokannya pada browser.
• prefers-reduced-motion — MDN — Dokumentasi fitur media untuk mendeteksi preferensi gerak terkurangi.