Kiểm tra khả năng hỗ trợ tiếp cận với React-axe và eslint-plugin-jsx-a11y

Trang web React của bạn không tiến bộ nếu không thể truy cập. 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 đề.

Houssein Djirdeh

react-axe là một thư viện kiểm tra ứng dụng Phản hồi và ghi lại mọi vấn đề về hỗ trợ tiếp cận vào bảng điều khiển Công cụ của Chrome cho nhà phát triển. Giải pháp này sử dụng thư viện kiểm thử axe nguồn mở để gắn cờ mọi vấn đề và mức độ nghiêm trọng của các vấn đề đó.

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 trực tiếp trong JSX. Việc sử dụng kết hợp API này với một công cụ kiểm tra DOM được hiển thị cuối cùng, chẳng hạn như react-axe, có thể giúp bạn tìm và khắc phục mọi vấn đề liên quan đến khả năng hỗ trợ tiếp cận trên trang web của mình.

Tại sao điều này hữu ích?

Điều quan trọng là phải xây dựng các trang web cung cấp cho mọi người dùng khả năng truy cập vào nội dung của họ, bất kể đối tượng nào có điểm hạn chế hay không. Việc sử dụng việc kiểm tra các thư viện như react-axe và eslint-plugin-jsx-a11y trong quá trình phát triển ứng dụng React sẽ tự động gây ra mọi vấn đề về hỗ trợ tiếp cận khi chúng xuất hiệ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. 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 với 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>

Tài liệu về hỗ trợ tiếp cận Phản hồi trình bày tất cả các sắc thái liên quan đến việc xử lý các vấn đề về hỗ trợ tiếp cận trong thành phần React. Để dễ dàng phát hiện các vấn đề này hơn trong quá trình phát triển, theo mặc định, tính năng Tạo ứng dụng phản hồi (CRA) sẽ tích hợp trình bổ trợ eslint-plugin-jsx-a11y cho ESLint.

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:

  1. Cài đặt trình bổ trợ ESLint thích hợp cho trình soạn thảo mã của bạn
  2. Thêm tệp .eslintrc.json vào dự án
{
  "extends": "react-app"
}

Lúc này, một số vấn đề thường gặp về khả năng hỗ trợ tiếp cận sẽ xuất hiện.

Cảnh báo về khả năng tiếp cận hình ảnh trong linter

Để kiểm tra nhiều quy tắc hỗ trợ tiếp cận hơn nữa, hãy sửa đổi tệp để tự động bao gồm tất cả các quy tắc được trình bổ trợ đề xuất:

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

Nếu bạn muốn có một tập hợp con quy tắc nghiêm ngặt hơn, hãy chuyển sang chế độ nghiêm ngặt:

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

Lỗi hỗ trợ tiếp cận về nhãn trong linter

Tài liệu của dự án 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ề hỗ trợ tiếp cận trong JSX, nhưng không kiểm thử bất kỳ kết quả 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 trình bao bọc React xung quanh công cụ kiểm thử axe-core của Deque Labs.

Cài đặt thư viện dưới dạng phần phụ thuộc cho quá trình 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'));
}

Trong trường hợp này, tính năng nhập động được dùng để chỉ tải thư viện khi thư viện không ở chế độ phát hành chính thức trước khi kết xuất và khởi động thành phần App gốc. Điều này đảm bảo rằng nội dung này không đượ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ẽ hiển thị trực tiếp trên bảng điều khiển Công cụ của Chrome cho nhà phát triển.

Phản ứng Axe trong Công cụ của Chrome cho nhà phát triển

Hệ thống cũng chỉ định một mức độ nghiêm trọng cho từng lỗi vi phạm. Các cấp độ này là:

  • Trẻ vị thành niên
  • Vừa phải
  • Nghiêm trọng
  • Nghiêm trọng

Kết luận

  1. Nếu bạn đang xây dựng một trang web bằng React, hãy sớm đưa việc kiểm tra khả năng hỗ trợ tiếp cận vào quy trình làm việc để phát hiện các vấn đề khi xây dựng các thành phần.
  2. Hãy sử dụng eslint-plugin-jsx-a11y để thêm quy trình kiểm tra khả năng hỗ trợ tiếp cận vào quy trình tìm lỗi mã nguồn. CRA đã đi kèm với tính năng này, nhưng hãy chuyển sang chế độ đề xuất hoặc chế độ nghiêm ngặt.
  3. Ngoài việc kiểm thử phát triển cục bộ, hãy đưa react-axe vào ứng dụng để phát hiện mọi vấn đề trên DOM cuối cùng được hiển thị. Đừng đưa nội dung này vào gói phát hành công khai.