Axe adalah mesin pengujian aksesibilitas untuk situs web dan antarmuka pengguna berbasis HTML lainnya. Ini cepat, aman, ringan, dan dibuat untuk berintegrasi secara mulus dengan lingkungan pengujian yang ada sehingga Anda dapat mengotomatiskan pengujian aksesibilitas bersamaan dengan pengujian fungsional reguler Anda.
Mendaftarlah pada berita axe untuk mendapatkan informasi terbaru tentang fitur axe, rilis mendatang, dan acara.
Axe-core memiliki berbagai jenis aturan, untuk WCAG 2.0, 2.1, 2.2 pada level A, AA, dan AAA serta sejumlah praktik terbaik yang membantu Anda mengidentifikasi praktik aksesibilitas umum seperti memastikan setiap halaman memiliki judul h1
, dan untuk membantu Anda menghindari "gotchas" di ARIA seperti atribut ARIA yang Anda gunakan akan diabaikan. Daftar lengkap aturan, pengelompokan level WCAG, dan praktik terbaik, dapat ditemukan di doc/rule-descriptions.md.
Dengan axe-core, Anda dapat menemukan rata-rata 57% masalah WCAG secara otomatis . Selain itu, axe-core akan mengembalikan elemen sebagai "tidak lengkap" yang mana axe-core tidak dapat dipastikan, dan diperlukan peninjauan manual.
Untuk menangkap bug di awal siklus pengembangan, sebaiknya gunakan ekstensi axe-linter vscode. Untuk meningkatkan cakupan pengujian lebih jauh, kami merekomendasikan pengujian terpandu cerdas di Ekstensi kapak.
Download dulu paketnya:
npm install axe-core --save-dev
Sekarang sertakan file javascript di setiap iframe Anda di perlengkapan atau sistem pengujian Anda:
< script src =" node_modules/axe-core/axe.min.js " > script >
Sekarang masukkan panggilan pada setiap titik dalam pengujian Anda di mana bagian UI baru terlihat atau terekspos:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
Web hanya dapat menjadi ruang yang dapat diakses dan inklusif jika pengembang diberi wewenang untuk mengambil tanggung jawab atas pengujian aksesibilitas dan praktik pengkodean yang dapat diakses.
Pengujian aksesibilitas otomatis sangat menghemat waktu, tidak memerlukan keahlian khusus, dan memungkinkan tim memfokuskan sumber daya ahli pada masalah aksesibilitas yang benar-benar membutuhkannya. Sayangnya, sebagian besar alat aksesibilitas dimaksudkan untuk dijalankan di situs dan aplikasi yang telah mencapai akhir proses pengembangan dan sering kali tidak memberikan hasil yang jelas atau konsisten, sehingga menyebabkan frustrasi dan penundaan saat Anda mengira produk Anda siap dikirimkan.
Axe dibuat untuk mencerminkan cara kerja pengembangan web sebenarnya. Ia berfungsi dengan semua browser modern, alat, dan lingkungan pengujian yang mungkin digunakan oleh tim pengembang. Dengan axe, pengujian aksesibilitas dapat dilakukan sebagai bagian dari pengujian unit, pengujian integrasi, pengujian browser, dan pengujian fungsional lainnya yang sudah dilakukan tim Anda sehari-hari. Memasukkan pengujian aksesibilitas ke dalam proses pengembangan awal akan menghemat waktu, sumber daya, dan segala jenis frustrasi.
API axe-core sepenuhnya mendukung browser berikut:
Dukungan berarti kami akan memperbaiki bug dan mencoba menguji setiap browser secara berkala. Hanya Chrome dan Firefox yang saat ini diuji pada setiap permintaan penarikan.
Ada dukungan terbatas untuk JSDOM. Kami akan berusaha membuat semua aturan kompatibel dengan JSDOM namun jika hal ini tidak memungkinkan, kami sarankan untuk menonaktifkan aturan tersebut. Saat ini aturan color-contrast
diketahui tidak berfungsi dengan JSDOM.
Kami hanya dapat mendukung lingkungan yang fitur-fiturnya didukung secara asli atau diisi dengan benar. Kami tidak mendukung implementasi Shadow DOM v0 yang tidak digunakan lagi.
Paket API axe-core terdiri dari:
axe.js
- file JavaScript yang harus disertakan dalam situs web Anda yang sedang diuji (API)axe.min.js
- versi yang diperkecil dari file di atas Axe dapat dibuat menggunakan bahasa lokal Anda. Untuk melakukannya, file pelokalan harus ditambahkan ke direktori ./locales
. File ini harus diberi nama dengan cara berikut:
. Untuk membangun ax menggunakan lokal ini, alih-alih menggunakan default, jalankan ax dengan flag --lang
, seperti:
grunt build --lang=nl
atau setara:
npm run build -- --lang=nl
Ini akan membuat build baru untuk axe, yang disebut axe.
dan axe.
. Jika Anda ingin membuat semua versi yang dilokalkan, cukup masukkan --all-lang
saja. Jika Anda ingin membuat beberapa versi yang dilokalkan (tetapi tidak semuanya), Anda dapat meneruskan daftar bahasa yang dipisahkan koma ke tanda --lang
, seperti --lang=nl,ja
.
Untuk membuat terjemahan baru untuk axe, mulailah dengan menjalankan grunt translate --lang=
. Ini akan membuat file json di direktori ./locales
, dengan teks bahasa Inggris default di dalamnya untuk Anda terjemahkan. Alternatifnya, Anda dapat menyalin ./locales/_template.json
. Kami menyambut baik lokalisasi apa pun untuk axe-core. Untuk detail tentang cara berkontribusi, lihat bagian Berkontribusi di bawah. Untuk detail tentang sintaksis pesan, lihat Memeriksa Templat Pesan.
Untuk memperbarui file terjemahan yang ada, jalankan kembali grunt translate --lang=
. Ini akan menambahkan pesan baru yang digunakan dalam bahasa Inggris dan menghapus pesan yang tidak digunakan dalam bahasa Inggris.
Selain itu, locale dapat diterapkan saat runtime dengan meneruskan objek locale
ke axe.configure()
. Objek locale harus mempunyai bentuk yang sama dengan locales yang ada di direktori ./locales
. Misalnya:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;
Axe-core mendukung lokal berikut. Perlu diperhatikan bahwa karena bahasa lokal disumbangkan oleh komunitas kami, tidak ada jaminan bahwa bahasa lokal tersebut akan menyertakan semua terjemahan yang diperlukan dalam rilis.
Axe-core memiliki rilis kecil baru setiap 3 hingga 5 bulan, yang biasanya memperkenalkan aturan dan fitur baru. Kami menyarankan untuk menjadwalkan waktu untuk meningkatkan ke versi ini. Pembaruan keamanan akan tersedia untuk versi minor hingga 18 bulan .
DEQUE, DEQUELABS, AXE®, dan AXE-CORE® adalah merek dagang Deque Systems, Inc. Penggunaan merek dagang Deque harus sesuai dengan kebijakan merek dagang Deque.
Lihat dukungan ARIA axe-core untuk daftar lengkap peran dan atribut yang didukung ARIA berdasarkan axe.
Baca panduan Mengusulkan Aturan Inti Kapak
Baca dokumentasi tentang arsitektur
Baca dokumentasi tentang berkontribusi
Daftar proyek yang menggunakan axe-core
Terima kasih kepada Marat Dulin atas implementasi css-selector-parsernya yang disertakan untuk dukungan shadow DOM. Terima kasih lainnya kepada pelaksana Slick Parser atas kontribusinya, kami telah menggunakan beberapa algoritme mereka dalam kode dukungan shadow DOM kami. Terima kasih kepada Lea Verou dan Chris Lilley atas perpustakaan colorjs.io mereka yang telah kami gunakan untuk mengonversi format warna.
Axe-core didistribusikan di bawah Lisensi Publik Mozilla, versi 2.0. Itu datang dibundel dengan beberapa dependensi yang didistribusikan berdasarkan ketentuannya sendiri. (Lihat LISENSI-3RD-PARTY.txt)