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 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 đề.

Houssein Djirdeh

Lưu ý: Nếu bạn muốn tìm hiểu các khái niệm cơ bản đằng sau tính năng hỗ trợ tiếp cận trong các trang web, trước tiên hãy tham khảo hướng dẫn Hỗ trợ tiếp cận là gì.

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:

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ưu ý: Bạn có thể xem thêm thông tin chi tiết về cách định cấu hình trình chỉnh sửa để hỗ trợ tìm lỗi mã nguồn ngay lập tức trong tài liệu về CRA.

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

Lưu ý: Nếu bạn muốn đưa hoạt động kiểm thử khả năng hỗ trợ tiếp cận vào quy trình kiểm thử đơn vị, hãy xem ví dụ về quá trình tích hợp Jest và rìu để nắm được cách thực hiện.

Kết luận

1. 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.
2. 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.
3. 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.