Section ini membahas accessibility dan debugging sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# CSS dan Accessibility

Pahami bagaimana keputusan CSS memengaruhi pengguna dengan disabilitas, batas kemampuan CSS, dan peta lengkap section accessibility dan debugging.

Buka → # Kontras Teks

Bedah kontras sebagai sistem: level WCAG A/AA/AAA, kontras non-teks 3:1, nuansa placeholder dan disabled, serta alur pemeriksaan dengan DevTools dan Lighthouse.

Buka → # Focus Keyboard

Lihat halaman dari mata pengguna keyboard: urutan Tab mengikuti DOM, jebakan property order, ring fokus yang layak, dan pola skip link lengkap.

Buka → # Reduced Motion

Perdalam penghormatan reduced motion: pola global yang disempurnakan, pola no-preference, scroll halus, parallax, dan cara mengujinya di DevTools.

Buka → # Zoom dan Text Resizing

Pastikan halaman bertahan saat teks diperbesar 200%: beda zoom browser dan setelan ukuran huruf, rem vs px, layout fleksibel, dan alur uji zoom.

Buka → # Browser DevTools untuk CSS

Orientasi DevTools untuk pekerjaan CSS: Elements, Styles, Computed, Layout, drawer Rendering, toggling class dan state, serta pintasan keyboard yang mempercepat debug.

Buka → # Computed Styles

Baca keputusan akhir browser lewat tab Computed: nilai computed vs yang ditulis, checkbox inherited, filter, sumber aturan, dan diagram box model.

Buka → # Debugging Box Model dengan DevTools

Jalankan alur kerja penuh panel Layout DevTools untuk box model: diagram yang bisa disorot dan disunting, trik outline semua elemen, dan resep diagnosis tiga keluhan kotak yang paling sering muncul.

Buka → # Debugging Flexbox dengan DevTools

Gunakan overlay Flexbox DevTools untuk membaca main axis, ruang kosong, dan posisi item, lalu diagnosis tiga keluhan flexbox yang paling sering muncul: centering gagal, overflow, dan justify-content yang tak berpengaruh.

Buka → # Debugging Grid dengan DevTools

Baca overlay Grid DevTools — nomor garis, ukuran track, dan nama area — untuk menelusori auto-placement, track implisit, dan item yang menumpuk pada grid dua dimensi.

Buka → # Debugging Specificity dengan DevTools

Konsolidasikan alur kerja DevTools untuk specificity: membaca panel Styles dari atas ke bawah, melacak asal berkas, memfilter per property, dan memaksa state :hover atau :focus untuk menguji rule pseudo-class tanpa interaksi.

Buka → # Debugging Responsive Layout

Manfaatkan device toolbar DevTools secara penuh — ruler, bar media query, dan throttling — lalu jalankan resep menemukan pelaku horizontal scroll dan alur uji responsive empat putaran sebelum publikasi.

Buka → # Validasi CSS

Bedakan kode yang valid dari kode yang sekadar bekerja, lalu kenali alat yang menjaganya: validator W3C beserta batasnya, linter Stylelint, dan pemeriksaan bawaan editor.

Buka → # Checklist Sebelum Publikasi

Satukan seluruh kebiasaan section ini menjadi tabel checklist pra-publikasi yang dikelompokkan, alur audit 30 menit yang terukur, dan satu komponen final yang lolos semua kriteria.

Buka →