Chuyên môn · Chọn phạm vi làm gì trước

Chuẩn tiếp cận WCAG: chọn đúng mức

Không phải ngành nào cũng cần đạt AAA, nhưng dừng ở mức A thường là chưa đủ.

Chốt nhanh

WCAG 2.2 AA là mức mặc định hợp lý cho hầu hết sản phẩm số tại Việt Nam hiện tại. Mức A tối thiểu thường không đủ nếu sản phẩm phục vụ người dùng đại chúng, còn mức AAA không thực tế và thực tế không thể đạt hoàn toàn cho sản phẩm thương mại. Sinh Vũ đặt AA làm baseline mặc định và tập trung trước vào ba nhóm tiêu chí có tác động lớn nhất: tương phản màu sắc, điều hướng bàn phím, và nhãn cho phần tử tương tác.

WCAG (Web Content Accessibility Guidelines, tức Hướng dẫn tiếp cận nội dung web) có ba mức: A, AA, và AAA. Câu hỏi không phải "có cần làm không" mà là "cần đạt đến đâu cho đúng ngành, đúng giai đoạn". Trả lời sai hướng này sẽ dẫn đến một trong hai lãng phí: làm quá tốn nguồn lực, hoặc làm thiếu và phải trả giá sau.

Ba mức WCAG và ý nghĩa thực tế

WCAG 2.2 được xây dựng trên bốn nguyên tắc, thường gọi tắt là POUR: Perceivable (người dùng nhận thức được nội dung), Operable (người dùng vận hành được giao diện), Understandable (người dùng hiểu được nội dung và cách hoạt động), và Robust (nội dung hoạt động đúng trên nhiều công nghệ hỗ trợ). Ba mức A, AA, AAA phản ánh mức độ nghiêm ngặt trong việc đáp ứng bốn nguyên tắc này.

  • Level A: tiêu chí tối thiểu, loại bỏ các rào cản nghiêm trọng nhất. Dừng ở đây thường không đủ cho sản phẩm phục vụ người dùng đại chúng.
  • Level AA: mức cân bằng giữa độ bao phủ và tính khả thi. Đây là mức được tham chiếu trong hầu hết quy định pháp lý quốc tế và là baseline mặc định của Sinh Vũ cho dự án A3.
  • Level AAA: tiêu chí nâng cao nhất. W3C không khuyến nghị đặt AAA làm mục tiêu toàn diện vì không thực tế cho phần lớn sản phẩm thương mại.

Yếu tố quyết định mức cần đạt

Không có một con số duy nhất áp dụng cho mọi ngành. Anh/Chị cần xem xét ít nhất ba yếu tố sau:

  • Đối tượng người dùng: sản phẩm phục vụ người cao tuổi, người khuyết tật, hoặc nhóm dùng công nghệ hỗ trợ thì cần AA nghiêm ngặt hơn. Ngân hàng số, y tế, bảo hiểm, giáo dục đều thuộc nhóm này.
  • Thị trường mục tiêu: nếu sản phẩm có kế hoạch mở rộng sang Mỹ hoặc EU, yêu cầu pháp lý của thị trường đó (ADA tại Mỹ, EN 301 549 tại EU) cần được tính vào ngay từ giai đoạn thiết kế. Tại Việt Nam hiện chưa có quy định tương đương rõ ràng.
  • Giai đoạn sản phẩm: sản phẩm ở giai đoạn MVP với nguồn lực hạn chế có thể đặt mục tiêu Level A trước, sau đó lên AA theo lộ trình. Quan trọng là không để nợ kỹ thuật (technical debt) về accessibility tích lũy quá lâu.
Hướng thực dụng (sản phẩm trong nước, thị trường đại chúng): Đặt mục tiêu AA, ưu tiên ba nhóm tiêu chí cốt lõi trước. Không cần nhắm AAA trừ khi có yêu cầu pháp lý hoặc sản phẩm phục vụ chuyên biệt người khuyết tật nặng.

Hướng cho sản phẩm hướng quốc tế hoặc ngành tài chính, y tế: AA là bắt buộc và cần được kiểm tra có hệ thống, không phải một lần lúc bàn giao. Nên tích hợp accessibility vào quy trình thiết kế và code review từ đầu.

Ba tiêu chí quan trọng nhất cần làm đúng trước

Sinh Vũ tập trung vào ba nhóm tiêu chí có tác động lớn nhất và dễ kiểm tra nhất trước khi đi vào các tiêu chí nâng cao hơn:

  • Tương phản màu sắc (WCAG 1.4.3): tỷ lệ tương phản (contrast ratio) tối thiểu là 4.5:1 cho chữ thường, 3:1 cho chữ lớn từ 18pt trở lên hoặc 14pt đậm. Đây là tiêu chí phổ biến nhất bị vi phạm trong thực tế.
  • Điều hướng bàn phím (WCAG 2.1.1): toàn bộ chức năng cần có thể thực hiện bằng bàn phím, không phụ thuộc vào chuột. Focus indicator (viền hiển thị khi dùng bàn phím) không được ẩn vì lý do thẩm mỹ.
  • Nhãn cho phần tử tương tác (WCAG 1.3.1, 4.1.2): mọi form, button, input cần có nhãn rõ ràng để screen reader (phần mềm đọc màn hình) hiểu được. Ảnh mang thông tin cần có alt text. Ảnh trang trí để alt text trống là đúng, nhưng bỏ trống cho ảnh mang nội dung là sai.

Thiết kế cho người khuyết tật thường cải thiện trải nghiệm cho tất cả người dùng. Đây là hiệu ứng được gọi là curb-cut effect (hiệu ứng vỉa hè cắt): giải pháp ban đầu làm cho người dùng xe lăn sau đó được dùng bởi người đẩy xe nôi, người mang đồ nặng, người chạy bộ.

Nielsen Norman Group, Accessibility research

Lỗi thường gặp khi triển khai

  • Chỉ kiểm tra tương phản màu mà bỏ qua điều hướng bàn phím và khả năng tương thích với screen reader.
  • Dùng màu sắc là cách duy nhất để truyền tải thông tin, ví dụ chỉ dùng màu đỏ để báo lỗi mà không có icon hay text kèm theo. Đây là vi phạm WCAG 1.4.1.
  • Ẩn focus indicator vì lý do thẩm mỹ. Giải pháp đúng là thiết kế focus indicator đẹp, không phải xóa nó đi.
  • Kiểm tra accessibility một lần lúc bàn giao thay vì tích hợp vào quy trình thiết kế và code review. Khi phát hiện muộn, chi phí sửa rất cao vì ảnh hưởng đến toàn bộ design system.
  • Nhầm lẫn giữa "không có quy định pháp lý tại Việt Nam" và "không cần quan tâm". Accessibility mở rộng thị trường và cải thiện trải nghiệm tổng thể, không chỉ là tuân thủ.

Nguồn tham khảo

W3C Web Content Accessibility Guidelines (WCAG) 2.2. Nielsen Norman Group, Accessibility research. Kinh nghiệm thực hành Sinh Vũ qua các dự án A3.

Câu hỏi thường gặp

Việt Nam có quy định pháp lý bắt buộc về accessibility không?

Tại thời điểm Sinh Vũ cập nhật bài này, Việt Nam chưa có quy định tương đương ADA (Mỹ) hay EN 301 549 (EU). Tuy nhiên nếu sản phẩm hướng đến thị trường Mỹ hoặc EU, Anh/Chị cần tính đến yêu cầu pháp lý của thị trường đó ngay từ giai đoạn thiết kế, không phải lúc sắp ra mắt.

Có cần thuê chuyên gia kiểm tra accessibility riêng không?

Với ba nhóm tiêu chí cốt lõi (tương phản màu, bàn phím, nhãn form), đội thiết kế và lập trình có thể tự kiểm tra bằng công cụ miễn phí như Colour Contrast Analyser và trình kiểm tra bàn phím tích hợp sẵn trong trình duyệt. Kiểm tra chuyên sâu với screen reader hoặc audit toàn diện nên có chuyên gia khi sản phẩm đã ổn định, không phải ở mỗi sprint.

Nếu sản phẩm đang ở giai đoạn MVP thì có cần lo accessibility ngay không?

Nên đặt mục tiêu Level A trước để giữ nền không bị nợ kỹ thuật nặng sau này. Trong thực tế, tương phản màu và nhãn form tốn rất ít công nếu làm đúng ngay từ đầu, nhưng sẽ tốn gấp nhiều lần nếu sửa sau khi design system đã được áp dụng rộng.

← Về Hệ thiết kế số
{INJ}