Hiểu báo cáo kiểm toán accessibility của Lighthouse

[Nhật Quang]

Kiểm thử khả năng truy cập (accessibility) là bước quan trọng khi phát triển web. Bài viết hướng dẫn cách dùng Google Lighthouse để tạo và giải thích báo cáo accessibility, giúp bạn cải thiện trải nghiệm cho mọi đối tượng người dùng.

Lighthouse là gì?​

Lighthouse là công cụ mã nguồn mở của Google dùng để phân tích chất lượng trang web theo nhiều khía cạnh: hiệu năng, accessibility, SEO, best practices và progressive web app. Công cụ chạy các quy tắc chuẩn và tính điểm tổng thể từ 0 đến 100 để phản ánh mức độ tuân thủ.

Cách Lighthouse đánh giá accessibility​

Lighthouse dùng thư viện axe-core để tạo điểm accessibility. Nó liệt kê các quy tắc đã đạt và chưa đạt, đồng thời chỉ ra các thành phần trên trang vi phạm tiêu chuẩn. Mỗi kiểm toán được gán điểm phụ và điểm tổng hợp được tính bằng cách gán trọng số cho các điểm phụ này.

Chạy kiểm tra trong Chrome​

Mở trang web cần phân tích, nhấp chuột phải và chọn Inspect để mở Chrome DevTools. Trong DevTools, chuyển sang tab Lighthouse và chọn mục Accessibility, sau đó chọn loại thiết bị mô phỏng và nhấn Generate report để chạy phân tích.

Chạy kiểm tra trong Firefox và Extension​

Bạn có thể cài đặt Lighthouse như extension nếu dùng Firefox hoặc muốn tiện lợi hơn. Lưu ý extension của Google chạy bài kiểm tra trên máy chủ Google, nên không thể kiểm tra các trang nằm sau cơ chế xác thực nội bộ.

Đọc báo cáo accessibility​

Báo cáo hiển thị điểm accessibility và chia kiểm toán thành các mục Passed audits và Failed audits. Các kiểm toán bị lỗi được phân loại theo nhóm như tương phản màu, điều hướng, biểu mẫu, v.v. Khi nhấn vào từng kiểm toán bị hỏng, bạn sẽ thấy giải thích vì sao điều đó quan trọng, liên kết tham khảo và ảnh chụp màn hình kèm đoạn mã gây lỗi để dễ sửa.

Ví dụ về kiểm tra tương phản màu​

Kiểm toán về tương phản kiểm tra xem văn bản có đủ tương phản so với màu nền theo mức WCAG hay không. Lighthouse so sánh màu chữ và màu nền để xác nhận có đạt tỷ lệ tương phản tối thiểu hay không.

Mục kiểm tra cần làm bằng tay​

Báo cáo cũng liệt kê những mục cần kiểm tra thủ công mà Lighthouse không tự động được. Những mục này không ảnh hưởng điểm số nhưng rất quan trọng để đảm bảo trải nghiệm người dùng thực tế.

Mục không áp dụng và trọng số điểm​

Một số kiểm toán có thể hiển thị là Not Applicable nếu trang của bạn không sử dụng các phần tử HTML tương ứng. Các kiểm toán này không ảnh hưởng điểm tổng, nhưng điểm tổng có thể thay đổi nếu một kiểm toán trước đó chuyển từ áp dụng sang không áp dụng. Lighthouse gán trọng số cho từng kiểm toán, vì vậy kiểm toán có trọng số cao sẽ ảnh hưởng nhiều hơn đến điểm tổng.

Hạn chế và cần kiểm tra thủ công thêm​

Lighthouse là công cụ hữu ích để phát hiện nhiều vấn đề giao diện phổ biến, nhưng không thể tìm hết mọi lỗi về accessibility. Để đảm bảo đầy đủ, cần kết hợp kiểm tra thủ công, dùng trình đọc màn hình, kiểm tra bàn phím và thử nghiệm với người dùng thật.

Theo dõi điểm accessibility theo thời gian​

Bạn có thể dùng các dịch vụ giám sát để theo dõi điểm Lighthouse Accessibility theo thời gian, nhận cảnh báo khi điểm giảm và dễ dàng xác định kiểm toán gây suy giảm để sửa kịp thời.

Kết luận​

Lighthouse cung cấp báo cáo chi tiết giúp bạn hiểu rõ các vấn đề accessibility và ưu tiên sửa chữa. Kết hợp phân tích tự động với kiểm tra thủ công sẽ giúp trang web trở nên thân thiện hơn với mọi người dùng.

Nguồn: https://www.debugbear.com/blog/lighthouse-accessibility