ThemesCorners
Blog
11 menit bacaoleh ThemesCorners

Checklist Aksesibilitas WordPress — WCAG 2.2 AA dalam Praktek

Daftar perbaikan aksesibilitas praktis yang menumpuk jadi situs yang benar-benar dapat dipakai pengguna nyata — dan yang bertahan di pengadilan.

Tuntutan aksesibilitas di 2026 sudah bukan barang langka. EU Accessibility Act mulai berlaku pertengahan 2025, dan litigasi ADA di AS bergeser ke ritme stabil khusus terhadap e-commerce. Plugin yang menjanjikan "WCAG compliant" satu klik tidak begitu, dan berulang kali dinyatakan tidak memadai di pengadilan.

Kabar baik: aksesibilitas nyata dapat dicapai dengan beberapa minggu kerja disiplin. Inilah checklist yang kami jalankan untuk setiap tema yang kami rilis dan setiap situs klien yang kami audit.

Jalankan audit nyata sebelum mulai

Tiga tool, dipakai bersama:

  1. axe DevTools (ekstensi browser). Menangkap sekitar 50% isu aksesibilitas otomatis.
  2. NVDA atau VoiceOver. Benar-benar navigasikan situs dengan screen reader. Pengalamannya mengajari lebih dari laporan tool mana pun.
  3. Hanya keyboard. Cabut mouse. Coba selesaikan alur utama situs dengan Tab, Shift+Tab, Enter, Arrow, dan Esc.

Kalau Anda tidak dapat menyelesaikan alur utama hanya dengan keyboard dalam lima menit, hasil audit di bawah adalah noise — perbaiki itu dulu.

Checklist-nya

1. Struktur halaman

  • Persis satu <h1> per halaman, mendeskripsikan halaman.
  • Level heading tidak melompat (jangan dari <h2> ke <h4>).
  • Landmark ada: <header>, <nav>, <main>, <footer> — dan hanya satu <main>.
  • Link "Lewati ke konten utama" adalah elemen focusable pertama di setiap halaman.

2. Kontras warna

  • Kontras teks body minimal 4.5:1 terhadap latar belakangnya.
  • Teks besar (18px bold atau 24px regular) minimal 3:1.
  • UI non-teks (border tombol, ring fokus, tombol icon-only) minimal 3:1.
  • Jalankan palet warna lewat pemeriksa kontras oklch — pemeriksa sRGB salah hitung di rona tertentu.

Jebakan WordPress yang umum:

  • Tema yang pakai text-muted di-set ke slate-400 atau lebih terang. Banyak yang begitu; periksa milik Anda.
  • Tombol dengan bg-blue-500 text-white terlihat oke tapi nyaris lulus — bg-blue-600 lebih aman.
  • State tombol "disabled" sering gagal kontras dan jadi isu aksesibilitas nyata.

3. Visibilitas fokus

  • Setiap elemen focusable punya indikator fokus terlihat. Ring biru default browser oke; banyak tema menghapusnya.
  • Indikator fokus minimal 3:1 kontras dengan warna di sekitar.
  • Urutan fokus sesuai urutan visual (jangan melompat-lompat halaman).

Di Tailwind: jangan pakai outline-none tanpa focus-visible:ring-2 sebagai pengganti.

4. Form

  • Setiap input form punya <label>. Placeholder bukan label.
  • Field wajib ditandai baik secara visual maupun dengan aria-required="true".
  • Pesan error diikat ke input dengan aria-describedby dan diumumkan via aria-live="polite".
  • Input yang menerima format spesifik punya atribut inputmode dan autocomplete.

5. Gambar

  • Setiap <img> punya atribut alt bermakna, atau alt="" kalau murni dekoratif.
  • Gambar kompleks (chart, diagram) punya deskripsi lebih panjang di dekatnya atau via aria-describedby.
  • Gambar LCP tidak boleh dekoratif — kalau iya, hero Anda tidak melakukan apa-apa.

Untuk WordPress: di media library, field Alt text adalah sumbernya. Jadikan menambah alt text bagian alur kerja editorial Anda, bukan opsional.

6. Link dan tombol

  • Teks link mendeskripsikan tujuan ("Baca panduan keamanan", bukan "Klik di sini").
  • Tombol yang terlihat seperti link dan link yang terlihat seperti tombol harus pakai elemen yang benar. <button> memicu aksi; <a> navigasi.
  • Tombol icon-only punya aria-label.
  • Link yang buka tab baru mengumumkan itu (visual dengan ikon, semantik dengan aria-label seperti "Dokumentasi (buka tab baru)").

7. Tabel

  • Pakai <table> hanya untuk data tabular aktual, jangan untuk layout.
  • <th> untuk header dengan scope="col" atau scope="row".
  • Caption via <caption>.
  • Hindari merged cell kalau bisa.

8. Konten dinamis

  • Dialog modal jebak fokus di dalamnya, kembalikan fokus ke pemicu saat ditutup, dan tutup dengan Esc.
  • Konten tooltip dapat dicapai keyboard, bukan hanya hover.
  • Carousel (hindari) perlu kontrol pause, manajemen fokus saat slide berubah, dan mengumumkan perubahan slide.
  • Notifikasi toast pakai role="status" untuk non-urgent atau role="alert" untuk urgent.

9. Motion

  • Hormati prefers-reduced-motion. Semua animasi harus mati atau sederhana saat user mengaturnya:
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
  • Video auto-play harus punya kontrol yang dapat diakses user.
  • Efek parallax butuh cara untuk dimatikan.

10. Spesifik WordPress

  • Block editor sendiri sumber dari banyak aksesibilitas tema — tema yang override style editor dapat merusak aksesibilitas untuk author.
  • Output wp_nav_menu butuh aria-label saat hadir beberapa kali.
  • Form pencarian butuh <label> walau secara visual disembunyikan.
  • Form komentar klasik adalah titik lemah aksesibilitas yang dikenal — review dan perbaiki.

Apa yang plugin aksesibilitas lakukan (dan tidak)

Plugin seperti UserWay, accessiBe, dan EqualWeb mengiklankan WCAG compliance satu klik. Realitanya:

  • Mereka menambah menu overlay dengan toggle untuk ukuran font, kontras, dll. — yang dapat membantu pengguna.
  • Mereka klaim "otomatis perbaiki" isu aksesibilitas. Tidak bisa — itu fundamentally butuh edit HTML yang halaman hasilkan, yang overlay JS tidak dapat lakukan untuk isu struktural statis.
  • Mereka dinyatakan tidak memadai di beberapa gugatan ADA AS. Beberapa kini aktif tidak direkomendasikan oleh organisasi advokasi disabilitas.

Pakai mereka hanya sebagai lapisan di atas benar-benar memperbaiki isu mendasar. Kalau Anda tidak memperbaiki isu mendasar, plugin tidak akan menyelamatkan Anda di pengadilan.

Apa yang hukum benar-benar minta (panduan kasar)

Ini bukan nasihat hukum — bicara dengan pengacara untuk yurisdiksi Anda.

  • EU: European Accessibility Act berlaku untuk e-commerce, banking, transport menghadap konsumen, dan beberapa kategori lain. Penegakan mulai Juni 2025 dan naik bertahap 2026–2027.
  • AS: ADA Title III. Berlaku untuk "places of public accommodation", yang pengadilan berulang kali perluas ke situs web komersial. Settlement biasanya mensyaratkan WCAG 2.1 AA compliance.
  • UK: Equality Act 2010. Kurang agresif ditegakkan dibanding AS tapi meningkat.
  • Australia: Disability Discrimination Act. Preseden Maguire v SOCOG terkenal.

Apa pun yurisdiksi Anda, WCAG 2.2 Level AA adalah target praktis. WCAG 2.2 sudah jadi rekomendasi W3C sejak akhir 2023.

Timeline realistis

Untuk situs WordPress sedang (50–200 halaman):

  • Minggu 1: Jalankan ketiga audit. Perbaiki 10 isu teratas yang axe munculkan.
  • Minggu 2: Perbaiki visibilitas fokus, isu kontras, alt text hilang.
  • Minggu 3: Perbaiki form — label, error, autocomplete.
  • Minggu 4: Tes dengan screen reader. Perbaiki yang ditemukan.
  • Berkelanjutan: Tambah aksesibilitas ke checklist editorial. Konten baru harus lulus sebelum dipublikasi.

Lalu audit ulang setiap enam bulan. Kriteria WCAG berkembang, konten Anda berkembang, plugin pihak ketiga memunculkan regresi. Aksesibilitas adalah proses, bukan state.

Bagaimana tema kami membantu

Tema kami mengirim:

  • HTML5 semantik (landmark benar, hierarki heading)
  • Indikator fokus terlihat pada setiap elemen interaktif
  • Kontras WCAG AA di semua kombinasi warna default
  • Link skip-to-content
  • Menu dan accordion yang dapat dinavigasi keyboard
  • Dukungan prefers-reduced-motion

Itu baseline yang akan Anda bayar konsultan aksesibilitas untuk pasangkan. Lalu tugas Anda menjaga konten tetap aksesibel — alt text di gambar yang diunggah, teks link jelas, heading terstruktur baik — tapi tema tidak akan melawan Anda.

Artikel terkait