Kiểm tra trợ năng & mẫu ARIA
Tìm các lỗi trợ năng (accessibility) trong HTML theo WCAG 2.2, xem từng lỗi được khoanh vùng trên bản xem trước an toàn, sao chép các mẫu component ARIA đã vượt qua kiểm tra và rà soát checklist mức A/AA. Hãy dùng công cụ khi đang dựng trang, trước khi phát hành, hoặc bất cứ khi nào có người hỏi "trang này đã dễ tiếp cận chưa?" và bạn cần một danh sách việc cần sửa cụ thể.
Các bước sử dụng
- Ở tab Kiểm tra HTML, dán cả trang hoặc một đoạn HTML bất kỳ vào ô HTML cần kiểm tra. Bạn cũng có thể mở hoặc kéo thả tệp
.html, hoặc chọn Trang có lỗi trong menu mẫu để xem công cụ hoạt động thế nào. - Xem phần Tổng quan: số Lỗi, Cảnh báo, Lưu ý và số quy tắc đã đạt (Quy tắc đạt). Nhãn màu xanh nghĩa là nội dung được kiểm tra như một trang đầy đủ; nhãn màu vàng nghĩa là nội dung giống một đoạn HTML nên các kiểm tra cấp trang (
lang,<title>,h1,<main>) đã được bỏ qua. - Trong danh sách lỗi, thu hẹp kết quả bằng bộ lọc mức độ, menu Tất cả nhóm quy tắc và ô tìm kiếm. Mở một quy tắc để xem Cách sửa, tiêu chí WCAG tương ứng (mỗi tiêu chí có liên kết tới trang "Understanding" của W3C) cùng mọi phần tử vi phạm kèm CSS selector và mã HTML.
- Bấm Xem trong bản xem trước ở một lỗi. Phần tử sẽ được viền đỏ trong khung Xem trước & tô sáng; giữ Cuộn tới phần tử bật để khung luôn ở vị trí phần tử đó, hoặc tắt đi để tự cuộn bản xem trước.
- Dùng Xuất báo cáo để tải các lỗi đang hiển thị dưới dạng Markdown, JSON hoặc CSV, hoặc Sao chép Markdown để dán báo cáo thẳng vào ticket.
- Chuyển sang tab Mẫu ARIA và chọn một Mẫu — hộp thoại modal, tab, accordion, nút menu, combobox, công tắc, liên kết bỏ qua và nhiều mẫu khác. Bấm Sao chép tất cả hoặc sao chép riêng từng khối HTML, CSS, JavaScript. Bảng Thao tác bàn phím liệt kê các phím mà component phải hỗ trợ, còn Kiểm tra HTML này gửi đoạn mã sang tab kiểm tra.
- Ở tab Checklist WCAG, chọn Mức A hoặc Mức A + AA rồi đánh dấu từng tiêu chí khi rà soát xong. Tiêu chí có nhãn Tự động đã được các quy tắc tự động kiểm tra một phần. Tải .md xuất checklist kèm các dấu tích, còn Đặt lại xóa toàn bộ dấu tích.
Mẹo
- Nên dán toàn bộ mã nguồn trang (bắt đầu từ
<!DOCTYPE html>) — các quy tắc về ngôn ngữ, tiêu đề,h1và landmark main chỉ chạy khi có cả tài liệu. - Độ tương phản chỉ được tính cho phần tử có
styleinline khai báo cả màu chữ lẫn màu nền. Màu lấy từ stylesheet hoặc biến CSS sẽ bị bỏ qua và phần tổng quan cho biết đã bỏ qua bao nhiêu phần tử; hãy kiểm tra các cặp màu đó bằng công cụ Kiểm tra độ tương phản. - Nội dung do JavaScript tạo ra không có trong mã nguồn trang. Với ứng dụng một trang (SPA), hãy sao chép DOM đã hiển thị từ DevTools của trình duyệt (chuột phải vào
<html>→ Copy → Copy outerHTML) rồi dán vào. - Sửa lỗi trước, sau đó tới cảnh báo. Các lưu ý — như bảng thiếu caption hay trường thiếu
autocomplete— là cải thiện đáng làm nhưng hiếm khi chặn hẳn người dùng. - Các mẫu ARIA đều vượt qua chính công cụ này, nhưng HTML gốc (
<button>,<dialog>,<details>,<select>) vẫn là lựa chọn tốt hơn khi đáp ứng được nhu cầu.
Câu hỏi thường gặp
HTML của tôi có bị tải lên hay chạy ở đâu không?
Không. Việc phân tích, kiểm tra và xuất báo cáo đều diễn ra ngay trên trang. Script trong HTML đã dán không bao giờ chạy: công cụ chỉ đọc mã, còn bản xem trước loại bỏ script và trình xử lý sự kiện rồi hiển thị phần còn lại trong sandbox không có quyền chạy script. Ảnh hoặc stylesheet dùng URL tuyệt đối vẫn có thể được tải trong bản xem trước, giống như khi mở trong trình duyệt.
Công cụ này có thay thế việc kiểm tra bằng trình đọc màn hình không?
Không. Quy tắc tự động chỉ phát hiện được một phần WCAG — thiếu tên truy cập, tham chiếu hỏng, ARIA sai và các lỗi ở mức mã tương tự. Alt có thật sự có ý nghĩa không, thứ tự tiêu điểm có hợp lý không, hay một component tùy biến có thật sự dùng được với NVDA, JAWS, VoiceOver hoặc TalkBack không thì cần con người đánh giá. Hãy coi kết quả là bước rà soát đầu tiên, sau đó kiểm tra bằng bàn phím, trình đọc màn hình và đi hết Checklist WCAG.
Vì sao kết quả khác với axe hoặc Lighthouse?
Các công cụ đó kiểm tra trang đang chạy thật, gồm cả style đã tính toán và bố cục, nên đánh giá được độ tương phản từ stylesheet, trạng thái hiển thị và kích thước vùng bấm. Công cụ này chỉ làm việc với mã nguồn HTML, nhờ vậy nhanh và riêng tư nhưng không thấy được tệp CSS hay nội dung do JavaScript tạo ra. Cách diễn đạt và mức độ cũng khác nhau giữa các công cụ; mỗi lỗi ở đây đều ghi rõ tiêu chí WCAG để bạn đối chiếu.
Vì sao kết quả không có kiểm tra ngôn ngữ, tiêu đề và h1?
Nội dung bạn dán giống một đoạn HTML — không bắt đầu bằng <!DOCTYPE html> hoặc <html> và không có <head> hay <body> — nên các quy tắc cấp trang được bỏ qua để tránh báo lỗi sai. Hãy dán cả tài liệu để chạy các quy tắc này.