Bạn muốn trang web Angular của mình hỗ trợ tiếp cận cho mọi người? Đây chính là nơi bạn cần đến!
Khi làm cho ứng dụng của bạn dễ tiếp cận, tất cả người dùng, bao gồm 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 ứng dụng. 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 hỗ trợ tiếp cận là ưu tiên hàng đầu đố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 tính năng kiểm tra khả năng hỗ trợ tiếp cận của codelyzer vào quy trình xây dựng cho ứng dụng Angular. Phương pháp này cho phép bạn phát hiện lỗi về khả năng hỗ trợ tiếp cận ngay trong trình soạn thảo văn bản khi lập trình.
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 tìm lỗi mã nguồn 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 Angular (CLI) 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í về khả năng hỗ trợ tiếp cận. Để tìm hiểu về các quy trình kiểm tra hỗ trợ tiếp cận mà codelyzer cung cấp và lý do của các quy trình này, hãy xem bài viết Quy tắc hỗ trợ tiếp cận mới trong Codelyzer.
Hiện tại, tất cả quy tắc hỗ trợ tiếp cận đều đang trong giai đoạn 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 các quy tắc đó 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ả trình chỉnh sửa văn bản và IDE phổ biến. Để sử dụng công cụ này 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 tính năng kiểm tra chức năng hỗ trợ tiếp cận của codelyzer, bạn sẽ thấy một cửa sổ bật lên cho thấy các lỗi về chức năng hỗ trợ tiếp cận trong các tệp TypeScript hoặc mẫu cùng dòng khi bạn lập trình:
Để 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ể sử dụng để thực thi các phương pháp hỗ trợ tiếp cận trong ứng dụng Angular. Điểm khác biệt chính giữa codelyzer và Lighthouse là thời điểm thực hiện các bước kiểm tra. 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 phản hồi trực tiếp trong trình soạn thảo 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 nhiều 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ó mức độ phù hợp cao hơn dựa trên các bước kiểm tra mà công cụ này thực hiện, trong khi trình mã hoá cho phép bạn lặp lại nhanh hơn bằng cách nhận phản hồi liên tục trong trình chỉnh sửa văn bản.
Thực thi quy trình 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 tính năng kiểm tra chức 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 tuyệt vời 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 vẫn 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 bộ mã hoá.
- Thực hiện tìm lỗi mã nguồn 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ề hỗ trợ tiếp cận do bộ mã hoá 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.