Lewati ke konten
Aksesibilitas
Dokumentasi Pratinjau

Aksesibilitas

Sasaran WCAG, rasio kontras hasil ukur, fokus papan ketik, dan daftar periksa sebelum mengirim.

Sasaran

Kit ini menyasar WCAG 2.2 tingkat AA untuk seluruh area dalam aplikasi. Yang sudah terpenuhi di tingkat kit: struktur judul, fokus terlihat, kontras teks, nama peran ARIA, dan penghormatan pada prefers-reduced-motion.

Kontras — hasil ukur, bukan klaim

Angka di bawah dihitung langsung dari nilai token di tokens/tokens.css memakai rumus rasio kontras WCAG. Rasio 4,5:1 adalah batas AA untuk teks normal; 3:1 untuk teks besar dan komponen antarmuka.

PasanganDipakai untukTerangGelap
--ck-foreground di --ck-backgroundTeks utama di latar halaman16.99:1 AAA17.44:1 AAA
--ck-foreground di --ck-cardTeks utama di kartu17.69:1 AAA16.05:1 AAA
--ck-muted-foreground di --ck-backgroundTeks sekunder di latar halaman4.53:1 AA8.09:1 AAA
--ck-muted-foreground di --ck-cardTeks sekunder di kartu4.72:1 AA7.44:1 AAA
--ck-primary-foreground di --ck-primaryTeks di tombol utama8.43:1 AAA4.88:1 AA
--ck-foreground di --ck-secondaryTeks di permukaan sekunder16.11:1 AAA13.25:1 AAA
--ck-primary di --ck-cardTeks aksen utama di kartu8.78:1 AAA4.49:1 AA teks besar
--ck-destructive di --ck-cardTeks bahaya di kartu3.78:1 AA teks besar4.3:1 AA teks besar
--ck-success di --ck-cardTeks sukses di kartu2.59:1 Gagal7.69:1 AAA
--ck-warning di --ck-cardTeks peringatan di kartu2.14:1 Gagal9.16:1 AAA
Tiga temuan yang harus dipatuhi
  • --ck-success (2,59:1) dan --ck-warning (2,14:1) di mode terang tidak lolos sebagai teks di atas kartu. Keduanya warna isian — pakai sebagai latar dengan teks gelap, atau pakai varian subtle untuk teks.
  • --ck-destructive sebagai teks hanya lolos untuk teks besar (3,78:1). Untuk teks galat berukuran normal, gunakan varian teks yang lebih gelap.
  • --ck-muted-foreground di mode terang hanya 4,53:1 — pas di batas AA. Jangan dipakai untuk teks di bawah 14 px.

Fokus papan ketik

Semua yang bisa difokus punya cincin fokus yang sama: garis 2 px warna --ck-ring dengan jarak 2 px. Cincin ini tidak boleh dihapus. Kalau terlihat mengganggu, itu tanda tata letaknya perlu diperbaiki, bukan cincinnya.

:focus-visible {
  outline: 2px solid hsl(var(--ck-ring));
  outline-offset: 2px;
}

Struktur & navigasi

KewajibanBentuknya di kit
Melewati navigasick-skip-link sebagai elemen pertama di <body>
Satu judul utama per halamanSatu h1; urutan tingkat tidak melompat
Penanda wilayahaside, header, main, nav dengan aria-label
Teks hanya untuk pembaca layarck-sr-only
Bahasa halaman<html lang="id">

Papan ketik

TombolPerilaku
Tab / Shift+TabBerpindah antar elemen; modal menjebak fokus di dalamnya
EscMenutup modal, laci, dropdown, dan membersihkan penyaring navigasi
← →Berpindah tab dan menggeser pilihan pada grup radio
↑ ↓Menelusuri menu dropdown dan daftar pilihan
Enter / SpaceMenjalankan aksi; pada tombol, keduanya harus bekerja
/Melompat ke penyaring navigasi (halaman galeri)

Gerak

Pengguna yang mengaktifkan prefers-reduced-motion mendapat durasi mendekati nol. Ini bukan opsional — animasi dapat memicu pusing dan mual.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

Bentuk & warna

  • Warna tidak pernah menjadi satu-satunya pembawa makna. Jawaban benar punya ikon dan teks, bukan hanya hijau.
  • Target sentuh minimal 44 × 44 px di layar kecil; tombol ck-btn--sm dinaikkan ukurannya di bawah 768 px.
  • Pesan galat ditulis di dekat kolomnya dan dihubungkan lewat aria-describedby, bukan hanya di bagian atas halaman.
  • Keadaan memuat diumumkan lewat aria-busy, bukan hanya spinner.

Daftar periksa sebelum mengirim

classroom-themekitdokumentasi