Alat Kebolehcapaian percuma

Semak Kebolehcapaian Laman Web

Masukkan alamat anda dan kami akan menguji halaman itu serta sehingga empat halaman penting dalam pelayar sebenar berdasarkan peraturan WCAG 2.2 Tahap A dan AA. Setiap halangan disertakan dengan elemen, halaman, tangkapan skrin dan penjelasan tentang siapa yang terjejas.

Percuma. Menguji sehingga lima halaman penting dalam kira-kira satu minit.

Apa yang disemak oleh alat ini

  • Lima halaman yang mewakili laman web anda

    Halaman yang anda masukkan, serta sehingga empat halaman yang dipilih daripada pautannya mengikut jenis laman. Pada kedai dalam talian, ini bermakna satu koleksi, satu produk, troli dan satu halaman kandungan; di laman lain, halaman seperti harga, hubungi kami, artikel atau perkhidmatan. Templat berulang, jadi satu halaman produk biasanya menunjukkan masalah yang ada pada semua halaman produk.

  • Peraturan WCAG pada halaman yang telah dipaparkan

    Setiap halaman dimuatkan dalam Chromium pada 1366 × 900, dan axe-core, enjin peraturan sumber terbuka daripada Deque, menjalankan peraturan WCAG 2.0, 2.1 dan 2.2 Tahap A dan AA selepas skrip halaman selesai dijalankan. Cara ini mengesan masalah yang hanya timbul daripada tema atau aplikasi selepas halaman dibina dalam pelayar.

  • Impak dan kriteria kejayaan

    Setiap peraturan yang gagal menunjukkan impaknya (kritikal, serius, sederhana atau kecil), kriteria kejayaan WCAG yang berkaitan dengannya, dan bilangan elemen serta halaman yang terjejas.

  • Elemen yang gagal, ditandakan dengan garis

    HTML bagi satu elemen contoh dan tangkapan skrin halaman dengan elemen itu ditandakan dengan garis, supaya anda atau pembangun anda boleh mencarinya dalam templat tanpa perlu meneka.

  • Perkara yang perlu diputuskan oleh manusia

    Apabila axe-core menemui sesuatu yang tidak dapat diputuskannya, seperti teks di atas imej latar belakang yang kontrasnya tidak dapat diukur, perkara itu disenaraikan sebagai perlu disemak (needs review). Ia tidak pernah dikira sebagai kegagalan.

  • Ujian papan kekunci

    Pada halaman pertama, kami menekan Tab sebanyak 40 kali dan merekod ke mana fokus bergerak: sama ada ia bergerak langsung, sama ada ia tersekat dalam gelung (selalunya di dalam sepanduk kuki), sama ada hentian pertama ialah pautan langkau (skip link), dan elemen terfokus mana yang tidak menunjukkan penunjuk fokus yang kelihatan. Semakan terakhir itu bersifat heuristik, jadi ia dipaparkan sebagai perlu disemak.

Apa yang tidak dapat disemaknya

  • Mendengar apa yang diumumkan oleh pembaca skrin. Perisian boleh mengesahkan bahawa butang mempunyai nama, tetapi bukan bahawa nama itu masuk akal apabila dibacakan.
  • Menilai kapsyen, transkrip atau perihalan audio bagi video dan audio.
  • Menilai kriteria kognitif dan kandungan, seperti sama ada arahan jelas atau sama ada mesej ralat membantu pengguna membetulkan kesilapan.
  • Menguji halaman di sebalik log masuk, kata laluan atau perlindungan bot, atau melalui proses checkout.
  • Memberitahu anda sama ada laman web anda memenuhi WCAG atau mematuhi mana-mana undang-undang. Peraturan automatik hanya menemui sebahagian daripada masalah; selebihnya memerlukan penilaian manusia.

Mengapa ia penting

Halangan kebolehcapaian selalunya berpunca daripada kesilapan kecil dalam templat yang membawa kesan besar. Butang troli yang hanya berupa ikon tanpa nama boleh capai (accessible name) diumumkan sebagai “butang” sahaja, jadi pengguna pembaca skrin tidak tahu fungsinya. Teks kelabu di atas latar putih yang tidak mencapai nisbah kontras 4.5:1 sukar dibaca oleh ramai orang yang mempunyai penglihatan terhad, dan oleh sesiapa sahaja yang menggunakan telefon di bawah cahaya matahari terik.

Oleh sebab pengepala, kad produk dan pengaki yang sama muncul pada setiap halaman, satu pembaikan dalam templat boleh menghapuskan ratusan kegagalan sekali gus. Itulah sebabnya keputusan dikumpulkan mengikut peraturan, dengan bilangan elemen dan halaman, dan bukannya menyenaraikan setiap kejadian sebagai masalah yang berasingan.

Kebolehcapaian juga mempunyai sisi undang-undang di banyak negara. Imbasan tidak dapat memberitahu anda sama ada sesuatu undang-undang terpakai kepada anda atau sama ada anda mematuhinya. Apa yang diberikannya ialah senarai bertarikh tentang halangan sebenar pada halaman anda sendiri, dan itulah titik permulaan yang praktikal dalam apa jua keadaan.

Cara membaca keputusan

Kritikal
Halangan ini boleh menyekat sesetengah orang daripada menggunakan elemen itu sama sekali, contohnya medan borang tanpa label atau butang tanpa nama. Baiki yang ini dahulu.
Serius
Halangan ini menjadikan sesuatu tugas jauh lebih sukar bagi sesetengah orang, seperti teks kandungan yang tidak mencapai nisbah kontras.
Sederhana
Halangan ini menyebabkan kesukaran atau kekeliruan, tetapi biasanya pengguna masih boleh mengatasinya.
Kecil
Masalah kecil atau gangguan. Masih wajar dibaiki apabila anda menyunting templat itu nanti.
Kriteria kejayaan WCAG
Nombor di sebelah sesuatu peraturan, seperti 1.1.1 atau 1.4.3, ialah kriteria yang diujinya. Peraturan tanpa kriteria tersenarai ialah amalan terbaik (best practice), bukan keperluan WCAG.
Elemen dan halaman
Bilangan elemen yang gagal peraturan itu dan pada berapa banyak halaman yang diuji. Peraturan yang gagal pada setiap halaman biasanya terletak dalam bahagian yang dikongsi seperti pengepala, menu atau pengaki.
Perlu disemak
axe-core menemui sesuatu yang tidak dapat diputuskannya. Periksa elemen itu sendiri: ia mungkin lulus atau gagal. Perkara ini tidak dikira sebagai kegagalan.
Perangkap fokus
Tab terus berpusing melalui beberapa elemen yang sama. Jika elemen itu milik sepanduk kuki, pengguna papan kekunci mungkin tidak dapat mencapai bahagian lain halaman.
Fokus tidak bergerak (Focus doesn’t move)
Menekan Tab tidak pernah memfokuskan apa-apa. Pautan dan butang mungkin dibina daripada elemen div atau span, atau ada skrip yang menyekat kekunci itu.
Pautan langkau
Sama ada hentian Tab pertama ialah pautan “Langkau ke kandungan”. Tanpanya, pengguna papan kekunci perlu menekan Tab melalui keseluruhan pengepala pada setiap halaman. Mercu tanda (landmark) dan tajuk juga boleh memenuhi WCAG 2.4.1 Bypass Blocks.
Tiada penunjuk fokus yang kelihatan
Elemen terfokus yang tidak menunjukkan garis luar (outline), bayang kotak (box shadow) atau garis bawah semasa ujian kami. Gaya lain, seperti perubahan warna, mungkin masih kelihatan, jadi tekan Tab melalui elemen ini sendiri untuk mengesahkannya.

Cara membaiki masalah yang paling biasa

  • Teks yang tidak mencapai nisbah kontras

    Teks biasa memerlukan sekurang-kurangnya 4.5:1 berbanding latar belakangnya, dan teks besar (kira-kira 24 px, atau kira-kira 18.7 px tebal) memerlukan 3:1. Tukar warna dalam tetapan tema atau token reka bentuk anda, bukan satu demi satu elemen, kemudian semak semula teks pemegang tempat (placeholder), keadaan hover dan teks di atas imej.

  • Imej tanpa teks alt

    Berikan setiap imej yang bermakna atribut alt yang menyatakan apa yang ditunjukkan atau dilakukannya, seperti nama dan warna produk. Imej hiasan diberi alt kosong (alt="") supaya pembaca skrin melangkaunya. Dalam Shopify, anda menambah teks alt daripada imej dalam bahagian Media produk; dalam WordPress, dalam medan Teks Alternatif (Alternative Text) di Pustaka Media (Media Library).

  • Medan borang tanpa label

    Kaitkan label dengan setiap input menggunakan <label for> yang sepadan dengan id medan, atau gunakan aria-label apabila tiada teks yang kelihatan. Jangan bergantung pada teks pemegang tempat sebagai satu-satunya label: ia hilang sebaik sahaja seseorang mula menaip. Borang langganan surat berita dan kotak carian di pengepala ialah punca yang paling biasa.

  • Butang dan pautan tanpa nama boleh capai

    Kawalan berikon untuk troli, carian, menu atau profil media sosial selalunya hanya mengandungi SVG. Tambah teks yang kelihatan atau aria-label yang menyatakan fungsi kawalan itu (“Buka troli”, bukan “ikon”), dan tambah aria-hidden="true" pada SVG itu sendiri.

  • Sepanduk kuki yang memerangkap fokus

    Pastikan setiap butang pada sepanduk boleh dicapai dengan Tab dan digunakan dengan Enter atau Space, menutup sepanduk mengembalikan fokus ke halaman, dan sepanduk yang tidak menghalang halaman tidak menahan fokus langsung. Semak tetapan alat persetujuan kuki anda dan kemas kininya jika skripnya sudah lama.

  • Garis fokus dibuang dalam CSS

    Cari outline: none atau outline: 0 pada pautan, butang dan :focus dalam helaian gaya anda. Gantikannya dengan gaya yang kelihatan seperti :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Soalan tentang alat ini

Adakah penyemak kebolehcapaian ini percuma?

Ya. Tiada pendaftaran; anda hanya perlu mengesahkan bahawa anda memiliki atau mengurus laman web tersebut. Laporan Pembaikan Kebolehcapaian berbayar menambah sehingga 20 halaman lagi daripada peta laman anda, perjalanan menggunakan papan kekunci sahaja, semakan aliran semula (reflow) pada 320 px, kod sebelum dan selepas yang dibina daripada markup anda yang gagal, gesaan AI, PDF dan 5 ujian semula.

Berapa banyak daripada WCAG yang boleh diuji oleh penyemak automatik?

Sebahagian sahaja. Peraturan boleh menyemak bahawa imej mempunyai teks alt, tetapi bukan bahawa teks itu menerangkan imej tersebut, dan bahawa medan mempunyai label, tetapi bukan bahawa label itu jelas. Anggap keputusan sebagai senarai masalah yang pasti, kemudian uji selebihnya dengan papan kekunci dan pembaca skrin.

Jika imbasan tidak menemui apa-apa, adakah laman web saya mematuhi ADA atau WCAG?

Tidak. Tiada ujian automatik yang dapat menunjukkan bahawa sesebuah laman web memenuhi WCAG atau mematuhi ADA, European Accessibility Act atau mana-mana undang-undang lain. Keputusan yang bersih bermakna peraturan automatik tidak menemui kegagalan pada halaman yang diuji.

Bolehkah saya menyemak laman staging atau halaman di sebalik log masuk?

Halaman di sebalik log masuk, kata laluan atau perlindungan bot tidak dapat diuji. Jika perlindungan bot anda menyekat imbasan, benarkan ejen pengguna (user agent) FixReportsScanner atau uji salinan staging yang boleh diakses umum.

Saya sudah membaiki satu isu. Mengapa keputusannya kelihatan sama?

Keputusan untuk alamat yang sama mungkin digunakan semula daripada imbasan dalam satu jam yang lalu. Tunggu sehingga satu jam itu berlalu, dan kosongkan cache halaman atau cache CDN, sebelum anda menguji semula.

Sumber

Alat berkaitan

Laporan Pembaikan Kebolehcapaian ($174, sekali bayar) bermula daripada imbasan percuma penuh dan menambah lebih banyak halaman, perubahan yang perlu dibuat bagi setiap penemuan, PDF dan ujian semula untuk mengesahkan pembaikan anda.

Tentang Laporan Pembaikan Kebolehcapaian