Thiết kế web accessible chuẩn WCAG: WCAG 2.2 thực chiến và trải nghiệm screen reader đáng tin
· Tác giả: Trường — Founder Webchốt
Liên quan: Bạn đang cần một website để bán hàng? Xem trọn bộ dịch vụ thiết kế web bán hàng.
Cuối tháng ba vừa rồi, một ngân hàng nhỏ ở Quận 1 gọi Webchốt lúc năm giờ chiều vì khách hàng khiếm thị không hoàn tất chuyển khoản trên web — focus kẹt trong modal OTP, screen reader đọc “button” trùng ba lần mà không biết nút nào xác nhận. Sau khi mở DevTools, đội phát hiện icon SVG trang trí không ẩn khỏi AT và `aria-live` phát spam khi validate từng ký tự. Đó là lý do thiết kế web accessible chuẩn WCAG không phải phụ lục cuối sprint mà phải nhúng vào design token, component library và CI. Bài viết này tóm tắt yêu cầu WCAG 2.2 mức AA thực tế cho site Việt Nam: contrast động, keyboard path, và checklist screen reader dùng NVDA miễn phí trên Windows.
Violations axe được nhóm theo severity để ưu tiên fix trước release | Nguồn: webchot.com
WCAG 2.2 và screen reader: semantic HTML là nền, ARIA là gia vị
WCAG 2.2 bổ sung tiêu chí như target size tối thiểu và focus appearance — các nút quan trọng trên mobile không được nhỏ hơn hai bốn pixel hoặc quá sát nhau nếu không có đủ khoảng đệm. Screen reader dựa vào landmark `
Ảnh minh hoạ cần `alt` mô tả ý nghĩa; trang trí thì `alt=""`. Video phải có phụ đề hoặc transcript khi mang thông tin. Biểu đồ Canvas/SVG nên có text mô tả ngắn bên dưới hoặc bảng dữ liệu ẩn cho AT — người khiếm thị không “nhìn” được đường xanh đỏ nhưng vẫn cần hiểu xu hướng.
Keyboard, focus order và skip link
Mọi flow phải hoàn thành bằng Tab/Shift+Tab; không được yêu cầu chuột hover để mở menu duy nhất. Skip to content giúp người dùng keyboard bỏ qua navigation dài. Mega menu cần pattern roving tabindex: chỉ một item nhận Tab, phần còn lại điều khiển bằng phím mũi tên — tránh cả trăm link ăn Tab khiến người dùng mất năm phút mới tới form. Khi dùng drawer mobile, đảm bảo focus không “rơi” ra ngoài document khi đóng bằng gesture — iOS VoiceOver đặc biệt nhạy với lỗi này. Thiết kế web accessible chuẩn WCAG cũng áp dụng cho widget chat nội bộ: nút mở chat phải có tên rõ “Mở hỗ trợ” chứ không chỉ icon bong bóng không nhãn.
- Điểm 1: Focus visible đủ contrast với nền sáng và tối.
- Điểm 2: Không đặt `tabindex` dương trừ khi thật sự cần — tránh thứ tự lộn xộn.
- Điểm 3: Modal đóng bằng Escape và trả focus về trigger.
- Điểm 4: Toast thông báo dùng `role=status` có kiểm soát debounce.
Bảng so sánh công cụ kiểm tra accessibility
Đội nhỏ chọn giữa axe DevTools, Lighthouse và kiểm thử thủ công — bảng dưới là khởi điểm.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Che phủ tự động | axe-core CI | Lighthouse CI | Kết hợp cả hai pipeline |
| Kiểm thử người | NVDA | VoiceOver | Cả hai nền tảng |
| Màu sắc | Contrast checker Figma | Polypane | Figma token + actual CSS |
| Biên độ fix | Ưu tiên blocker | Fix hết AAA | AA trước, AAA khi brand cho phép |
Sau bảng, ghi defect vào board với video ngắn tái hiện — tránh mô tả chữ rời rạc khó hiểu cho dev và QA offshore.
Quy trình audit accessibility với Webchốt
- Bước 1: Inventory route quan trọng — login, thanh toán, form liên hệ.
- Bước 2: Chạy axe trên staging kèm branch preview.
- Bước 3: Keyboard walkthrough ghi lại thứ tự focus.
- Bước 4: Screen reader scenario NVDA đọc heading và form error.
- Bước 5: Regression sau mỗi sprint UI — accessibility không phải một lần.
Kết quả là báo cáo PDF kèm effort point cho từng violation.
Phương án ngân sách và dịch vụ
Đầu tư thiết kế web accessible chuẩn WCAG ban đầu thường rẻ hơn xử lý khiếu nại hoặc mất hợp đồng B2B yêu cầu VPAT. Xem dịch vụ triển khai và bảng giá để chọn gói audit + fix. Đặt lịch tại liên hệ nếu cần demo checklist trước khi ký — mang theo URL staging giúp ước lượng nhanh. Tham khảo template Next.js đã tối ưu heading; hub công cụ có thể hỗ trợ kiểm tra màu nhanh khi làm landing.
Cam kết không chỉ “xanh Lighthouse” mà còn scenario người dùng thật. Với sản phẩm fintech, hãy dự trù thêm thời gian cho máy đọc OTP và luồng xác thực hai lớp — những màn hình này thường là thủ phạm focus trap nếu nhúng iframe ngân hàng; cần phối hợp vendor để họ cung cấp iframe có title và kích thước hợp lý hoặc chuyển sang deep link native app có phương án fallback web.
Sai lầm phổ biến khi làm WCAG
Bốn lỗi sau khiến audit fail dù đã cài plugin.
- Sai lầm 1: Dùng `div` click giả nút — thiếu role và keyboard.
- Sai lầm 2: Placeholder thay label — screen reader không đọc khi đã nhập.
- Sai lầm 3: Màu đỏ lỗi duy nhất không có icon/text kèm.
- Sai lầm 4: Carousel tự động không có nút pause.
FAQ — thiết kế web accessible chuẩn WCAG
Tiếng Việt có cần test riêng?
Có — độ dài từ và ngắt dòng khác English; kiểm tra `lang=vi` và font fallback khi dấu mất trên Windows cũ. Kiểm thử error message tiếng Việt có dấu đầy đủ trong ô nhập số điện thoại và căn cước.
PDF tài liệu pháp lý?
Cần tagged PDF hoặc HTML tương đương; không gửi scan ảnh không OCR cho khách hàng doanh nghiệp.
Third-party chat widget?
Kiểm tra iframe focus và ẩn khi đóng; một số widget phá thứ tự tab — cần lazy load sau nội dung chính.
Mobile zoom?
Không chặn zoom user; viewport meta không được `maximum-scale=1` trừ khi có lý do rất đặc biệt và đã phê duyệt rủi ro.
VPAT là gì?
Bảng khai tuân thủ sản phẩm B2B Mỹ; Webchốt có thể hỗ trợ điền nếu có báo cáo audit đầy đủ.
Liên Hệ Webchốt
Đầu tư thiết kế web accessible chuẩn WCAG ban đầu khoảng năm đến mười hai triệu cho audit nhanh và fix blocker thường tiết kiệm hơn trăm giờ support sau launch — vì ticket accessibility không tự tan, đặc biệt khi đối tác yêu cầu minh chứng VPAT hoặc audit độc lập. Đặt demo remediation và nhận roadmap hai tuần từ Webchốt; gọi 0905 151 701 hoặc hi@webchot.com kèm URL staging để anh Trường ưu tiên route ngân hàng thanh toán của bạn.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
