Khả năng truy cập website: hướng dẫn thực tế về WCAG 2.2
Cách áp dụng WCAG 2.2 cho website, sửa lỗi gây ra phần lớn vấn đề thực tế, tự kiểm tra thủ công trong 30 phút và hiểu mối liên hệ giữa khả năng truy cập và tính dễ dùng.
Câu hỏi thường gặp
Website tuân thủ WCAG nghĩa là gì?
Nghĩa là website đáp ứng các tiêu chí thành công của Hướng dẫn về khả năng truy cập nội dung web ở cấp độ đã chọn, thường là WCAG 2.1 hoặc 2.2 mức AA. Mức AA bao gồm mọi tiêu chí mức A và AA. Phần lớn luật và chính sách mua sắm viện dẫn WCAG yêu cầu mức AA.
Nên áp dụng hướng dẫn WCAG cho website thế nào?
Bắt đầu với tài liệu tham khảo nhanh “How to Meet WCAG” của W3C, lọc mức A và AA, rồi đọc trang “Understanding” của từng tiêu chí để hiểu mục đích bằng ngôn ngữ thông thường. Sau đó kiểm tra các mẫu quan trọng (trang chủ, trang nội dung, biểu mẫu, thanh toán) thay vì từng trang riêng lẻ.
Lớp phủ hoặc plugin hỗ trợ truy cập có thể giúp website tuân thủ không?
Không công cụ nào tự giúp website tuân thủ được. Lớp phủ thêm thanh công cụ nhưng không sửa mã nền; nhiều người khuyết tật và chuyên gia trợ năng cho biết chúng gây cản trở. Hãy sửa trực tiếp HTML, độ tương phản, nhãn và khả năng dùng bàn phím.
Tính dễ dùng khác khả năng truy cập thế nào?
Khả năng truy cập nghĩa là người khuyết tật có thể cảm nhận, hiểu, điều hướng và tương tác với website. Tính dễ dùng nghĩa là mọi người đều có thể dùng website dễ dàng và hiệu quả. Hai khái niệm giao nhau nhiều: nhãn rõ, độ tương phản tốt và điều hướng dễ đoán giúp mọi khách truy cập, không chỉ người khuyết tật.
Công cụ tự động có tìm được mọi vấn đề về khả năng truy cập không?
Không. WAVE, axe và Lighthouse tìm được vấn đề như thiếu alt text, độ tương phản thấp và thiếu nhãn, nhưng nhiều tiêu chí—chẳng hạn alt text có ý nghĩa hay thứ tự focus có hợp lý không—cần người thật kiểm tra.
Website tuân thủ WCAG đáp ứng Hướng dẫn về khả năng truy cập nội dung web ở một cấp độ đã chọn; với gần như mọi doanh nghiệp, đó là WCAG 2.2 mức AA. Trên thực tế, phần lớn website vướng cùng một số lỗi: tương phản màu thấp, thiếu văn bản thay thế cho ảnh, trường biểu mẫu không có nhãn, liên kết và nút rỗng, hoặc thành phần không thể truy cập bằng bàn phím. Sửa các lỗi này rồi kiểm tra bằng bàn phím và trình đọc màn hình sẽ khắc phục phần lớn vấn đề người dùng thực sự gặp.
Hướng dẫn này giải thích cách đọc WCAG mà không bị rối, những sửa đổi quan trọng nhất và bài kiểm tra 30 phút bạn có thể tự làm.
Cấu trúc WCAG
W3C xuất bản WCAG theo nhiều lớp:
Bốn nguyên tắc, gọi tắt là POUR: nội dung phải Perceivable (cảm nhận được), Operable (thao tác được), Understandable (hiểu được) và Robust (bền vững/tương thích).
Hướng dẫn theo từng nguyên tắc, ví dụ “Văn bản thay thế” hoặc “Có thể thao tác bằng bàn phím”.
Tiêu chí thành công trong từng hướng dẫn. Đây là các quy tắc có thể kiểm tra, được đánh số (như 1.4.3 Contrast) và xếp mức A, AA hoặc AAA.
Mức A là tối thiểu. AA là mục tiêu phổ biến trong yêu cầu pháp lý và mua sắm. AAA nghiêm ngặt hơn và thường không bắt buộc cho toàn bộ website.
WCAG 2.2 trở thành Khuyến nghị W3C vào tháng 10 năm 2023. Phiên bản này bổ sung các tiêu chí như kích thước mục tiêu tối thiểu, không che khuất focus và xác thực dễ truy cập; đồng thời loại 4.1.1 Parsing vì đã lỗi thời.
Cách áp dụng WCAG cho website của bạn
Đặc tả đọc giống tiêu chuẩn vì nó chính là tiêu chuẩn. Cách thực tế để áp dụng:
Mở “How to Meet WCAG (Quick Reference)” của W3C.
Chỉ lọc mức A và AA.
Với mỗi tiêu chí, đọc trang “Understanding” được liên kết. Trang giải thích mục tiêu bằng ngôn ngữ dễ hiểu, kèm ví dụ đạt và không đạt.
Thay vì kiểm tra mọi trang, hãy kiểm tra các mẫu trang: trang chủ, trang nội dung thông thường, bài blog, biểu mẫu, sản phẩm hoặc trang thanh toán. Sửa mẫu sẽ sửa mọi trang dùng mẫu đó.
Ghi từng lỗi cùng số tiêu chí, trang gặp lỗi và cách sửa.
Các sửa đổi khắc phục phần lớn lỗi thực tế
1. Độ tương phản màu (1.4.3 và 1.4.11)
Chữ thường: tối thiểu 4.5:1 so với nền.
Chữ lớn (khoảng 24px chữ thường hoặc từ 18.66px chữ đậm): tối thiểu 3:1.
Thành phần giao diện và đồ họa có ý nghĩa (viền nút, đường viền trường nhập, biểu tượng truyền đạt thông tin): tối thiểu 3:1.
Chữ giữ chỗ xám nhạt và chữ trắng trên màu thương hiệu nhạt thường gây lỗi. Kiểm tra bằng công cụ WebAIM contrast checker hoặc công cụ lập trình trên trình duyệt.
2. Văn bản thay thế cho hình ảnh (1.1.1)
Ảnh cung cấp thông tin cần alt text mô tả điều quan trọng: alt="Kỹ thuật viên thay bộ lọc lò sưởi".
Ảnh trang trí dùng alt rỗng: alt="" để trình đọc màn hình bỏ qua.
Ảnh chứa chữ (ảnh chụp tờ rơi hoặc thực đơn JPG) cần cung cấp cùng nội dung dưới dạng văn bản thật.
Ảnh được liên kết, như logo dẫn về trang chủ, cần mô tả đích đến: alt="Trang chủ Acme Plumbing".
3. Nhãn và lỗi biểu mẫu (1.3.1, 3.3.1, 3.3.2)
Mỗi trường nhập phải có <label> hiển thị và liên kết với trường đó. Placeholder không phải nhãn vì biến mất khi người dùng nhập.
Thông báo lỗi nêu điều gì sai và cách sửa (“Nhập số điện thoại gồm mã vùng”), dưới dạng văn bản chứ không chỉ viền đỏ.
Trường bắt buộc cần được đánh dấu bằng chữ hoặc ký hiệu hỗ trợ truy cập, không chỉ bằng màu sắc.
4. Truy cập bằng bàn phím (2.1.1, 2.4.3, 2.4.7)
Mọi liên kết, nút, menu và điều khiển biểu mẫu phải hoạt động bằng Tab, Shift+Tab, Enter và Space.
Thứ tự focus theo thứ tự hiển thị.
Chỉ báo focus hiển thị vị trí hiện tại. Xóa viền mặc định của trình duyệt bằng outline: none mà không thay thế là lỗi thường gặp.
Menu thả xuống và hộp thoại phải mở, hoạt động và đóng được bằng bàn phím; hộp thoại cần giữ focus bên trong cho tới khi đóng.
5. Tên rõ ràng cho liên kết và nút (2.4.4, 4.1.2)
Nút chỉ có biểu tượng (menu hamburger, kính lúp tìm kiếm, biểu tượng mạng xã hội) cần tên hỗ trợ truy cập qua chữ hiển thị, aria-label hoặc chữ ẩn.
Tránh trang có nhiều liên kết “Nhấn vào đây” và “Đọc thêm”. Dùng chữ mô tả điểm đến hoặc đặt tên hỗ trợ truy cập riêng cho mỗi liên kết.
6. Cấu trúc và tiêu đề (1.3.1, 2.4.6)
Mỗi trang có một <h1> mô tả trang.
Tiêu đề theo thứ tự logic (h2 cho phần, h3 cho mục con), không chọn chỉ vì cỡ chữ.
Dùng danh sách thật, bảng có ô tiêu đề và landmark (<header>, <nav>, <main>, <footer>).
Đặt ngôn ngữ trang: <html lang="en">.
7. Tiêu chí mới trong WCAG 2.2 cần biết
2.5.8 Target Size (Minimum), AA: mục có thể nhấp tối thiểu 24 by 24 CSS pixels hoặc có đủ khoảng cách quanh mục nhỏ hơn.
2.4.11 Focus Not Obscured (Minimum), AA: đầu trang cố định, biểu ngữ cookie và tiện ích chat không được che khuất hoàn toàn mục đang focus.
3.3.8 Accessible Authentication (Minimum), AA: không bắt giải câu đố hay ghi nhớ thông tin để đăng nhập nếu không có cách thay thế; cho phép trình quản lý mật khẩu và dán.
3.3.7 Redundant Entry, A: không bắt nhập lại thông tin đã cung cấp trong cùng quy trình.
8. Đa phương tiện và chuyển động
Video cần phụ đề (1.2.2); video quay sẵn cần mô tả âm thanh hoặc lựa chọn thay thế bằng văn bản cho thông tin hình ảnh quan trọng.
Nội dung tự chuyển động quá năm giây cần cách tạm dừng (2.2.2).
Tôn trọng cài đặt prefers-reduced-motion khi có hoạt ảnh lớn.
Bài kiểm tra thủ công trong 30 phút
Công cụ tự động chỉ phát hiện một phần vấn đề. Hãy thêm quy trình này cho từng mẫu trang chính.
Phút 0–5: quét tự động. Chạy WAVE (tiện ích trình duyệt), axe DevTools hoặc phần trợ năng của Lighthouse. Sửa lỗi rõ ràng như thiếu alt, thiếu nhãn và lỗi tương phản.
Phút 5–15: chỉ dùng bàn phím. Đặt chuột sang một bên, nhấn Tab qua trang từ đầu.
Bạn có thấy focus đang ở đâu mọi lúc không?
Bạn mở và đóng menu, dùng mọi trường biểu mẫu và gửi được không?
Có liên kết “Bỏ qua tới nội dung” và nó hoạt động không?
Focus có bị đầu trang cố định hoặc biểu ngữ che không?
Phút 15–25: trình đọc màn hình. Dùng VoiceOver (tích hợp trên macOS và iOS) hoặc NVDA (miễn phí trên Windows).
Nghe danh sách tiêu đề. Nó có mô tả đúng trang không?
Di chuyển tới ảnh và nút. Chúng có ý nghĩa khi không có ngữ cảnh không?
Điền biểu mẫu. Mỗi trường có được thông báo kèm nhãn không? Lỗi có được đọc không?
Phút 25–30: phóng to và bố cục lại. Phóng trình duyệt lên 200%, sau đó 400%. Ở mức 400%, nội dung cần bố trí lại thành một cột, không cuộn ngang (1.4.10 Reflow) và không bị cắt.
Tính dễ dùng và khả năng truy cập giao nhau
Người tìm kiếm “web usability accessibility” có lý khi xếp hai khái niệm cùng nhau. Gần như mọi sửa đổi về khả năng truy cập cũng cải thiện tính dễ dùng:
Sửa đổi trợ năng
Còn giúp ích cho ai
Độ tương phản mạnh
Người dùng điện thoại dưới nắng
Nhãn hiển thị rõ
Người điền biểu mẫu vội
Phụ đề
Người xem video khi tắt tiếng
Hỗ trợ bàn phím
Người dùng thành thạo và người hỏng bàn rê
Vùng chạm lớn hơn
Mọi người dùng điện thoại
Thông báo lỗi rõ ràng
Bất cứ ai gõ sai
Lớp phủ, tuyên bố và luật
Lớp phủ: tiện ích hứa hẹn tuân thủ chỉ bằng một dòng không thay đổi mã nền. Hãy sửa chính website.
Tuyên bố khả năng truy cập: đăng trang ngắn nêu tiêu chuẩn mục tiêu, vấn đề đã biết và cách liên hệ để được hỗ trợ hoặc nhận định dạng thay thế.
Bối cảnh pháp lý: yêu cầu tùy quốc gia. Đạo luật Khả năng truy cập châu Âu áp dụng cho nhiều sản phẩm và dịch vụ ở EU từ tháng 6 năm 2025; tại Hoa Kỳ, ADA thường được áp dụng cho website; cơ quan nhà nước thường có quy định cụ thể. Hãy xin tư vấn pháp lý cho trường hợp của bạn.
Danh sách kiểm tra
[ ] Độ tương phản: 4.5:1 cho chữ, 3:1 cho chữ lớn và thành phần giao diện
[ ] Có alt text cho ảnh thông tin, alt rỗng cho ảnh trang trí
[ ] Mọi trường nhập có nhãn hiển thị và được liên kết
[ ] Toàn website dùng được bằng bàn phím với focus hiển thị
[ ] Nút biểu tượng có tên hỗ trợ truy cập
[ ] Tiêu đề, landmark hợp lý và đã đặt ngôn ngữ trang
[ ] Vùng chạm ít nhất 24 by 24 CSS pixels
[ ] Video có phụ đề, chuyển động có nút tạm dừng
[ ] Bố cục lại được ở mức phóng 400%
[ ] Đã xuất bản tuyên bố khả năng truy cập
Khả năng truy cập cũng hỗ trợ tìm kiếm: tiêu đề, alt text và liên kết mô tả là nền tảng SEO trên trang, được đề cập trong danh sách kiểm tra SEO trên trang.
We.Inc tạo website bằng mã HTML, CSS và React tiêu chuẩn mà bạn có thể chỉnh trực tiếp; vì vậy bạn có thể tự sửa nhãn, alt text, độ tương phản hoặc yêu cầu thay đổi qua trò chuyện. Luôn tự chạy các bước kiểm tra thủ công ở trên cho mọi nội dung đã xuất bản.