Uraian utama
Pedoman ini menggabungkan rasio, fokus terlihat, teks alternatif, penanda nonwarna, urutan baca, tabel gulir, dan pembesaran pada dua mode tema.
Aksesibilitas warna tidak berhenti pada satu angka rasio. Keterbacaan juga dipengaruhi fokus keyboard, nama kontrol, teks alternatif, urutan semantik, pembeda nonwarna, perilaku tabel pada layar sempit, dan kemampuan halaman bertahan ketika kamu memperbesar teks maupun tampilan.
- Uji teks utama terhadap bg serta bgSoft pada target 7:1, lalu periksa label kontrol dan permukaan tombol dengan batas sekurangnya 4,5:1.
- Pastikan setiap elemen interaktif menerima fokus yang terlihat, tidak terpotong, dan mengikuti urutan sumber tanpa jebakan keyboard.
- Berikan alt sesuai fungsi gambar, label teks untuk status, serta nama tautan yang tetap bermakna saat dibaca di luar paragraf.
- Periksa lebar 320 CSS piksel, zoom 200 persen, aliran tabel, rincian FAQ, dan pergantian mode tanpa kehilangan konten maupun tindakan.
Teks alternatif tidak perlu mengulang semua tulisan banner ke dalam satu atribut. Deskripsi singkat menyebut fungsi dan konteks, lalu transkripsi terlihat menangani teks yang panjang; pemisahan ini membantu pembaca tanpa membuat alt terlalu padat atau menyamarkan batas editorial.
Warna tidak boleh menjadi satu-satunya pembawa keadaan. Penanda brand yang sedang dikerjakan, hasil pemeriksaan, prioritas koreksi, dan posisi fokus memerlukan kata, atribut semantik, bentuk, atau dekorasi tambahan supaya perbedaan tetap tersedia bagi pembaca dengan persepsi warna beragam.
Tabel entitas dan matriks harus mempertahankan hubungan kepala-sel serta satuan. Pada layar kecil, wadah gulir lokal lebih aman daripada mengecilkan huruf sampai sulit dibaca; pengguna keyboard perlu dapat mencapai dan meninggalkan wadah tersebut tanpa kehilangan indikator fokus.
- Kontras: simpan kode pasangan, rasio, ambang, mode, dan keputusan pengujian.
- Keyboard: telusuri skip-link, header, tindakan, grid, FAQ, terkait, tabel, dan footer.
- Citra: sediakan dimensi intrinsik, teks alternatif fungsional, keterangan, dan transkripsi bila dibutuhkan.
- Reflow: periksa 320 piksel, teks 200 persen, orientasi potret, serta komponen yang diperbesar.
- Gerak dan warna: hindari kedipan, pertahankan kontrol, dan sediakan pembeda yang tidak bergantung pada rona.
Enam sorotan
Kontras pada Hasil Render
Hitung pasangan yang benar-benar dirender dan ulangi setelah perubahan token; jangan menyimpulkan kelulusan hanya dari tampilan yang terlihat tajam pada satu monitor.
Penanda Fokus yang Bertahan
Garis fokus harus mempunyai bentuk, ketebalan, jarak, dan warna yang bertahan pada latar utama, panel, tombol, kartu, serta detail terbuka.
Alternatif Gambar
Alt menjelaskan fungsi logo atau banner secara ringkas, sementara tulisan panjang pada citra memerlukan transkripsi terpisah yang tidak mengesahkan pesannya.
Status dengan Label Teks
Keadaan aktif, saat ini, gagal, atau selesai ditulis dengan kata dan struktur; rona serta ikon hanya menjadi petunjuk tambahan.
Urutan Linear
Judul, tautan, grid, uraian, FAQ, tabel, dan kaki halaman tetap logis ketika CSS dimatikan, tata letak menyempit, atau pembaca layar bergerak berurutan.
Reflow dan Zoom
Konten mengalir tanpa gulir horizontal umum pada 320 piksel, sedangkan tabel lebar mendapat wadah gulir berlabel dan fokus yang dapat dicapai.
Ringkasan
Tujuh lapisan pemeriksaan—kontras, fokus, alt, penanda nonwarna, urutan, gulir tabel, dan pembesaran—saling melengkapi. Kelulusan pada satu lapisan tidak menutup kegagalan lapisan lain, sehingga audit keluaran perlu memakai perhitungan, inspeksi struktur, navigasi keyboard, dan pembacaan visual. Ditinjau pada 2026-08-28.