Alat Aksesibilitas gratis

Cek Aksesibilitas Website Anda

Masukkan alamat website Anda, lalu kami menguji halaman tersebut beserta hingga empat halaman penting lainnya di browser sungguhan terhadap aturan WCAG 2.2 Level A dan AA. Setiap hambatan disertai elemennya, halamannya, tangkapan layar, dan penjelasan tentang siapa yang terdampak.

Gratis. Menguji hingga lima halaman penting dalam sekitar satu menit.

Yang dicek alat ini

  • Lima halaman yang mewakili website Anda

    Halaman yang Anda masukkan, ditambah hingga empat halaman yang dipilih dari link di halaman itu sesuai jenis website. Di toko online, itu berarti halaman koleksi, produk, keranjang, dan satu halaman konten; di website lain, halaman seperti harga, kontak, artikel, atau layanan. Template dipakai berulang, jadi satu halaman produk biasanya sudah menunjukkan masalah semua halaman produk.

  • Aturan WCAG pada halaman yang sudah dirender

    Setiap halaman dimuat di Chromium pada ukuran 1366 × 900, lalu axe-core, mesin aturan open source dari Deque, menjalankan aturan WCAG 2.0, 2.1, dan 2.2 Level A dan AA setelah skrip halaman selesai berjalan. Dengan begitu, masalah yang baru muncul ketika tema atau aplikasi membangun halaman di browser ikut tertangkap.

  • Dampak dan kriteria keberhasilan

    Setiap aturan yang gagal menampilkan dampaknya, yaitu kritis (critical), serius (serious), sedang (moderate), atau ringan (minor), kriteria keberhasilan WCAG yang terkait, serta jumlah elemen dan halaman yang terdampak.

  • Elemen yang gagal, diberi garis tepi

    Contoh HTML elemen tersebut dan tangkapan layar halaman dengan elemen itu ditandai garis tepi, sehingga Anda atau developer Anda bisa menemukannya di template tanpa menebak-nebak.

  • Item yang harus diputuskan manusia

    Jika axe-core menemukan sesuatu yang tidak bisa dipastikannya, misalnya teks di atas gambar latar yang kontrasnya tidak dapat diukur, item tersebut dicantumkan sebagai perlu ditinjau (needs review). Item seperti ini tidak pernah dihitung sebagai kegagalan.

  • Uji keyboard

    Di halaman pertama, kami menekan Tab 40 kali dan mencatat ke mana fokus berpindah: apakah fokus bergerak sama sekali, apakah fokus terjebak dalam putaran (sering kali di dalam banner cookie), apakah perhentian pertama adalah skip link, dan elemen terfokus mana yang tidak menampilkan indikator fokus yang terlihat. Pemeriksaan terakhir itu bersifat heuristik, jadi ditampilkan sebagai perlu ditinjau (needs review).

Yang tidak dapat dicek

  • Mendengar apa yang diucapkan pembaca layar. Software dapat memastikan sebuah tombol punya nama, tetapi tidak dapat memastikan nama itu masuk akal saat dibacakan.
  • Menilai teks keterangan (caption), transkrip, atau audiodeskripsi untuk video dan audio.
  • Menilai kriteria kognitif dan konten, misalnya apakah instruksi sudah jelas atau apakah pesan error membantu orang memperbaiki kesalahannya.
  • Menguji halaman di balik login, kata sandi, atau proteksi bot, atau menjalani proses checkout.
  • Memberi tahu apakah website Anda sesuai dengan WCAG atau mematuhi hukum apa pun. Aturan otomatis hanya menemukan sebagian masalah; sisanya perlu diperiksa oleh manusia.

Mengapa ini penting

Hambatan aksesibilitas sering kali berupa kesalahan kecil di template yang dampaknya besar. Tombol keranjang yang hanya berupa ikon tanpa nama aksesibel dibacakan sekadar “tombol”, sehingga pengguna pembaca layar tidak tahu fungsinya. Teks abu-abu di atas latar putih yang tidak mencapai rasio kontras 4,5:1 sulit dibaca oleh banyak orang dengan penglihatan rendah, juga oleh siapa pun yang memakai ponsel di bawah terik matahari.

Karena header, kartu produk, dan footer yang sama muncul di setiap halaman, satu perbaikan di template bisa menghapus ratusan kegagalan sekaligus. Itulah sebabnya hasil dikelompokkan per aturan, lengkap dengan jumlah elemen dan halaman, alih-alih mencantumkan setiap kemunculan sebagai masalah terpisah.

Di banyak negara, aksesibilitas juga punya sisi hukum. Pemindaian tidak dapat memberi tahu apakah suatu hukum berlaku bagi Anda atau apakah Anda sudah memenuhinya. Yang diberikannya adalah daftar bertanggal berisi hambatan nyata di halaman Anda sendiri, dan itulah titik awal yang praktis dalam kedua kasus.

Cara membaca hasilnya

Kritis
Hambatan ini dapat membuat sebagian orang sama sekali tidak bisa menggunakan elemen tersebut, misalnya kolom formulir tanpa label atau tombol tanpa nama. Perbaiki ini lebih dulu.
Serius
Hambatan ini membuat suatu tugas jauh lebih sulit bagi sebagian orang, misalnya teks isi yang tidak memenuhi rasio kontras.
Sedang
Hambatan ini menimbulkan kesulitan atau kebingungan, tetapi biasanya orang masih bisa mengakalinya.
Ringan
Masalah kecil atau gangguan ringan. Tetap layak diperbaiki saat Anda mengedit template itu berikutnya.
Kriteria keberhasilan WCAG
Angka di samping sebuah aturan, seperti 1.1.1 atau 1.4.3, adalah kriteria yang diujinya. Aturan tanpa kriteria merupakan praktik terbaik (best practice), bukan persyaratan WCAG.
Elemen dan halaman
Berapa banyak elemen yang gagal pada aturan tersebut dan di berapa banyak halaman yang diuji. Aturan yang gagal di setiap halaman biasanya berada di bagian bersama seperti header, menu, atau footer.
Perlu ditinjau
axe-core menemukan sesuatu yang tidak bisa diputuskannya. Periksa sendiri elemen tersebut: hasilnya bisa lolos atau gagal. Item ini tidak dihitung sebagai kegagalan.
Jebakan fokus
Tab terus berputar di antara beberapa elemen yang sama. Jika elemen itu milik banner cookie, pengguna keyboard mungkin tidak bisa menjangkau bagian halaman lainnya.
Fokus tidak berpindah (Focus doesn’t move)
Menekan Tab tidak pernah memfokuskan apa pun. Link dan tombol mungkin dibuat dari elemen div atau span, atau ada skrip yang mencegat tombol Tab.
Skip link
Apakah perhentian Tab pertama adalah link “Lewati ke konten”. Tanpa link ini, pengguna keyboard harus menekan Tab melewati seluruh header di setiap halaman. Landmark dan heading juga dapat memenuhi WCAG 2.4.1 Bypass Blocks.
Tidak ada indikator fokus yang terlihat
Elemen terfokus yang menurut pengamatan kami tidak menampilkan outline, box shadow, atau garis bawah. Gaya lain, seperti perubahan warna, tetap bisa terlihat, jadi telusuri sendiri elemen-elemen ini dengan Tab untuk memastikannya.

Cara memperbaiki masalah yang paling umum

  • Teks yang tidak memenuhi rasio kontras

    Teks normal memerlukan rasio minimal 4,5:1 terhadap latarnya, dan teks besar (sekitar 24 px, atau sekitar 18,7 px jika tebal) memerlukan 3:1. Ubah warnanya di pengaturan tema atau design token, bukan per elemen, lalu periksa ulang teks placeholder, status hover, dan teks di atas gambar.

  • Gambar tanpa teks alt

    Beri setiap gambar yang bermakna atribut alt yang menjelaskan apa yang ditampilkan atau fungsinya, misalnya nama dan warna produk. Gambar dekoratif diberi alt kosong (alt="") agar dilewati pembaca layar. Di Shopify, teks alt ditambahkan dari gambar di bagian Media pada produk; di WordPress, di kolom Teks Alternatif pada Pustaka Media.

  • Kolom formulir tanpa label

    Kaitkan label ke setiap input dengan <label for> yang cocok dengan id kolom tersebut, atau gunakan aria-label jika tidak ada teks yang terlihat. Jangan mengandalkan teks placeholder sebagai satu-satunya label: teks itu hilang begitu seseorang mulai mengetik. Formulir pendaftaran newsletter dan kotak pencarian di header adalah penyebab yang paling sering.

  • Tombol dan link tanpa nama aksesibel

    Kontrol ikon untuk keranjang, pencarian, menu, atau profil media sosial sering hanya berisi SVG. Tambahkan teks yang terlihat atau aria-label yang menjelaskan fungsi kontrol tersebut (“Buka keranjang”, bukan “ikon”), dan tambahkan aria-hidden="true" pada SVG itu sendiri.

  • Banner cookie yang menjebak fokus

    Pastikan setiap tombol di banner bisa dijangkau dengan Tab dan digunakan dengan Enter atau Spasi, bahwa menutup banner mengembalikan fokus ke halaman, dan bahwa banner yang tidak menghalangi halaman sama sekali tidak menahan fokus. Periksa pengaturan tool persetujuan (consent) Anda dan perbarui jika skripnya sudah lama.

  • Outline fokus dihapus di CSS

    Cari outline: none atau outline: 0 pada link, tombol, dan :focus di stylesheet Anda. Ganti dengan gaya yang terlihat, seperti :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Pertanyaan tentang alat ini

Apakah cek aksesibilitas website ini gratis?

Ya. Tidak perlu mendaftar; Anda cukup mengonfirmasi bahwa Anda pemilik atau pengelola website tersebut. Laporan Perbaikan Aksesibilitas berbayar menambahkan hingga 20 halaman lagi dari sitemap Anda, penelusuran hanya dengan keyboard, pemeriksaan reflow 320 px, kode sebelum dan sesudah yang dibuat dari markup Anda yang gagal, prompt AI, PDF, dan 5 kali uji ulang.

Seberapa banyak bagian WCAG yang bisa diuji oleh alat cek otomatis?

Hanya sebagian. Sebuah aturan dapat memeriksa bahwa gambar punya teks alt, tetapi tidak dapat memastikan teks itu menggambarkan gambarnya; aturan juga dapat memeriksa bahwa kolom punya label, tetapi tidak dapat memastikan labelnya jelas. Anggap hasilnya sebagai daftar masalah yang pasti, lalu uji sisanya dengan keyboard dan pembaca layar.

Jika pemindaian tidak menemukan apa pun, apakah website saya sudah sesuai dengan ADA atau WCAG?

Tidak. Tidak ada uji otomatis yang dapat menunjukkan bahwa sebuah website sesuai dengan WCAG atau mematuhi ADA, European Accessibility Act, atau hukum lain mana pun. Hasil yang bersih berarti aturan otomatis tidak menemukan kegagalan di halaman yang diuji.

Bisakah saya mengecek website staging atau halaman di balik login?

Halaman di balik login, kata sandi, atau proteksi bot tidak bisa diuji. Jika proteksi bot Anda memblokir pemindaian, izinkan user agent FixReportsScanner atau uji salinan staging yang bisa diakses publik.

Saya sudah memperbaiki masalahnya. Mengapa hasilnya terlihat sama?

Hasil untuk alamat yang sama bisa dipakai ulang dari pemindaian dalam satu jam terakhir. Tunggu hingga satu jam itu berlalu, dan kosongkan cache halaman atau cache CDN, sebelum Anda menguji lagi.

Sumber

Alat terkait

Laporan Perbaikan Aksesibilitas ($174, sekali bayar) dimulai dari pemindaian gratis lengkap dan menambahkan lebih banyak halaman, perubahan yang perlu dibuat untuk setiap temuan, PDF, serta uji ulang untuk memverifikasi perbaikan Anda.

Tentang Laporan Perbaikan Aksesibilitas