Accessibility cho website: checklist WCAG thực hành
Rà khả năng đọc và thao tác website qua contrast, bàn phím, nhãn form, nội dung ảnh, zoom và giảm chuyển động theo WCAG.
Cập nhật: · Minh họa được tạo bằng AI
Accessibility là khả năng người có các nhu cầu khác nhau vẫn đọc và thao tác được website. Nó không chỉ phục vụ một nhóm người dùng đặc biệt. Chữ dễ đọc, focus nhìn thấy và form có lỗi rõ ràng cũng giúp người dùng điện thoại, người ở ngoài trời và người không tiện dùng chuột.
WCAG là bộ hướng dẫn với các tiêu chí cụ thể, không phải một con số lấy từ công cụ tự động. Checklist dưới đây là cách rà thực hành cho website doanh nghiệp; nó không thay cho đánh giá đầy đủ hoặc xác nhận tuân thủ. Mỗi lỗi cần được nối với một tác vụ thực tế và điều kiện kiểm tra.
1. Đọc tiêu chí đúng phiên bản và mức độ
Xác định bộ tiêu chí đang dùng, ví dụ WCAG 2.2 mức AA, và phạm vi trang hoặc luồng. W3C Quick Reference cho phép tra từng tiêu chí cùng điều kiện và kỹ thuật liên quan. Không đánh đồng lời khuyên thiết kế với yêu cầu bắt buộc của một tiêu chí, hoặc coi một phần kiểm được là cả website đạt chuẩn.
Lập danh sách template, thành phần chung và tác vụ: đọc bài, mở menu, tìm sản phẩm, điền form. Thành phần được dùng nhiều nơi như navigation cần kiểm riêng vì một lỗi có thể ảnh hưởng toàn bộ website. Khi báo cáo, ghi lỗi quan sát được, tiêu chí liên quan và mức độ ảnh hưởng.
2. Kiểm contrast và nội dung khi phóng to
Đo contrast giữa chữ và nền thực tế, gồm chữ trên ảnh, placeholder, nút, link và trạng thái disabled có điều kiện riêng. Các ngưỡng thường gặp của tiêu chí contrast tối thiểu là 4,5:1 cho chữ thường và 3:1 cho chữ lớn, nhưng cần kiểm định nghĩa chữ lớn và ngoại lệ trong tiêu chí. Một màu thương hiệu dùng tốt cho mảng nền chưa chắc tốt cho chữ nhỏ.
Thử phóng to chữ và zoom trình duyệt, sau đó hoàn thành cùng tác vụ. Không chỉ chụp trang đầu: xem form, bảng, submenu và vùng sticky. Nếu cắt chữ hoặc chồng nút, sửa layout thay vì khóa zoom. Với bảng dài, cho cuộn vùng bảng có hướng dẫn phù hợp, tránh kéo tràn cả trang.
3. Dùng bàn phím để kiểm chức năng
Đi từ đầu trang bằng Tab và Shift+Tab. Focus cần có thứ tự hợp lý và nhìn thấy được; Enter hoặc Space phải hoạt động theo đúng loại điều khiển. Không để một menu chỉ mở bằng hover hoặc một card chỉ click bằng chuột. Thêm đường bỏ qua navigation dài nếu cần, rồi kiểm đích focus thực tế.
Dialog, drawer và accordion cần kiểm theo mô hình tương tác đã chọn. Khi đóng một dialog, focus thường phải trở lại nơi mở nó; khi mở navigation không modal, đừng giam người dùng một cách vô cớ. WAI-ARIA Authoring Practices giúp tra pattern. ARIA không sửa được một tương tác sai nếu cấu trúc và hành vi cơ bản vẫn hỏng.
4. Nối nhãn, ảnh và thông báo với nhiệm vụ
Ảnh có thông tin cần mô tả phần thông tin đó; ảnh trang trí có thể dùng alt rỗng. Với thumbnail có tiêu đề liên kết ngay cạnh, tránh biến cùng một bài thành hai link gây lặp khi dùng trình đọc màn hình. Nếu ảnh là bằng chứng về sản phẩm, không dùng alt như một chỗ nhét từ khóa.
Form cần label, hướng dẫn, trường bắt buộc và thông báo lỗi có liên hệ với input. Thông báo cập nhật như số kết quả tìm kiếm cần cân nhắc vùng live để người dùng không phải tự đoán điều đã thay đổi. Nhưng không đưa mọi thay đổi nhỏ thành thông báo liên tục. Xem UX form liên hệ để kiểm trọn đường nhập và sửa lỗi.
5. Giảm chuyển động mà vẫn giữ chức năng
Người chọn giảm chuyển động vẫn cần xem nội dung, mở menu và đọc thông báo. Thay một chuyển động lớn bằng thay đổi trạng thái trực tiếp; không ẩn cả thành phần. Các vòng lặp trang trí, parallax và hiệu ứng chữ cần được kiểm ở chế độ giảm chuyển động. Nội dung chính không nên phụ thuộc một animation chạy xong mới xuất hiện.
Ngoài ra, kiểm trang khi JavaScript chậm hoặc lỗi. HTML ngữ nghĩa và nội dung server render giúp người đọc tiếp cận thông tin sớm. Đừng để một hiệu ứng reveal áp opacity 0 vĩnh viễn khi script không chạy. Nâng thẩm mỹ phải đi cùng phương án đọc được.
6. Kết hợp công cụ và kiểm thủ công
Công cụ tự động giúp tìm thiếu nhãn, một số lỗi contrast và cấu trúc. Nó không biết toàn bộ mô tả ảnh có đúng, thứ tự đọc có hợp lý hay người dùng có hoàn thành được checkout. Dùng kết quả để chọn chỗ kiểm tiếp, không để thay cho đánh giá bằng người.
Báo cáo nên ghi mẫu trang, thiết bị, zoom, bàn phím, trình đọc màn hình nếu có và những phần chưa kiểm. Ưu tiên lỗi chặn tác vụ, rồi các thành phần lặp trên nhiều trang. Sau sửa, lặp lại đường đi đã lỗi và kiểm hồi quy quanh nó. Một checklist có bằng chứng như vậy hữu ích hơn câu tuyên bố ‘100% accessible’ không có phạm vi.
Câu hỏi thường gặp
Điểm accessibility cao có nghĩa là đạt WCAG?
Không. Điểm từ công cụ là kết quả của tập quy tắc và mẫu kiểm nhất định. Tuân thủ cần đánh giá tiêu chí trong phạm vi đầy đủ, bao gồm các bước thủ công không nằm trong điểm số.
Nguồn tham khảo và đọc tiếp
Bạn cần áp dụng vào website hiện tại? Xem dịch vụ website hoặc trao đổi với Dean Vu để xác định phạm vi dựa trên website và dữ liệu thực tế.