Bạn muốn giúp mọi người dễ dàng truy cập vào trang web Angular của mình? Đây chính là nơi bạn cần đến!
Khi ứng dụng của bạn hỗ trợ tiếp cận, tức là tất cả người dùng (kể cả những người có nhu cầu đặc biệt) đều có thể sử dụng và hiểu được nội dung. Theo Báo cáo Y tế Thế giới, hơn một tỷ người (khoảng 15% dân số thế giới) mắc một dạng khuyết tật nào đó. Vì vậy, khả năng tiếp cận là một ưu tiên đối với mọi dự án phát triển.
Trong bài đăng này, bạn sẽ tìm hiểu cách thêm các quy trình kiểm tra khả năng hỗ trợ tiếp cận của codelyzer vào quy trình tạo cho một ứng dụng Angular. Phương pháp này cho phép bạn phát hiện các lỗi về khả năng hỗ trợ tiếp cận ngay trong trình chỉnh sửa văn bản khi bạn viết mã.
Sử dụng codelyzer để phát hiện các phần tử không truy cập được
codelyzer là một công cụ nằm trên TSLint và kiểm tra xem các dự án Angular TypeScript có tuân theo một bộ quy tắc linting hay không. Theo mặc định, các dự án được thiết lập bằng giao diện dòng lệnh (CLI) Angular sẽ bao gồm codelyzer.
codelyzer có hơn 50 quy tắc để kiểm tra xem một ứng dụng Angular có tuân thủ các phương pháp hay nhất hay không. Trong số đó, có khoảng 10 quy tắc để thực thi các tiêu chí hỗ trợ tiếp cận. Để tìm hiểu về nhiều quy trình kiểm tra hỗ trợ tiếp cận do codelyzer cung cấp và lý do của các quy trình này, hãy xem bài viết Các quy tắc mới về hỗ trợ tiếp cận trong Codelyzer.
Hiện tại, tất cả các quy tắc hỗ trợ tiếp cận đều là thử nghiệm và bị tắt theo mặc định. Bạn có thể bật các quy tắc này bằng cách thêm chúng vào tệp cấu hình TSLint (tslint.json):
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
TSLint hoạt động với tất cả các trình chỉnh sửa văn bản và IDE phổ biến. Để sử dụng với VSCode, hãy cài đặt trình bổ trợ TSLint. Trong WebStorm, TSLint được bật theo mặc định. Đối với các trình chỉnh sửa khác, hãy xem README của TSLint.
Khi thiết lập các chế độ kiểm tra hỗ trợ tiếp cận của codelyzer, bạn sẽ thấy một cửa sổ bật lên cho biết các lỗi hỗ trợ tiếp cận trong tệp TypeScript hoặc mẫu nội tuyến khi bạn viết mã: