accessibility wcag 2.2 cho website VN: AA không phải “làm thêm nếu kịp” mà là chất lượng sản phẩm
· Tác giả: Trường — Founder Webchốt
accessibility wcag 2.2 cho website VN bổ sung tiêu chí như Target Size và Redundant Entry — hữu ích với người dùng điện thoại run tay và khách hay điền lại địa chỉ vì session timeout. Việc tuân thủ không chỉ là contrast màu: heading cấu trúc logic, aria-label nút icon, và thông báo lỗi form gắn với field. Webchốt build component Next.js với focus ring rõ, skip link, và hình ảnh có alt mô tả chức năng. Hỏi triển khai: dịch vụ, giá, liên hệ — 0905 151 701, hi@webchot.com.
a11y là đo lường được — không chỉ cảm tính | Nguồn: webchot.com
Bản đồ tiêu chí 2.2 liên quan marketing site
2.4.11 Focus Not Obscured và 2.5.8 Target Size áp dụng mạnh cho sticky CTA. accessibility wcag 2.2 cho website VN cần QA trên Chrome Android vì OEM khác nhau về gesture back. Drag slider hero nên có fallback input số.
Đừng dùng div onClick thay button — keyboard không kích hoạt.
Quy trình QA gắn vào CI
Playwright + axe-core trên route quan trọng; báo cáo HTML PR comment.
- Điểm 1: Lint JSX với eslint-plugin-jsx-a11y.
- Điểm 2: Storybook visual test state focus.
- Điểm 3: Checklist manual 15 phút mỗi release.
- Điểm 4: Zoom text-only 200% không horizontal scroll quá mức.
Bảng: WCAG A vs AA cho DN vừa
AA là mục tiêu thực tế trừ sector y tế đặc thù.
| Tiêu chí | Cấp A | Cấp AA | Khuyên dùng |
|---|---|---|---|
| Contrast text | Thấp hơn | 4.5:1 | AA |
| Target size | Biến thể | 24x24 CSS px min | 2.5.8 |
| Error suggestion | Cơ bản | Cụ thể hơn | Form booking |
| Chi phí dev | Thấp | Trung bình | ROI brand |
AAA thường không bắt buộc landing trừ yêu cầu hợp đồng.
Quy trình sửa backlog a11y
- Bước 1: Tự động quét + manual smoke.
- Bước 2: Ưu tiên block checkout/login.
- Bước 3: Sửa component shared trước.
- Bước 4: Regression test keyboard.
- Bước 5: Ghi chú release note.
Fix từ design system giảm nợ kỹ thuật.
Gói audit và build
Xem bảng giá add-on a11y. Liên hệ gửi URL staging. Template đã tối ưu phần cơ bản hơn landing tự vẽ.
Sai lầm phổ biến
placeholder thay label; carousel không pause; autoplay video không tắt.
- Sai lầm 1: Màu đỏ lỗi duy nhất không có icon.
- Sai lầm 2: Tab order nhảy lung tung do modal.
- Sai lầm 3: Ẩn focus outline bằng CSS global.
- Sai lầm 4: Alt text nhồi keyword SEO.
Kiểm thử với người khuyết tật và thiết bị assistive thực tế
accessibility wcag 2.2 cho website VN cần mời người khiếm thị hoặc đơn vị NGO nội địa thử nghiệm — tự audit chỉ là bước đầu. Kiểm tra bằng bàn phím có dán nhãn tiếng Việt; một số layout bị lệch khi bật “lớn chữ” hệ thống Android. Video marketing nên có caption tiếng Việt rõ, không chỉ auto-caption YouTube sai dấu.
Đừng bật motion nhấp nháy quá nhanh — có thể kích hoạt photosensitive. Với biểu mẫu dài, chia stepper có aria-current; nếu reload giữa step, implement redundant entry đúng nghĩa 3.3.7 hoặc khôi phục state localStorage có consent. Kiểm thử song ngữ phải đảm bảo lang attribute trên html đổi đúng khi toggle — screen reader đọc sai ngôn ngữ sẽ làm phần tiếng Anh thành vô nghĩa.
Đối với bản đồ tương tác, cung cấp danh sách địa điểm dạng text bên dưới — không phụ thuộc hover. PDF báo giá nếu bắt buộc phải upload, hãy kiểm tra tagged PDF hoặc cung cấp bản HTML tương đương. Kiểm tra focus khi mở offcanvas menu trên iOS Safari — bug rất hay gặp với transform GPU.
accessibility WCAG 2.2 cho website VN nên kết hợp test NVDA/JAWS và VoiceOver iOS — chỉ Lighthouse không đủ. Target Size 2.5.8 yêu cầu 24×24 CSS px trừ khi có equivalent; icon-only button cần padding vùng chạm. Focus order modal phải trap và return — kiểm tra khi chèn third-party chat widget.
Contrast 1.4.3 kiểm tra trên OLED outdoor; màu brand nhạt có thể fail AA khi brightness cao. Captcha alternative: rate limit + honeypot hoặc proof-of-work nhẹ cho form liên hệ. Video marketing autoplay phải muted và có control — đừng dựa vào gesture may mắn.
Đa ngôn ngữ: thuộc tính lang trên từng block quote nếu mix EN trong bài VN. Skip link “đẩy nội dung” phải visible khi focus — tránh opacity 0 hack. PDF báo cáo CSR: cung cấp HTML tóm tắt song song. Training biên tập: alt text mô tả ý nghĩa, không spam keyword. Audit định kỳ sau redesign vì component library update hay phá aria.
Live region cho toast success_payment phải polite, không interrupt screen reader đang đọc form error. Table responsive: không chỉ overflow-x, cần card pattern hoặc column priority theo UseCase. Đồ thị canvas phải có bảng số liệu phía dưới — sinh viên mù màu vẫn dùng được.
Keyboard shortcut tùy chỉnh document rõ conflict browser; đừng chiếm / để search nếu user kỳ vọng quick find. Skeleton loading cần aria-busy đúng thời điểm. Dark mode toggle: lưu preference localStorage sau consent cookie policy. Kiểm thử bằng axe-core CI gate nhưng vẫn manual một pass VoiceOver sau merge UI lớn.
Biểu mẫu đăng ký sự kiện offline: nếu in vé tại chỗ, field họ tên latin hoá giúp nhân sự soát nhanh bảng Excel. Animation hero parallax nên có prefers-reduced-motion tắt hoàn toàn layer chuyển động, không chỉ giảm tốc. Chat AI embed: nếu đọc nội dung trang cho user khiếm thị, đảm bảo tuân thủ điều khoản nội dung — không đọc nhầm quảng cáo đối thủ do hallucination.
Trang thương mại: nút “Mua ngay” và “Thêm vào giỏ” phải có tên hiển thị khác nhau cho screen reader; tránh hai generic “button”. Carousel banner: pause button luôn hiển thị, không hover-only. Form địa chỉ Việt Nam: autocomplete tỉnh huyện không làm mất focus khi chọn bằng phím. Kiểm tra hỗ trợ bàn phím cho bộ lọc giá slider — thay bằng input numeric fallback nếu component thư viện lỗi.
Video nền hero: cung cấp nút tắt audio/video ngay đầu trang; autoplay không âm thanh vẫn gây khó chịu cho một số người nhạy cảm chuyển động. Bảng giá so sánh gói: scope cột bằng thẻ <th> đúng semantics; nếu merge cell, mô tả bằng text kèm headers id. Kiểm tra Dragon NaturallySpeaking hoặc dictation iOS với form tìm kiếm — khoảng trắng thừa làm truy vấn lỗi âm thầm.
FAQ — accessibility wcag 2.2 cho website VN
Có cần chứng nhận chính thức không?
Tuỳ yêu cầu mua hàng từ DN lớn; chứng nhận tốn kém — audit tự thường đủ giai đoạn đầu.
PDF có cần accessible không?
Nếu host PDF báo giá, nên có HTML tương đương hoặc PDF tagged.
AMP ảnh hưởng a11y không?
Ít dùng 2026; tập trung semantic HTML chuẩn.
Dark mode bắt buộc không?
Không theo WCAG nhưng nên test contrast cả hai theme.
Đặt lịch workshop nội bộ?
0905 151 701 — gói đào tạo ngắn.
Liên Hệ Webchốt
accessibility wcag 2.2 cho website VN là đường đua dài — Webchốt nhúng vào component library và CI của bạn. Gọi 0905 151 701, Zalo 0905151701, hi@webchot.com.
- 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: WCAG 2.2 Quick Reference.
