Section ini telah menyusun dua kebiasaan besar — membangun CSS yang inklusif dan menelusuri masalah dengan DevTools — satu per satu. Chapter terakhir ini menyatukannya menjadi satu paket kerja: tabel checklist yang dikelompokkan per wilayah, alur audit 30 menit yang bisa dijalankan sebelum setiap rilis, dan satu komponen final yang memenuhi seluruh kriteria sebagai gambaran bentuk jadi. Simpan halaman ini sebagai rujukan tetap; checklist yang tidak pernah dibuka ulang sama saja dengan tidak ada.
Tabel Checklist Pra-Publikasi #
Lima kelompok pemeriksaan berikut mencakup seluruh materi section ini. Kolom ketiga adalah cara memeriksanya dengan cepat:
| Kelompok | Pemeriksaan | Cara memeriksa cepat |
|---|---|---|
| Visual | Kontras teks minimal 4.5:1 (teks besar 3:1) | Color picker DevTools menampilkan rasio kontras |
| Visual | State hover dan fokus punya indikator yang jelas | Force state :hover dan :focus-visible di panel Styles |
| Visual | Zoom 200% tidak memotong atau menumpuk konten | Perbesar browser, jelajahi halaman |
| Layout | 320px tanpa horizontal scroll | Outline semua elemen, cari kotak yang menonjol |
| Layout | Layar lebar tidak renggang berlebihan | Cek lebar 1440px; konten utama punya max-width |
| Layout | Item flex/grid tidak meluber | Overlay flex/grid; min-width: 0 pada item yang perlu |
| Layout | Gambar dan media tidak melampaui wadah | max-width: 100% pada gambar |
| Motion | Animasi dekoratif menghormati prefers-reduced-motion | Emulasi reduced motion dari panel Rendering |
| Kode | !important tidak menjadi kebiasaan | Cari dengan linter atau pencarian berkas |
| Kode | CSS valid dan lulus linter | Stylelint; validator W3C untuk garis akhir |
| Kode | Nilai berulang memakai custom properties | Cek token warna dan jarak di awal berkas |
| Kode | Selector tidak terlalu berat atau bertumpuk | Baca panel Styles; bobot ideal di sekitar (0, 1, 0)–(0, 2, 0) |
| Browser | Pemeriksaan cepat lintas browser | Buka halaman di Chrome, Firefox, dan Safari bila tersedia |
| Browser | Fitur yang dipakai sudah Baseline | Cocokkan dengan catatan status fitur saat menulis |
Tabel ini memang panjang, tetapi tidak perlu dijalankan seragam setiap hari — kelompok visual dan layout berlaku tiap rilis, kelompok kode bisa diserahkan ke linter yang berjalan otomatis.
Alur Audit 30 Menit #
Untuk satu halaman yang akan diterbitkan, enam putaran lima menit berikut menutup seluruh tabel di atas:
- Menit 1–5: kontras. Inspect tiap pasangan teks–latar utama; color picker DevTools menampilkan rasio kontras dan garis batas AA/AAA langsung di pemilih warna.
- Menit 6–10: fokus. Tekan Tab dari awal halaman; setiap elemen interaktif harus memunculkan ring yang terlihat. Kala itu force state
:focus-visiblemempercepat pemeriksaan rule-nya. - Menit 11–15: lebar kecil. Turunkan ke 320px, pasang outline merah pada semua elemen, lalu hilangkan satu per satu pelaku overflow yang menonjol.
- Menit 16–20: zoom dan layar lebar. Perbesar 200% untuk memastikan tidak ada konten terpotong, lalu naik ke 1440px untuk memastikan baris teks tidak melar melebihi kenyamanan baca.
- Menit 21–25: gerak dan media query. Emulasikan
prefers-reduced-motion, gunakan bar media query untuk melompat antar breakpoint, dan pastikan transisi yang tersisa wajar. - Menit 26–30: kode. Jalankan linter, cari sisa
!important, dan pastikan perbaikan yang dilakukan di DevTools tadi sudah tersalin ke stylesheet sungguhan.
Poin terakhir itu paling sering terlewat: seluruh suntingan di panel Styles bersifat sementara dan hilang saat halaman dimuat ulang — audit baru selesai setelah hasilnya kembali ke berkas proyek.
Demo berikut adalah komponen kartu artikel yang memenuhi seluruh kelompok checklist. Perhatikan bahwa ia tidak istimewa — hanya menggabungkan kebiasaan-kebiasaan yang sudah kita pelajari:
Daftar annotation-nya terhadap checklist:
- Visual: kontras aman pada semua teks;
:focus-visiblememberi ring terlihat; hover punya umpan balik latar, bukan warna semata. - Layout:
max-widthmenjaga kartu di layar lebar;min-width: 0plusoverflow-wrapmembuat baris meta aman dari token panjang;flex-shrink: 0menjaga label kategori tetap utuh. - Motion: transisi dibungkus
prefers-reduced-motion: reducesehingga efek angkat tombol berhenti bagi yang memintanya. - Kode: warna hidup di custom properties, tidak ada
!important, dan selector bersih berbobot satu–dua class.
Menutup Section dan Jembatan Berikutnya #
Dengan checklist ini, section Accessibility dan Debugging selesai: CSS yang kita tulis kini inklusif bagi pengguna dengan kondisi berbeda, dan setiap masalah tampilan punya jalur diagnosis yang terukur di DevTools. Section berikutnya, Pola Layout, mengubah fondasi itu menjadi kumpulan pola siap pakai — container, hero, sidebar, card grid, dashboard, dan footer — yang masing-masing sudah dirancang mengikuti checklist yang baru saja kita tetapkan. Sampai jumpa di sana.