Aksesibilitas web berarti membangun situs web yang dapat digunakan secara efektif oleh orang-orang dengan disabilitas. Ini termasuk orang-orang yang menggunakan pembaca layar, navigasi hanya dengan keyboard, kontrol suara, pembesar layar, atau yang memiliki keterbatasan penglihatan warna. Dalam ekosistem WordPress, aksesibilitas adalah persyaratan hukum di banyak yurisdiksi dan cara praktis untuk menjangkau audiens yang lebih luas—lebih dari 1 miliar orang di seluruh dunia memiliki beberapa bentuk disabilitas.
Dalam panduan ini, kami membahas langkah-langkah praktis untuk membuat situs WordPress Anda dapat diakses, mengikuti Pedoman Aksesibilitas Konten Web (WCAG) 2.2 pada level AA—standar yang paling umum diperlukan oleh undang-undang aksesibilitas termasuk ADA (AS), EAA (UE), dan AODA (Kanada).
Memahami Prinsip WCAG 2.2
WCAG diorganisir di sekitar empat prinsip, yang dikenal sebagai POUR:
| Prinsip | Apa Artinya | Contoh WordPress |
|---|---|---|
| Terlihat | Pengguna dapat melihat konten melalui penglihatan, pendengaran, atau sentuhan | Teks alternatif untuk gambar, keterangan untuk video, kontras warna yang cukup |
| Dapat Dioperasikan | Pengguna dapat menavigasi dan berinteraksi dengan antarmuka | Navigasi keyboard, tautan lewati, tidak ada jebakan keyboard |
| Dipahami | Pengguna dapat memahami konten dan cara menggunakan antarmuka | Bahasa yang jelas, navigasi yang konsisten, pesan kesalahan |
| Kuat | Konten berfungsi di berbagai browser, perangkat, dan teknologi bantu | HTML yang valid, peran ARIA yang tepat, markup semantik |
Memilih Tema yang Dapat Diakses
Struktur HTML dan CSS tema WordPress Anda membentuk dasar aksesibilitas situs Anda. Saat memilih tema WordPress, evaluasi faktor-faktor aksesibilitas ini:
- HTML Semantik: Tema menggunakan elemen HTML5 yang tepat (header, nav, main, article, aside, footer) alih-alih div generik untuk semuanya
- Hierarki heading: H1 → H2 → H3 mengikuti urutan logis tanpa melewatkan level
- Tautan lewati: Tautan "Lewati ke konten" ada sebagai elemen fokus pertama, memungkinkan pengguna keyboard untuk melewati navigasi
- Navigasi keyboard: Semua elemen interaktif (tautan, tombol, formulir) dapat dijangkau dan digunakan dengan tombol Tab
- Indikator fokus: Elemen yang difokuskan memiliki garis tepi atau sorotan yang terlihat (tidak dihapus dengan outline: none)
- Kontras warna: Teks memenuhi rasio kontras WCAG AA (4.5:1 untuk teks normal, 3:1 untuk teks besar)
Tema yang diberi tag "siap aksesibilitas" di WordPress.org telah melewati tinjauan aksesibilitas dasar. Namun, tag ini menunjukkan titik awal, bukan kepatuhan penuh terhadap WCAG. Di antara tema yang populer, GeneratePress terkenal dengan kode yang baik dengan HTML semantik yang bersih dan landmark ARIA yang tepat.
Aksesibilitas Gambar
Teks Alternatif
Setiap gambar yang bermakna memerlukan teks alternatif yang deskriptif. WordPress membuat ini menjadi sederhana—kolom teks alternatif tersedia di Media Library dan saat menyisipkan gambar ke dalam konten.
| Jenis Gambar | Pendekatan Teks Alternatif | Contoh |
|---|---|---|
| Foto produk | Deskripsikan produk | "Tas selempang kulit merah dengan gesper emas, tampak depan" |
| Tangkapan layar | Deskripsikan apa yang ditunjukkan tangkapan layar | "Dasbor WordPress menunjukkan halaman Plugins dengan 12 plugin aktif" |
| Infografis | Ringkas informasi kunci | "Grafik perbandingan: Fitur Elementor vs Gutenberg. Elementor memiliki 100+ widget, Gutenberg memiliki 90+ blok" |
| Gambar dekoratif | Teks alternatif kosong (alt="") | Pola latar belakang, pemisah, ikon dekoratif murni |
| Diagram/grafik | Deskripsikan tren atau titik data kunci | "Grafik garis menunjukkan lalu lintas situs web meningkat 45% dari Januari hingga Desember 2025" |
Optimasi Gambar untuk Aksesibilitas
- Jangan gunakan gambar teks—gunakan teks sebenarnya yang ditata dengan CSS sebagai gantinya
- Pastikan teks yang terbenam dalam gambar memenuhi persyaratan kontras
- Berikan deskripsi panjang untuk gambar kompleks (grafik, diagram) menggunakan paragraf yang berdekatan atau atribut longdesc
- Pastikan gambar memiliki dimensi yang sesuai sehingga tidak menyebabkan pergeseran tata letak (CLS)
Navigasi Keyboard
Banyak pengguna menavigasi situs web sepenuhnya dengan
sebuah keyboard—Tab untuk maju, Shift+Tab untuk mundur, Enter untuk mengaktifkan tautan/tombol, Space untuk mengubah status checkbox dan mengklik tombol, dan Escape untuk menutup modal.
Masalah Aksesibilitas Keyboard yang Umum
- Perangkap fokus: Dialog modal yang tidak memungkinkan tab kembali ke konten utama (modal seharusnya menjebak fokus di dalam modal, dan Escape seharusnya menutupnya)
- Indikator fokus yang hilang: CSS yang menghapus garis luar default pada elemen yang difokuskan (jangan pernah menggunakan *:focus { outline: none } secara global)
- Elemen non-interaktif dengan penangan klik: Div atau span dengan acara onClick yang tidak dapat diakses dengan keyboard (gunakan tombol atau tautan sebagai gantinya)
- Menu dropdown yang hanya terbuka saat hover: Pengguna keyboard tidak dapat memicu status hover. Menu seharusnya terbuka saat fokus/Enter juga
- Komponen kustom tanpa ARIA: Tab, akordeon, dan carousel yang dibangun tanpa peran ARIA dan penangan keyboard yang tepat
Warna dan Kontras
WCAG AA memerlukan rasio kontras minimum berikut:
| Elemen | Rasio Minimum | Contoh (Lulus) | Contoh (Gagal) |
|---|---|---|---|
| Teks normal (<18px) | 4.5:1 | #333 pada #fff (12.6:1) | #999 pada #fff (2.8:1) |
| Teks besar (≥18px atau ≥14px tebal) | 3:1 | #555 pada #fff (7.4:1) | #aaa pada #fff (2.3:1) |
| Komponen UI (tombol, input) | 3:1 | Tombol biru #2563eb (4.6:1) | Biru muda #93c5fd (1.8:1) |
| Konten non-teks (ikon, batas) | 3:1 | Ikon gelap di latar belakang terang | Ikon abu-abu terang di putih |
Gunakan alat seperti WebAIM's Contrast Checker atau ekstensi browser axe untuk memverifikasi rasio kontras. Jangan hanya mengandalkan warna untuk menyampaikan informasi—gunakan label teks, pola, atau ikon selain pengkodean warna.
Aksesibilitas Formulir
Formulir adalah salah satu area yang paling penting untuk aksesibilitas. Baik menggunakan blok Gutenberg, Gravity Forms, atau WPForms:
- Label setiap input: Gunakan elemen <label> yang terkait dengan setiap input melalui atribut for/id. Teks placeholder bukan pengganti label
- Kelompokkan bidang terkait: Gunakan <fieldset> dan <legend> untuk kelompok input yang terkait (misalnya, bidang alamat pengiriman)
- Berikan pesan kesalahan: Ketika validasi gagal, identifikasi bidang mana yang memiliki kesalahan dan jelaskan cara memperbaikinya. Gunakan aria-describedby untuk mengaitkan pesan kesalahan dengan bidangnya
- Tandai bidang yang diperlukan: Gunakan atribut required dan secara visual tunjukkan bidang yang diperlukan dengan teks (bukan hanya asterisk)
- Dukung autocomplete: Tambahkan atribut autocomplete yang sesuai (nama, email, tel, address-line1) agar browser dapat mengisi data formulir secara otomatis
Aksesibilitas Konten
Struktur Judul
Hierarki judul yang tepat membantu pengguna pembaca layar memahami struktur halaman dan menavigasi antar bagian. Aturan:
- Satu H1 per halaman (judul halaman/post)
- H2 untuk bagian utama
- H3 untuk sub-bagian dalam H2
- Jangan pernah melewatkan level (H2 → H4 tanpa H3 adalah salah)
- Jangan gunakan judul untuk styling visual—gunakan kelas CSS sebagai gantinya
Teks Tautan
Hindari teks tautan generik yang tidak berarti di luar konteks:
| Teks Tautan Buruk | Teks Tautan Aksesibel |
|---|---|
| "Klik di sini" | "Baca panduan keamanan WordPress" |
| "Baca lebih lanjut" | "Baca ulasan lengkap Elementor Pro" |
| "Pelajari lebih lanjut" | "Pelajari cara mengoptimalkan checkout WooCommerce" |
| "Di sini" | "Unduh laporan tolok ukur kinerja" |
Tabel
Tabel data harus mencakup:
- <thead> dengan elemen <th> untuk header kolom (dengan scope="col")
- <th scope="row"> untuk header baris
- Elemen <caption> yang menggambarkan tujuan tabel
- Struktur sederhana—hindari sel yang digabungkan jika memungkinkan, karena sulit untuk diinterpretasikan oleh pembaca layar
Menguji Aksesibilitas Situs Anda
| Alat | Jenis | Apa yang Diuji |
|---|---|---|
| axe DevTools | Ekstensi browser | WCA otomatis |
| Deteksi pelanggaran G | ||
| WAVE | Ekstensi browser / web | Evaluasi aksesibilitas visual dengan anotasi inline |
| Lighthouse | Chrome DevTools | Audit aksesibilitas dengan skor dan rekomendasi |
| Pengujian keyboard | Manual | Navigasi seluruh situs hanya menggunakan Tab, Enter, dan Escape |
| Pembaca layar | Manual | Uji dengan VoiceOver (Mac), NVDA (Windows), atau TalkBack (Android) |
Alat otomatis menangkap sekitar 30-50% masalah aksesibilitas. Pengujian manual dengan keyboard dan pembaca layar diperlukan untuk mengidentifikasi masalah berbasis interaksi yang tidak dapat dideteksi oleh alat otomatis.
Plugin WordPress untuk Aksesibilitas
- WP Accessibility: Menambahkan tautan lewati, memperbaiki masalah aksesibilitas umum, menambahkan toolbar untuk preferensi pengguna
- One Click Accessibility: Menambahkan toolbar aksesibilitas frontend (ukuran font, kontras, sorotan tautan)
- Template pemula dengan aksesibilitas: Astra dan GeneratePress keduanya memiliki fondasi aksesibilitas yang kuat dalam tema dasar mereka
Catatan: Plugin overlay aksesibilitas (yang menambahkan widget mengambang dengan tombol "perbaikan") banyak dikritik oleh komunitas aksesibilitas. Mereka tidak membuat situs web menjadi dapat diakses—mereka menambahkan lapisan superfisial yang sebenarnya dapat mengganggu teknologi bantu. Fokuslah pada membangun aksesibilitas ke dalam tema dan konten Anda daripada mengandalkan overlay.
Untuk detail lebih lanjut, silakan merujuk ke dokumentasi resmi: Pedoman WCAG, Tim Aksesibilitas WordPress.
Pertanyaan yang Sering Diajukan
Apakah WordPress dapat diakses langsung setelah diinstal?
Inti WordPress telah meningkat secara signifikan dalam aksesibilitas. Panel admin sebagian besar dapat dinavigasi dengan keyboard, dan editor blok mencakup label ARIA. Namun, aksesibilitas situs Anda sangat bergantung pada tema dan plugin yang Anda gunakan. Tema dengan struktur HTML yang buruk akan merusak fitur aksesibilitas bawaan WordPress.
Apakah saya secara hukum memerlukan situs web yang dapat diakses?
Di banyak yurisdiksi, ya. ADA (AS), Undang-Undang Aksesibilitas Eropa (EU, berlaku Juni 2025), AODA (Kanada), dan undang-undang serupa mengharuskan situs web untuk dapat diakses. Persyaratan spesifik tergantung pada lokasi Anda, jenis bisnis, dan audiens. Konsultasikan dengan profesional hukum untuk persyaratan yang spesifik untuk situasi Anda.
Apakah aksesibilitas mempengaruhi SEO?
Ya, ada tumpang tindih yang signifikan. Struktur heading yang tepat, teks alt yang deskriptif, HTML semantik, waktu muat halaman yang cepat, dan ramah seluler menguntungkan baik aksesibilitas maupun SEO. Situs yang mengikuti pedoman WCAG cenderung memiliki peringkat lebih baik karena mereka memberikan pengalaman pengguna yang secara fundamental lebih baik. Untuk praktik terbaik SEO, lihat daftar periksa kami.
Bisakah pembuat halaman membuat situs web yang dapat diakses?
Elementor dan pembuat halaman lainnya dapat membuat konten yang dapat diakses jika digunakan dengan benar. Kuncinya adalah memastikan hierarki heading yang tepat, menambahkan teks alt pada gambar, menggunakan widget semantik (tombol alih-alih div yang bergaya), dan menguji navigasi keyboard. Pembuat itu sendiri tidak menentukan aksesibilitas—cara Anda menggunakannya yang menentukan.
Apa kesalahan aksesibilitas yang paling umum di situs WordPress?
Teks alt yang hilang atau tidak memadai pada gambar adalah pelanggaran WCAG yang paling sering dilaporkan. Yang kedua paling umum adalah kontras warna yang tidak memadai. Keduanya mudah diperbaiki—mereka memerlukan perhatian dan praktik yang konsisten daripada keahlian teknis.
Bagaimana cara membuat WooCommerce dapat diakses?
Template default WooCommerce memiliki aksesibilitas yang wajar. Area kunci untuk diverifikasi: teks alt gambar produk, label formulir pada bidang checkout, navigasi keyboard dari keranjang dan proses checkout, serta pesan kesalahan yang dapat diakses untuk kegagalan validasi formulir. Menggunakan tema yang dapat diakses sebagai fondasi secara signifikan mengurangi pekerjaan khusus WooCommerce yang diperlukan.
Bangun Situs WordPress yang Dapat Diakses
Mulailah dengan fondasi tema yang dapat diakses. Telusuri tema yang ringan dan terkode dengan baik yang memprioritaskan HTML semantik dan kepatuhan WCAG.
Telusuri Tema yang Dapat Diakses →
