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ã:
Để thực hiện tìm lỗi mã nguồn trên toàn bộ dự án (bao gồm cả các mẫu bên ngoài), hãy sử dụng lệnh ng lint:
Bổ sung codelyzer
Lighthouse là một công cụ khác mà bạn có thể dùng để thực thi các phương pháp hỗ trợ tiếp cận trong ứng dụng Angular của mình. Điểm khác biệt chính giữa codelyzer và Lighthouse là thời điểm các quy trình kiểm tra được thực hiện. Codelyzer phân tích tĩnh ứng dụng tại thời điểm phát triển mà không cần chạy ứng dụng. Điều này có nghĩa là trong quá trình phát triển, bạn có thể nhận được ý kiến phản hồi trực tiếp trong trình chỉnh sửa văn bản hoặc trong thiết bị đầu cuối. Ngược lại, Lighthouse thực sự chạy ứng dụng của bạn và thực hiện một loạt các bước kiểm tra bằng cách sử dụng tính năng phân tích động.
Cả hai công cụ này đều có thể là những phần hữu ích trong quy trình phát triển của bạn. Lighthouse có phạm vi kiểm tra rộng hơn, trong khi codelyzer cho phép bạn lặp lại nhanh hơn bằng cách nhận được phản hồi liên tục trong trình soạn thảo văn bản.
Thực thi các bước kiểm tra khả năng hỗ trợ tiếp cận trong quá trình tích hợp liên tục
Việc giới thiệu các quy trình kiểm tra khả năng hỗ trợ tiếp cận tĩnh trong quy trình tích hợp liên tục (CI) có thể là một điểm cải tiến lớn cho quy trình phát triển của bạn. Với codelyzer, bạn có thể dễ dàng thực thi một số quy tắc hỗ trợ tiếp cận hoặc các phương pháp khác bằng cách chạy ng lint trên mỗi lần sửa đổi mã (ví dụ: cho mỗi yêu cầu kéo mới).
Bằng cách này, ngay cả trước khi bạn tiến hành xem xét mã, CI có thể cho bạn biết liệu có lỗi vi phạm nào về khả năng hỗ trợ tiếp cận hay không.
Kết luận
Cách cải thiện khả năng hỗ trợ tiếp cận của ứng dụng Angular:
- Bật các quy tắc hỗ trợ tiếp cận thử nghiệm trong codelyzer.
- Thực hiện linting khả năng hỗ trợ tiếp cận trên toàn bộ dự án bằng Angular CLI.
- Khắc phục tất cả vấn đề về khả năng tiếp cận do codelyzer báo cáo.
- Cân nhắc sử dụng Lighthouse để kiểm tra khả năng hỗ trợ tiếp cận trong thời gian chạy.