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

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

Houssein Djirdeh

react-axe adalah library yang mengaudit aplikasi React dan mencatat masalah aksesibilitas apa pun ke dalam konsol Chrome DevTools. Class ini menggunakan library pengujian axis open source untuk melaporkan setiap masalah dan tingkat keparahannya.

eslint-plugin-jsx-a11y adalah plugin ESLint yang mengidentifikasi dan menerapkan sejumlah aturan aksesibilitas secara langsung di JSX Anda. Menggunakan hal ini bersama dengan alat yang menguji DOM akhir yang dirender, seperti react-axe, dapat membantu Anda menemukan dan memperbaiki masalah aksesibilitas di situs Anda.

Mengapa hal ini bermanfaat?

Sangat penting untuk membuat situs yang menyediakan kemampuan bagi setiap pengguna untuk mengakses kontennya, terlepas dari gangguan atau batasan mereka. Menggunakan library audit seperti react-axe dan eslint-plugin-jsx-a11y selama pengembangan aplikasi React akan otomatis mengekspos semua masalah aksesibilitas saat muncul.

Menggunakan eslint-plugin-jsx-a11y

React sudah mendukung penulisan elemen HTML yang dapat diakses dalam sintaksis JSX. 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>

Dokumentasi aksesibilitas React mencakup semua nuansa penanganan masalah aksesibilitas dalam komponen React. Untuk mempermudah menemukan masalah ini selama pengembangan, Create React App (CRA) menyertakan plugin eslint-plugin-jsx-a11y untuk ESLint secara default.

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

1. Instal plugin ESLint yang sesuai untuk editor kode Anda
2. Tambahkan file .eslintrc.json ke project Anda

{
  "extends": "react-app"
}

Beberapa masalah aksesibilitas umum kini akan muncul.

Untuk memeriksa aturan aksesibilitas lainnya, ubah file agar otomatis menyertakan semua aturan yang direkomendasikan oleh plugin:

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

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

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

Dokumentasi project memberikan informasi tentang perbedaan antara mode yang direkomendasikan dan mode ketat.

Menggunakan kapak reaksi

eslint-plugin-jsx-a11y dapat membantu Anda menemukan masalah aksesibilitas dengan mudah di JSX, tetapi tidak menguji output HTML akhir apa pun. react-axe adalah library yang melakukan hal ini dengan menyediakan wrapper React di sekitar alat pengujian axe-core oleh 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'));
}

Impor dinamis digunakan di sini untuk hanya memuat library ketika tidak dalam mode produksi sebelum merender dan mem-booting komponen App root. Hal ini memastikan bahwa modul tersebut tidak perlu disertakan dalam paket produksi akhir.

Sekarang, saat Anda menjalankan aplikasi selama pengembangan, masalah akan langsung muncul di konsol Chrome DevTools.

Tingkat keseriusan juga ditetapkan untuk setiap pelanggaran. Level tersebut adalah:

• Kecil
• Sedang
• Serius
• Kritis

Kesimpulan

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