Memeriksa kebolehaksesan automatik dengan kapak

AX: ujian fungsi tambahan automatik untuk menjadikan laman web lebih mudah diakses

Berapa banyak masa dan usaha yang anda belanjakan apabila anda merancang laman web anda untuk memastikan orang kurang upaya juga boleh mengaksesnya? Ramai orang boleh menjawab "tidak". Walau bagaimanapun, sebilangan besar pengguna internet mengalami kesukaran mengakses laman web kerana kesukaran mereka dalam membezakan warna, membaca teks, menggunakan tetikus, atau melayari struktur laman web kompleks.

Oleh kerana usaha diperlukan untuk memeriksa dan melaksanakan penyelesaian kebolehaksesan, isu kebolehcapaian sering diabaikan. Bukan sahaja pemaju biasa dengan piawaian yang mendasari, tetapi mereka juga mesti sentiasa memeriksa sama ada mereka dipenuhi. Bolehkah kita memudahkan pembangunan laman web aksesibiliti dengan mengautomasikan cek standard?

Artikel ini akan menunjukkan kepada anda cara menggunakan perpustakaan AX dan beberapa alat yang berkaitan untuk memeriksa secara automatik dan melaporkan isu kebolehaksesan yang berpotensi di laman web dan aplikasi. Dengan mengurangkan jumlah kerja yang diperlukan untuk aktiviti tersebut dan mengautomasikan beberapa kerja manual, kami boleh membawa hasil yang lebih baik kepada semua pengguna yang menggunakan kandungan yang kami buat.

Pengenalan AX

AX adalah perpustakaan ujian fungsi automatik yang direka untuk membawa ujian fungsi tambahan ke dalam pembangunan web arus perdana. Perpustakaan Ax-Core adalah sumber terbuka dan direka untuk bekerja dengan kerangka ujian, alat, dan persekitaran yang berbeza. Sebagai contoh, ia boleh dijalankan dalam versi pembangunan ujian fungsional, pemalam penyemak imbas, atau aplikasi. Ia kini menyokong kira -kira 55 peraturan untuk memeriksa pelbagai aspek kebolehcapaian laman web.

dengan cepat menunjukkan bagaimana perpustakaan berfungsi, mari buat komponen mudah dan mengujinya. Kami tidak akan membuat halaman penuh, tetapi hanya tajuk.

gambar: screenshot sampel codepen

kami membuat beberapa keputusan reka bentuk yang sangat baik ketika membuat tajuk:

1. Kami menetapkan latar belakang untuk cahaya kelabu dan pautan ke kelabu gelap kerana warna ini adalah elegan dan bergaya;
Kami menggunakan ikon kaca pembesar yang sejuk untuk butang carian;
2. Kami menetapkan indeks tab input carian kepada 1 supaya pengguna boleh menekan kekunci tab dan taipkan pertanyaan carian dengan segera apabila membuka halaman.
tidak buruk, bukan? Mari lihat apa yang kelihatan dari perspektif aksesibiliti. Kami boleh menambah kapak dari CDN dan log semua ralat ke konsol penyemak imbas seperti berikut:

Jika anda menjalankan contoh dan membuka konsol, anda akan melihat pelbagai enam objek pelanggaran yang menyenaraikan isu -isu yang kami ada. Setiap objek menerangkan peraturan yang dilanggar, rujukan kepada elemen HTML yang harus dipersalahkan, dan membantu maklumat tentang cara menyelesaikan masalah.

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

Berikut adalah contoh objek pelanggaran, dipaparkan dalam format JSON:

Jika anda hanya memilih perihalan pelanggaran, inilah yang dikatakannya:

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

Kami telah terbukti tidak begitu hebat dalam keputusan reka bentuk:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Memeriksa kebolehaksesan automatik dengan kapak" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

1. Dua bayang -bayang kelabu yang kita pilih tidak cukup berbeza, dan mungkin sukar bagi orang yang mengalami gangguan visual untuk membaca
2. ikon kaca pembesar untuk butang carian tidak memberikan arahan mengenai tujuan butang bagi mereka yang menggunakan pembaca skrin
3. Indeks Tab Input Carian memecahkan proses navigasi biasa untuk orang yang menggunakan pembaca skrin atau papan kekunci dan menjadikannya lebih sukar bagi mereka untuk mengakses pautan menu.

Ia juga menunjukkan beberapa perkara lain yang tidak kami harapkan. Sebanyak kira -kira 55 cek yang berbeza telah dilakukan, termasuk peraturan dari garis panduan standard yang berbeza dan amalan terbaik.

Untuk melihat senarai ralat, kita perlu menyuntik skrip ke dalam halaman itu sendiri. Walaupun ia benar -benar boleh dilaksanakan, ia tidak mudah. Lebih baik jika kita dapat melakukan pemeriksaan ini pada mana -mana halaman tanpa menyuntik apa -apa diri. Adalah lebih baik menggunakan pelari ujian yang terkenal. Kita boleh melakukan ini menggunakan Selenium Webdriver dan Mocha.

Run Ax menggunakan selenium webdriver

Untuk menjalankan Ax menggunakan selenium, kami akan menggunakan perpustakaan Axe-WebDriverJS. Ia menyediakan API AX yang boleh digunakan di atas WebDriver.

Untuk menetapkannya, mari buat projek berasingan dan memulakan projek NPM menggunakan perintah NPM Init. Anda boleh meninggalkan nilai lalai untuk semua yang diperlukan. Untuk menjalankan selenium, anda perlu memasang selenium-webdriver. Kami akan melakukan ujian di Phantomjs, jadi kami perlu memasangnya juga. Selenium memerlukan versi nod 6.9 atau lebih baru, jadi pastikan anda memasangnya.

untuk memasang pakej perisian, jalankan:

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

Sekarang, kita perlu memasang kapak-teras dan kapak-webdriverjs:

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

Sekarang bahawa infrastruktur ditubuhkan, mari buat skrip yang menjalankan ujian terhadap SitePoint.com (tiada dendam peribadi, lelaki). Buat fail Axe.js dalam folder Projek dan tambahkan yang berikut:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Memeriksa kebolehaksesan automatik dengan kapak" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

Untuk melakukan ujian ini, kita boleh menjalankan node ax.js. Kami tidak dapat menjalankannya dari konsol kerana kami telah dipasang PhantomJs dalam projek tempatan kami. Kita perlu menjalankannya sebagai skrip NPM. Untuk melakukan ini, buka fail Package.json dan tukar entri skrip ujian lalai:

npm install phantomjs-prebuilt selenium-webdriver --save-dev

cuba menjalankan ujian NPM sekarang. Dalam beberapa saat, anda harus melihat senarai pelanggaran yang ditemui oleh AX. Sekiranya anda tidak melihat sebarang pelanggaran, ini bermakna bahawa Sitepoint telah menetapkannya selepas membaca artikel ini.

Ini lebih mudah daripada pendekatan awal kami, kerana kami tidak perlu mengubahsuai halaman yang kami uji, dan kami boleh menjalankannya dengan mudah menggunakan CLI. Walau bagaimanapun, kelemahan ini ialah kita masih perlu melaksanakan skrip berasingan untuk menjalankan ujian. Ia akan menjadi lebih baik jika kita dapat menjalankannya dengan ujian kami yang lain. Mari lihat cara menggunakan mocha untuk mencapai matlamat ini.

run kapak dengan mocha

Mocha adalah salah satu pelari ujian yang paling popular, jadi ia kelihatan seperti pilihan yang baik untuk mencuba Ax. Walau bagaimanapun, anda sepatutnya dapat mengintegrasikan AX ke dalam kerangka ujian kegemaran anda dengan cara yang sama. Mari kita bina projek sampel selenium kami.

Kami jelas memerlukan Mocha sendiri dan perpustakaan penegasan. Bagaimana dengan Chai? Pasang semuanya dengan arahan berikut:

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

Sekarang, kita perlu membungkus kod selenium yang kita tulis dalam kes ujian mocha. Buat fail ujian/axe.spec.js menggunakan kod berikut:

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

Ujian akan melakukan pernyataan yang sangat asas dengan memeriksa sama ada panjang hasilnya. Arahan violasi adalah sama dengan 0. Untuk menjalankan ujian, tukar skrip ujian untuk memanggil mocha:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Memeriksa kebolehaksesan automatik dengan kapak" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

Langkah logik seterusnya dalam latihan ini adalah untuk menghasilkan laporan ralat yang lebih terperinci apabila ujian gagal. Selepas itu, ia juga berguna untuk mengintegrasikannya dengan persekitaran CI kegemaran anda untuk memaparkan hasil halaman dengan betul. Saya akan meninggalkan dua perkara ini kepada pembaca sebagai latihan dan terus memperkenalkan beberapa pilihan konfigurasi AX tambahan yang berguna.

(Kandungan sedemikian, mengenai konfigurasi lanjutan, ringkasan dan Soalan Lazim, boleh ditulis semula secara juga berdasarkan output terdahulu, mengekalkan konsistensi kandungan, dan menyesuaikan pernyataan dan struktur perenggan untuk menjadikannya lebih lancar dan lebih semula jadi.) 🎜>

Atas ialah kandungan terperinci Memeriksa kebolehaksesan automatik dengan kapak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!