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 là vị trí phù hợp!
Việc cung cấp ứng dụng dễ tiếp cận có nghĩa là 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 ứng dụng và hiểu được nội dung của ứ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 trong 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 bước kiểm tra khả năng hỗ trợ tiếp cận của codelyzer vào quy trình xây dựng ứng dụng Angular. Phương pháp này cho phép bạn phát hiện các lỗi hỗ trợ tiếp cận ngay trong trình chỉnh sửa văn bản khi lập trình.
Sử dụng trình phân tích mã để phát hiện các phần tử không thể truy cập
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 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 trình phân tích mã.
codelyzer có hơn 50 quy tắc để kiểm tra xem một ứng dụng Angular có tuân theo 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ề các quy trình kiểm tra khả năng hỗ trợ tiếp cận do trình lập trình cung cấp và lý do dẫn đến việc 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 đang trong giai đoạn thử nghiệm và bị tắt theo mặc định. Bạn có thể bật chúng 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 tương thích với tất 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 tệp README của TSLint.
Sau khi thiết lập các bước kiểm tra khả 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 hiển thị lỗi hỗ trợ tiếp cận trong các tệp TypeScript hoặc mẫu cùng dòng khi bạn viết mã:
Để 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 trình phân tích mã
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 ứng dụng tĩnh 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 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 kiểm tra bằng cách sử dụng phân tích động.
Cả hai công cụ đề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 độ bao phủ cao hơn nhờ các bước kiểm tra được thực hiện, trong khi trình lập trình 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 việ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 triển khai tính năng kiểm tra khả năng hỗ trợ tiếp cận tĩnh trong quá 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 trình phân tích mã, 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 lấy dữ liệu 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ải thiện khả năng hỗ trợ tiếp cận của ứng dụng Angular, hãy làm như sau:
- Bật các quy tắc hỗ trợ tiếp cận thử nghiệm trong trình phân tích mã.
- Dùng Angular CLI để tìm lỗi mã nguồn hỗ trợ tiếp cận trên toàn bộ dự án.
- Khắc phục tất cả vấn đề về hỗ trợ tiếp cận do trình phân tích mã báo cáo.
- Hãy 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.