Uji Akses Mandiri

Uji Akses Mandiri

Gunakan panduan dan komponen di bawah ini untuk memeriksa aksesibilitas halaman sesuai WCAG 2.1 Level AA. Tandai setiap langkah saat selesai.

1) Uji Navigasi Keyboard

Tujuan: Semua fitur bisa dioperasikan dengan keyboard; fokus terlihat jelas.

  1. Tekan Tab berulang dari bagian paling atas. Pastikan fokus bergerak berurutan (logo → menu → tombol → konten…)
  2. Gunakan Shift+Tab untuk mundur; Enter / Space untuk aktivasi; Esc untuk menutup dialog/menu.
  3. Pastikan fokus terlihat (outline kontras) di semua link/tombol.

Tombol Link

2) Struktur Heading & Landmark

Tujuan: Satu <h1> per halaman; <h2>/<h3> berurutan; gunakan <header>, <nav>, <main>, <footer>.

  • Periksa urutan judul: tidak melompat dari H2 ke H4.
  • Pastikan ada landmark main (bisa diuji dengan pembaca layar).

3) Uji Kontras Warna

Tujuan: Teks ≥ 4.5:1, komponen UI ≥ 3:1.

Contoh kontras baik

Contoh kontras lemah

Pastikan warna brand dan teks yang kamu pakai di tema menghasilkan rasio sesuai. (Gunakan alat pengukur kontras saat mengedit tema.)

4) Reflow & Zoom

Tujuan: Tata letak tetap terbaca pada lebar 320px dan zoom 200% tanpa perlu scroll horizontal besar.

  1. Perkecil lebar jendela browser sampai ~320px.
  2. Perbesar zoom ke 200% (Ctrl/Cmd + +).
  3. Pastikan teks tidak terpotong dan tidak muncul scrollbar horizontal panjang.

5) Tujuan Tautan (Link Purpose)

Tujuan: Tautan deskriptif tanpa perlu konteks berlebihan.

6) Uji Formulir: Label & Error

Tujuan: Setiap input punya label; pesan kesalahan jelas dan terhubung programatik.

Isilah bidang bertanda *.





7) Uji Media: Alt, Caption, Transkrip

Tujuan: Gambar informatif punya alt bermakna; video punya caption/transkrip; tidak ada auto-play mengejutkan.

Peserta netra menggunakan pembaca layar saat pelatihan aksesibilitas
Contoh alt deskriptif untuk konteks gambar pelatihan.
Contoh transkrip video (expand)

[Judul] Pelatihan Aksesibilitas Digital — materi pengenalan WCAG 2.1, demo navigasi keyboard, dan praktik alt text.

8) Uji Pembaca Layar (NVDA/VoiceOver)

Tujuan: Nama–Peran–Nilai elemen terbaca; urutan logis; landmark/heading dikenali.

  1. Nyalakan NVDA (Windows) atau VoiceOver (macOS).
  2. Gunakan rotors/heading list untuk menelusuri H1→H2→H3.
  3. Pastikan link/tombol dibacakan dengan nama yang jelas (bukan “button tanpa nama”).

Checklist Selesai

Tandai yang sudah kamu cek (tidak disimpan, hanya untuk panduan cepat):

Catatan: Halaman ini adalah alat bantu uji cepat. Kepatuhan menyeluruh tetap memerlukan audit teknis dan uji pengguna.