Trang web React của bạn sẽ không tiến triển được nếu không truy cập được. Việc kiểm tra trong quá trình phát triển có thể giúp bạn phát hiện mọi vấn đề.
react-axe
là một thư viện kiểm tra
Phản ứng với ứng dụng và ghi nhật ký mọi vấn đề về khả năng hỗ trợ tiếp cận vào Công cụ của Chrome cho nhà phát triển
Google Play. Công cụ này sử dụng rìu nguồn mở
thư viện kiểm thử để gắn cờ mọi sự cố và mức độ nghiêm trọng của chúng.
eslint-plugin-jsx-a11y
là
một trình bổ trợ ESLint giúp xác định và thực thi một số quy tắc hỗ trợ tiếp cận
ngay trong JSX. Sử dụng phương pháp này kết hợp với một công cụ kiểm tra kết quả
DOM được hiển thị, chẳng hạn như react-axe
, có thể giúp bạn tìm và khắc phục mọi khả năng hỗ trợ tiếp cận
trên trang web của bạn.
Tại sao tính năng này hữu ích?
Điều quan trọng là phải xây dựng được những trang web cung cấp cho mọi người dùng, bất kể
sự suy giảm hoặc hạn chế, khả năng truy cập vào nội dung của ứng dụng. Sử dụng tính năng kiểm tra
các thư viện như react-axe
và eslint-plugin-jsx-a11y
trong khoảng thời gian
Việc phát triển ứng dụng React sẽ tự động hiển thị mọi
khi chúng bật lên.
Sử dụng eslint-plugin-jsx-a11y
React đã hỗ trợ viết các phần tử HTML có thể truy cập trong cú pháp JSX. Cho
Ví dụ: bạn chỉ cần sử dụng thuộc tính htmlFor
thay vì for
để liên kết một
nhãn cho một thành phần biểu mẫu cụ thể trong thành phần React.
<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>
Chiến lược phát hành đĩa đơn
Tài liệu về khả năng hỗ trợ tiếp cận phản hồi
đề cập đến mọi sắc thái của việc xử lý các vấn đề về khả năng hỗ trợ tiếp cận trong một React
thành phần. Để dễ dàng phát hiện những vấn đề này trong quá trình phát triển, hãy tạo
Ứng dụng React (CRA) bao gồm trình bổ trợ eslint-plugin-jsx-a11y
cho ESLint bằng cách
mặc định.
Cách bật tính năng tìm lỗi mã nguồn được định cấu hình sẵn do CRA cung cấp:
- Cài đặt trình bổ trợ ESLint thích hợp cho trình soạn thảo mã của bạn
- Thêm tệp
.eslintrc.json
vào dự án
{
"extends": "react-app"
}
Một số vấn đề thường gặp về hỗ trợ tiếp cận sẽ xuất hiện.
Để kiểm tra xem thêm nhiều quy tắc hỗ trợ tiếp cận khác, hãy sửa đổi tệp để tự động bao gồm tất cả các quy tắc đề xuất của trình bổ trợ:
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"]
}
Nếu bạn muốn có một tập hợp con các quy tắc nghiêm ngặt hơn nữa, hãy chuyển sang chế độ nghiêm ngặt:
{
"extends": ["react-app", "plugin:jsx-a11y/strict"]
}
Dự án tài liệu cung cấp thông tin về sự khác biệt giữa chế độ được đề xuất và chế độ nghiêm ngặt.
Dùng rìu phản ứng
eslint-plugin-jsx-a11y
có thể giúp bạn dễ dàng xác định mọi vấn đề về việc hỗ trợ tiếp cận
trong JSX, nhưng không kiểm tra bất kỳ đầu ra HTML cuối cùng nào. react-axe
là một thư viện thực hiện chính xác việc này bằng cách cung cấp một trình bao bọc React xung quanh
Công cụ kiểm tra axe-core
của Deque Labs.
Cài đặt thư viện dưới dạng phần phụ thuộc phát triển để bắt đầu:
npm install --save-dev react-axe
Bây giờ, bạn chỉ cần khởi chạy mô-đun trong 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'));
}
Đáp
nhập động
được sử dụng ở đây để chỉ tải thư viện khi không ở chế độ sản xuất
kết xuất và khởi động thành phần App
gốc. Điều này đảm bảo rằng
không cần thiết được đưa vào gói sản xuất cuối cùng.
Giờ đây, khi bạn chạy ứng dụng trong quá trình phát triển, các vấn đề sẽ xuất hiện trực tiếp đến bảng điều khiển Công cụ của Chrome cho nhà phát triển.
Mức độ nghiêm trọng cũng được chỉ định cho từng lỗi vi phạm. Các cấp độ này bao gồm:
- Không đáng kể
- Vừa phải
- Nghiêm trọng
- Nghiêm trọng
Kết luận
- Nếu bạn đang tạo một trang web bằng React, hãy thêm tính năng kiểm tra khả năng hỗ trợ tiếp cận vào quy trình làm việc sớm để phát hiện các vấn đề khi bạn xây dựng các thành phần.
- Dùng
eslint-plugin-jsx-a11y
để thêm các bước kiểm tra khả năng hỗ trợ tiếp cận vào công cụ tìm lỗi mã nguồn quy trình làm việc. CRA đã có sẵn, nhưng hãy chuyển sang chế độ nghiêm ngặt hoặc được đề xuất. - Ngoài việc kiểm thử quá trình phát triển cục bộ, hãy đưa
react-axe
vào để phát hiện mọi sự cố về DOM được kết xuất cuối cùng. Không bao gồm vào gói sản xuất.