WCAG 2.2 cho website doanh nghiệp và lộ trình 90 ngày

Áp dụng WCAG cho website giúp nhiều người có thể đọc nội dung, điều hướng và hoàn thành các thao tác như gửi liên hệ hay đặt hàng. Hãy bắt đầu bằng một nhiệm vụ thực tế. Thử mở trang dịch vụ, điền biểu mẫu và gửi chỉ bằng bàn phím. Nếu focus biến mất, bị kẹt trong hộp thoại hoặc thông báo lỗi không được đọc, hãy ưu tiên sửa luồng đó.

1. WCAG, SEO và khả năng hiển thị trên AI Search

WCAG (Web Content Accessibility Guidelines) là hướng dẫn của W3C về khả năng tiếp cận nội dung web. Với website doanh nghiệp, có thể chọn WCAG 2.2 mức AA làm mục tiêu kỹ thuật. Mức AA bao gồm các tiêu chí mức A và AA áp dụng cho phạm vi đánh giá.

Heading rõ nghĩa, liên kết có ngữ cảnh và văn bản thay thế cho ảnh giúp người dùng hiểu nội dung, đồng thời giúp công cụ tìm kiếm diễn giải trang. Với AEO/GEO, phần giải thích bằng văn bản và transcript có thể giúp thông tin dễ tìm hơn. Google áp dụng các nền tảng SEO hiện có cho tính năng AI trong Search. Hãy đánh giá trợ năng bằng tiêu chí WCAG và đo khả năng hiển thị tìm kiếm, trích dẫn AI bằng các chỉ số riêng.

Tiêu chuẩn WCAG 2.2 của W3C · Hướng dẫn của Google về tính năng AI trong Search

2. Checklist triển khai theo nhóm

Nội dung

• Viết alt theo vai trò của ảnh. Mô tả ý nghĩa với ảnh cung cấp thông tin, dùng alt rỗng cho ảnh thuần trang trí và mô tả hành động hoặc đích đến nếu ảnh là nội dung duy nhất của nút hoặc liên kết.
• Rà soát phụ đề đồng bộ cho video có âm thanh, kể cả lời thoại và âm thanh cần thiết để hiểu nội dung. Dùng transcript để bổ sung bản đọc và đánh giá nhu cầu mô tả âm thanh cho thông tin quan trọng chỉ xuất hiện qua hình ảnh.
• Dùng tiêu đề trang rõ ràng, phân cấp heading theo nội dung và viết anchor text có nghĩa trong ngữ cảnh.

Thiết kế và front-end

• Ưu tiên HTML gốc. Dùng liên kết để điều hướng và nút để thực hiện hành động. Dùng landmark phù hợp, liên kết bỏ qua phần điều hướng lặp lại và khai báo ngôn ngữ trang.
• Kiểm tra thứ tự Tab và Shift+Tab, khả năng kích hoạt bằng phím phù hợp, dấu hiệu focus rõ ràng và focus không bị che hoàn toàn bởi thanh cố định. Kiểm tra luồng vào, thoát và trả focus của hộp thoại.
• Gắn nhãn cho từng trường nhập, chỉ rõ trường bắt buộc, liên kết thông báo lỗi với trường tương ứng và kiểm tra việc công bố trạng thái động bằng trình đọc màn hình.
• Đạt độ tương phản tối thiểu 4,5:1 cho chữ thông thường và 3:1 cho chữ lớn theo định nghĩa WCAG, với các ngoại lệ áp dụng. Dùng chữ hoặc biểu tượng kèm theo khi màu biểu thị lỗi hay trạng thái.
• Kiểm tra phóng to, bố cục trên màn hình hẹp và kích thước vùng tương tác. Với tiêu chí WCAG 2.2 về kích thước mục tiêu tối thiểu, kiểm tra mốc 24 × 24 CSS pixel và các ngoại lệ, bao gồm quy tắc khoảng cách.

DevOps và QA

• Thêm kiểm tra tự động bằng axe-core hoặc công cụ tương đương trên các mẫu trang chính. Chặn lỗi mới theo mức độ nghiêm trọng đã thống nhất. Kiểm thử thủ công những hành vi cần phán đoán, như thứ tự focus hoặc chất lượng alt.
• Kiểm tra nội dung chính và liên kết trong HTML đã render. Theo dõi mã HTTP, robots.txt, sitemap và dữ liệu có cấu trúc trong checklist SEO riêng. Xem xét render phía máy chủ nếu kiểm thử cho thấy nội dung chính khó truy cập.
• Dùng bàn phím, trình đọc màn hình trên desktop và mobile. Mời người dùng có nhu cầu tiếp cận khác nhau thử những nhiệm vụ thật như tìm thông tin, gửi biểu mẫu và sửa lỗi nhập liệu.

3. Ví dụ nhãn biểu mẫu và thông báo trạng thái

<label for="contact-email">Email (bắt buộc)</label>
<input id="contact-email" name="email" type="email"
       autocomplete="email" required>
<p id="contact-status" role="status"></p>

Đặt vùng trạng thái trong DOM trước khi cập nhật nội dung. Sau khi máy chủ xác nhận gửi thành công, cập nhật thông báo tại đó. Nếu trường bị lỗi, hiển thị lý do và cách sửa, liên kết thông báo với trường bằng aria-describedby và cập nhật aria-invalid theo trạng thái thực tế. Mẫu trên minh họa HTML. Phần gửi và xử lý lỗi cần được nối với biểu mẫu thực tế.

4. Lộ trình triển khai 90 ngày

5. Nghiệm thu và theo dõi sau triển khai

• Trợ năng. Theo dõi lỗi theo tiêu chí WCAG, thành phần và mức ảnh hưởng tới tác vụ. Ghi kết quả kiểm thử tự động, thủ công và phạm vi đánh giá. Kết luận về mức đáp ứng cần dựa trên đánh giá các tiêu chí áp dụng, bao gồm các bước thuộc cùng một quy trình.
• Khả năng hoàn thành tác vụ. Tính tỷ lệ hoàn thành trên tổng số lượt thử và ghi lại lỗi gây bỏ cuộc. Giữ cùng kịch bản khi so sánh trước và sau.
• Chuyển đổi và tìm kiếm. Theo dõi gửi form, mua hàng, lượt hiển thị và lượt nhấp tự nhiên trên nhóm URL đã sửa. Ghi nhận các thay đổi đồng thời như khuyến mãi, nội dung và mùa vụ trước khi quy kết nguyên nhân.
• AI Search. Nếu theo dõi trích dẫn, dùng cùng nhóm câu hỏi, ghi nền tảng, thời điểm và URL được dẫn. Báo cáo kết quả theo mẫu quan sát.

Hướng dẫn đánh giá khả năng tiếp cận của W3C