Pengauditan aksesibilitas dengan reaksi-axe dan eslint-plugin-jsx-a11y

Situs React Anda tidak akan progresif jika tidak dapat diakses. Mengaudit selama pengembangan dapat membantu Anda menemukan masalah apa pun.

Houssein Djirdeh

react-axe adalah library yang mengaudit Respons aplikasi dan mencatat setiap masalah aksesibilitas ke Chrome DevTools konsol. Fungsi ini menggunakan sumbu open source library pengujian untuk menandai masalah dan tingkat keparahannya.

eslint-plugin-jsx-a11y sama dengan plugin ESLint yang mengidentifikasi dan memberlakukan sejumlah aturan aksesibilitas langsung di JSX Anda. Kombinasi ini dikombinasikan dengan alat yang menguji hasil DOM yang dirender, seperti react-axe, dapat membantu Anda menemukan dan memperbaiki aksesibilitas masalah di situs Anda.

Mengapa hal ini bermanfaat?

Sangat penting untuk membuat {i>website<i} yang dapat menyediakannya kebutuhan setiap pengguna, terlepas dari gangguan atau pembatasan, kemampuan untuk mengakses kontennya. Menggunakan pengauditan library seperti react-axe dan eslint-plugin-jsx-a11y selama pengembangan aplikasi React Anda akan otomatis mengekspos aksesibilitas yang muncul.

Menggunakan eslint-plugin-jsx-a11y

React sudah mendukung penulisan elemen HTML yang dapat diakses dalam sintaksis JSX. Sebagai Misalnya, Anda hanya perlu menggunakan atribut htmlFor, bukan for, untuk menautkan label ke elemen formulir tertentu dalam komponen React.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

Tujuan Dokumentasi aksesibilitas reaksi mencakup semua nuansa penanganan masalah aksesibilitas dalam React komponen. Untuk memudahkan Anda menemukan masalah ini selama pengembangan, Buat React App (CRA) menyertakan plugin eslint-plugin-jsx-a11y untuk ESLint dengan secara default.

Untuk mengaktifkan lint yang telah dikonfigurasi sebelumnya yang disediakan oleh CRA:

  1. Instal plugin ESLint yang sesuai untuk editor kode Anda
  2. Menambahkan file .eslintrc.json ke project Anda
{
  "extends": "react-app"
}

Beberapa masalah aksesibilitas umum kini akan muncul.

Peringatan aksesibilitas gambar di linter

Untuk memeriksa lebih banyak aturan aksesibilitas, ubah file agar secara otomatis sertakan semua aturan yang direkomendasikan oleh plugin:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Jika Anda menginginkan subset aturan yang lebih ketat, beralihlah ke mode ketat:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

Error aksesibilitas label di linter

Proyek dokumentasi memberikan informasi tentang perbedaan antara mode yang direkomendasikan dan mode ketat.

Menggunakan reaksi-sumbu

eslint-plugin-jsx-a11y dapat membantu Anda menemukan masalah aksesibilitas dengan mudah di JSX Anda, tetapi tidak menguji hasil akhir HTML apa pun. react-axe adalah library yang melakukan hal ini dengan menyediakan wrapper React di sekitar axe-core dari Deque Labs.

Instal library sebagai dependensi pengembangan untuk memulai:

npm install --save-dev react-axe

Sekarang Anda hanya perlu melakukan inisialisasi modul di index.js:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

J impor dinamis digunakan di sini untuk hanya memuat library saat tidak dalam mode produksi sebelum merender dan melakukan booting komponen App root. Hal ini memastikan bahwa disertakan dalam paket produksi akhir yang tidak perlu.

Kini, saat Anda menjalankan aplikasi selama pengembangan, masalah akan muncul langsung ke konsol Chrome DevTools.

React Axe di Chrome DevTools

Tingkat keparahan juga akan ditetapkan untuk setiap pelanggaran. Level tersebut adalah:

  • Anak di Bawah Umur
  • Sedang
  • Serius
  • Kritis

Kesimpulan

  1. Jika Anda membangun situs dengan React, sertakan audit aksesibilitas ke dalam alur kerja Anda lebih awal untuk mengidentifikasi masalah saat Anda membangun komponen.
  2. Menggunakan eslint-plugin-jsx-a11y untuk menambahkan pemeriksaan aksesibilitas ke lint alur kerja. CRA sudah disertakan, tetapi beralih ke salah satu mode ketat atau direkomendasikan.
  3. Selain pengujian pengembangan lokal, sertakan react-axe ke dalam aplikasi untuk menangkap masalah apa pun pada DOM akhir yang dirender. Jangan sertakan ke dalam paket produksi.