Pa11y dan axe untuk Ujian Kebolehcapaian
Automatikkan pemeriksaan kebolehcapaian dengan pa11y dan axe-core
Pa11y dan axe untuk Ujian Kebolehcapaian ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Alat Kebolehcapaian Automatik
Pa11y dan axe-core ialah alat sumber terbuka yang mengautomatikkan ujian kebolehcapaian yang selaras dengan WCAG. Kedua-duanya menghuraikan halaman, menjalankan peraturan terhadap DOM dan melaporkan pelanggaran. Kesan sebahagian besar isu kebolehcapaian secara automatik; simpan ujian manual untuk selebihnya.
axe-core: Pustaka
axe-core ialah pustaka JavaScript yang menggerakkan pengauditan kebolehcapaian dalam Chrome DevTools, Lighthouse, Jest, Cypress, Playwright dan banyak alat lain. Ia merupakan piawaian tidak rasmi untuk ujian kebolehcapaian automatik — liputan peraturan yang luas dan kadar positif palsu yang rendah.
Sambungan Pelayar axe
Sambungan pelayar axe DevTools (Chrome, Firefox, Edge) menambah tab "Kebolehcapaian" pada DevTools. Klik "Imbas semua halaman" dan sambungan itu menyenaraikan setiap pelanggaran bersama elemen yang terjejas, tahap keterukan dan panduan pemulihan. Paling sesuai untuk pengauditan sekali-sekala semasa pembangunan.
CLI Pa11y
Pa11y ialah CLI Node.js: npx pa11y https://example.com mengaudit URL. Ia mengeluarkan senarai isu ke terminal. Gunakannya untuk pengauditan pantas, dalam skrip shell atau untuk penyepaduan CI yang ringan.
npx pa11y https://example.com
# or for multiple pages
npx pa11y-ci --sitemap https://example.com/sitemap.xmlPenyepaduan axe dengan Playwright
Gabungkan axe-core dengan Playwright untuk ujian kebolehcapaian hujung ke hujung: const results = await new AxeBuilder({ page }).analyze(). Buat penegasan bahawa results.violations.length === 0. Tindakan ini mengesan kemerosotan sebelum sampai ke pengeluaran.
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
test("home page accessibility", async ({ page }) => {
await page.goto("/");
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Jest-axe untuk Komponen
jest-axe menjalankan axe terhadap komponen yang dipaparkan dalam ujian Jest. Paparkan komponen dengan React Testing Library, kemudian hantar bekas itu kepada axe: expect(await axe(container)).toHaveNoViolations(). Kini setiap ujian komponen merangkumi pemeriksaan kebolehcapaian.
Konfigurasi Peraturan
Kedua-dua alat membolehkan anda menyahdayakan atau mengubah suai peraturan bagi setiap projek: matikan peraturan yang bercanggah dengan keputusan reka bentuk yang disengajakan dan tingkatkan ketegasan untuk peraturan yang diketahui kritikal. Dokumentasikan setiap peraturan yang dinyahdayakan dengan komen yang menerangkan sebabnya — konteks yang diperlukan oleh pembangun pada masa hadapan.
Had Automasi
Alat automatik mengesan kira-kira 30-40% isu WCAG. Selebihnya (susunan fokus yang bermakna, teks alt yang mudah difahami, hierarki tajuk semantik dan penggunaan ARIA yang mencerminkan tingkah laku antara muka pengguna sebenar) memerlukan semakan manusia. Automasi diperlukan tetapi tidak mencukupi untuk kebolehcapaian.
Ujian Teknologi Bantuan Sebenar
Uji dengan NVDA pada Windows, VoiceOver pada Mac dan JAWS untuk khalayak perusahaan. Ujian pembaca skrin sebenar mendedahkan isu yang tidak dapat dikesan oleh automasi — pengumuman yang mengelirukan, mercu tanda yang rosak dan susunan fokus yang tidak logik. Sekali bagi setiap keluaran pada setiap SR utama ialah garis dasar yang munasabah.
Ujian Pengguna
Pengesahan kebolehcapaian yang paling bernilai datang daripada pengguna kurang upaya yang menggunakan produk sebenar. Rekrut mereka melalui perunding kebolehcapaian, perkhidmatan sokongan orang kurang upaya di universiti atau platform ujian seperti UserTesting.com. Maklum balas dunia sebenar mereka mengesan isu yang tidak dapat ditemui oleh mana-mana alat automatik.
Strategi Penyepaduan CI
Sekat PR apabila berlaku kemerosotan kebolehcapaian (pelanggaran baharu), tetapi bukan untuk pelanggaran legasi (garis dasar sedia ada). Ini membolehkan piawaian terus meningkat tanpa menghalang penerbitan. Jejaki jumlah pelanggaran dari semasa ke semasa sebagai petunjuk awal kesihatan kebolehcapaian keseluruhan.
Menggabungkan Alat
Gunakan beberapa alat: axe untuk pemeriksaan automatik yang menyeluruh, Pa11y sebagai pandangan kedua dan ujian pembaca skrin manual untuk menampung jurang kualitatif. Pertindihannya kecil; bersama-sama, alat ini merangkumi lebih banyak isu berbanding mana-mana satu alat sahaja.
Semakan Pengetahuan
Berapakah peratus isu kebolehcapaian WCAG yang boleh dikesan dengan pasti oleh alat automatik seperti axe dan Pa11y?
Ringkasan
axe-core menggerakkan kebanyakan pengauditan kebolehcapaian; sambungan pelayar sangat baik untuk pemeriksaan sekali-sekala, manakala penyepaduan jest-axe dan Playwright sesuai untuk ujian berterusan. Pa11y ialah CLI pelengkap. Automasi mengesan kira-kira 30-40% isu; gabungkannya dengan ujian pembaca skrin manual (NVDA, VoiceOver) dan ujian oleh pengguna kurang upaya sebenar untuk liputan penuh. Sekat kemerosotan baharu dalam CI tanpa menyekat berdasarkan garis dasar legasi.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Pa11y dan axe untuk Ujian Kebolehcapaian” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Pa11y dan axe untuk Ujian Kebolehcapaian”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pa11y dan axe untuk Ujian Kebolehcapaian”?
Automatikkan pemeriksaan kebolehcapaian dengan pa11y dan axe-core Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Pa11y dan axe untuk Ujian Kebolehcapaian” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pengesah Markup W3C
- Audit HTML Lighthouse
- Pa11y dan axe untuk Ujian Kebolehcapaian
- Ujian Syot Kilat HTML