Situs React Anda tidak progresif jika tidak dapat diakses. Mengaudit selama pengembangan dapat membantu Anda menemukan masalah.
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:
- Instal plugin ESLint yang sesuai untuk editor kode Anda
- 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
- Jika Anda mem-build situs dengan React, sertakan audit aksesibilitas ke dalam alur kerja Anda lebih awal untuk mengetahui masalah saat mem-build komponen.
- 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. - 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.