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

Houssein Djirdeh

Trang web React của bạn phải có thể truy cập được thì mới có thể là trang web tăng tiến. Kiểm tra khả năng hỗ trợ tiếp cận trong quá trình phát triển để tìm và giải quyết mọi vấn đề trước khi đẩy ứng dụng vào giai đoạn phát hành công khai.

react-axe là một thư viện kiểm tra ứng dụng React và ghi lại mọi vấn đề về hỗ trợ tiếp cận vào bảng điều khiển Chrome DevTools. Công cụ 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 ngay trong JSX. Khi kết hợp với một công cụ kiểm tra DOM hiển thị cuối cùng, chẳng hạn như react-axe, bạn có thể tìm và khắc phục mọi vấn đề về khả năng hỗ trợ tiếp cận trên trang web của mình.

Tại sao thông tin này hữu ích?

Điều quan trọng là bạn phải xây dựng trang web mà tất cả người dùng đều có thể truy cập, bao gồm cả những người dùng bị khuyết tật. Bằng cách sử dụng thư viện kiểm tra chức năng hỗ trợ tiếp cận, chẳng hạn như react-axe và eslint-plugin-jsx-a11y, bạn có thể tìm thấy các vấn đề về chức năng hỗ trợ tiếp cận khi xây dựng ứng dụng, nhờ đó có thể khắc phục các vấn đề đó trước khi phát hành công khai.

Sử dụng eslint-plugin-jsx-a11y

React đã hỗ trợ việc viết các phần tử HTML hỗ trợ tiếp cận trong cú pháp JSX. Ví dụ: sử dụng thuộc tính htmlFor thay vì for để thêm nhãn vào phần tử biểu mẫu 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 của React trình bày các sắc thái của việc xử lý các vấn đề về hỗ trợ tiếp cận trong một thành phần React. Để dễ dàng phát hiện các vấn đề này hơn, Create React App (CRA) bao gồm trình bổ trợ eslint-plugin-jsx-a11y.

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 cho trình soạn thảo mã.
  2. Thêm tệp .eslintrc.json vào dự án
{
  "extends": "react-app"
}

Sau khi định cấu hình, bạn có thể tìm thấy các vấn đề thường gặp về hỗ trợ tiếp cận.

Cảnh báo về khả năng hỗ trợ tiếp cận của hình ảnh trong trình tìm lỗi mã nguồn

Để kiểm tra thêm các quy tắc hỗ trợ tiếp cận, hãy sửa đổi .eslintrc.json để bao gồm tất cả các quy tắc được đề xuất của trình bổ trợ:

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

Để 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 nhãn trong trình tìm lỗi mã nguồn

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.

Sử dụng react-axe

eslint-plugin-jsx-a11y có thể giúp bạn tìm thấy 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. Thư viện react-axe tiến hành kiểm thử bằng cách thêm trình bao bọc React xung quanh công cụ kiểm thử axe-core của Deque Labs.

  1. Cài đặt thư viện làm phần phụ thuộc phát triển: bash npm install --save-dev react-axe
  2. Khởi chạy mô-đun trong index.js: 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')); }

Thao tác nhập động sẽ tải thư viện, miễn là thư viện đó không ở trạng thái 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 tệp này không được đưa vào gói phát hành chính thức nếu không cần thiết.

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 trên bảng điều khiển Chrome DevTools.

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

Mỗi lỗi vi phạm cũng được chỉ định một mức độ nghiêm trọng. 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

Hãy đưa quy trình kiểm tra khả năng hỗ trợ tiếp cận vào quy trình làm việc ngay từ đầu để phát hiện các vấn đề khi bạn xây dựng ứng dụng React.Sử 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 quy trình tìm lỗi mã nguồn. CRA đã bao gồm tính năng này, nhưng bạn có thể chuyển sang chế độ được đề xuất hoặc nghiêm ngặt.

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 hiển thị cuối cùng. Đừng đưa tệp này vào gói phát hành công khai.