Những thay đổi của WCAG 2.2 so với WCAG 2.1

Web Content Accessibility Guidelines (WCAG) là tiêu chuẩn mà phần lớn các luật về khả năng tiếp cận hướng tới. WCAG 2.2 trở thành Khuyến nghị của W3C vào ngày 5 tháng 10 năm 2023, thêm chín tiêu chí thành công mới và loại bỏ một tiêu chí. Hiện nó cũng là ISO/IEC 40500:2025. Nếu bạn duy trì một trang web, design system, hay sản phẩm vào năm 2026, câu hỏi thực tế là: điều gì đã thay đổi, mỗi tiêu chí mới thực sự yêu cầu gì, và bạn nên ưu tiên các sửa chữa như thế nào? Bài viết này trả lời từng câu hỏi, có trích dẫn nguồn để bạn có thể xác minh trước khi hành động.

Lịch sử ngắn của WCAG

W3C công bố Web Content Accessibility Guidelines đầu tiên vào ngày 5 tháng 5 năm 1999. WCAG 1.0 có tính quy định và đặc thù cho HTML; nó nhanh chóng trở nên lỗi thời khi web chuyển từ tài liệu đơn giản sang các ứng dụng phong phú.

WCAG 2.0 ra đời ngày 11 tháng 12 năm 2008. Nó trừu tượng hóa hướng dẫn khỏi bất kỳ công nghệ cụ thể nào, sắp xếp chúng dưới bốn nguyên tắc "Có thể cảm nhận, Có thể vận hành, Có thể hiểu, Vững chắc" (POUR), và giới thiệu sơ đồ tuân thủ ba cấp A/AA/AAA mà các nhà thực hành vẫn dùng đến hôm nay. Đó là phiên bản mà hầu hết các quy định ở Mỹ và quốc tế tham chiếu ban đầu.

WCAG 2.1 nối tiếp vào ngày 5 tháng 6 năm 2018. Nó thêm 17 tiêu chí thành công mới bao trùm thiết bị di động (định hướng, mục tiêu chạm, kích hoạt bằng chuyển động), người dùng có thị lực kém (reflow, khoảng cách văn bản, độ tương phản phi văn bản) và khả năng tiếp cận nhận thức (label-in-name, thông điệp trạng thái). Đây là phiên bản được tích hợp vào tiêu chuẩn EN 301 549 v3.2.1 mà European Accessibility Act tham chiếu.

WCAG 2.2 được công bố ngày 5 tháng 10 năm 2023 và tái công bố với các cập nhật biên tập vào ngày 12 tháng 12 năm 2024. Nó thêm chín tiêu chí thành công mới, loại bỏ một (4.1.1 Parsing), và hiện cũng là ISO/IEC 40500:2025. WCAG 3, một khung khác biệt đáng kể với cách tính điểm mới, vẫn ở dạng dự thảo và không được kỳ vọng áp dụng rộng rãi trước năm 2027.

Chín tiêu chí thành công mới

Các tiêu chí mới rơi vào ba nhóm chủ đề: tiêu điểm, phương thức nhập, và khả năng tiếp cận nhận thức.

Nhóm tiêu điểm

2.4.11 Tiêu điểm Không Bị Che Khuất (Tối thiểu), Cấp AA. Khi một thành phần giao diện người dùng nhận tiêu điểm bàn phím, thành phần đó không được hoàn toàn bị ẩn bởi nội dung do tác giả tạo (tiêu đề dính, banner cookie, widget chat). Thành phần có thể bị che khuất một phần; tiêu chí chỉ thất bại khi không phần nào của nó hiển thị. Phần lớn các thất bại trong thực tế đến từ các thanh dưới dính trôi nổi trên một ô nhập được tiêu điểm trong biểu mẫu, khiến tiêu điểm bị ẩn trong khi người dùng đang gõ.

2.4.12 Tiêu điểm Không Bị Che Khuất (Nâng cao), Cấp AAA. Phiên bản chặt chẽ hơn của 2.4.11: khi một thành phần nhận tiêu điểm, không phần nào của nó được phép bị ẩn. Đây là phiên bản AAA mà hầu hết các design system doanh nghiệp nhắm tới.

2.4.13 Hình dạng Tiêu điểm, Cấp AAA. Bản thân chỉ báo tiêu điểm phải dày ít nhất 2 pixel CSS xung quanh điều khiển được tiêu điểm, và độ tương phản của chỉ báo tiêu điểm so với trạng thái không tiêu điểm liền kề phải ít nhất 3:1. Một vòng tiêu điểm mặc định của trình duyệt 1 pixel trên nút tối không đáp ứng tiêu chí này; một vòng tương phản cao 2 pixel đáp ứng được.

Nhóm phương thức nhập

2.5.7 Cử chỉ Kéo, Cấp AA. Bất cứ điều gì có thể làm được bằng cử chỉ kéo cũng phải có thể làm được mà không cần kéo. Ví dụ: danh sách có thể sắp xếp chỉ phản hồi kéo, thanh trượt chỉ phản hồi kéo, panning bản đồ đòi hỏi kéo. Tiêu chí không cấm kéo; nó đòi hỏi một phương án thay thế như mũi tên lên/xuống để sắp xếp, hoặc trường nhập văn bản cho giá trị thanh trượt.

2.5.8 Kích thước Mục tiêu (Tối thiểu), Cấp AA. Các mục tiêu của con trỏ phải ít nhất 24 nhân 24 pixel CSS, trừ khi chúng là inline (liên kết trong đoạn văn), hiển thị trong mặc định user-agent (như dropdown <select>), thiết yếu với chức năng (mô phỏng cần đàn), hoặc có một điều khiển tương đương ở nơi khác trên trang đáp ứng 24x24. Tiêu chí WCAG 2.1 trước đó 2.5.5 đặt ngưỡng ở 44x44 nhưng ở Cấp AAA; 2.5.8 làm cho mức tối thiểu nhỏ hơn 24x24 bắt buộc ở AA.

Nhóm khả năng tiếp cận nhận thức

3.2.6 Trợ giúp Nhất quán, Cấp A. Nếu cơ chế trợ giúp (liên kết "Liên hệ", widget chat, liên kết trợ giúp, số điện thoại trợ giúp) xuất hiện trên nhiều trang, chúng phải xuất hiện theo cùng thứ tự tương đối trên mỗi trang. Ý định là giảm tải nhận thức: người dùng tìm thấy trợ giúp ở nơi họ mong đợi, mỗi lần.

3.3.7 Nhập Trùng lặp, Cấp A. Người dùng không nên bị yêu cầu nhập lại thông tin họ đã nhập trong cùng quy trình. Biểu mẫu nhiều bước phải nhớ các đầu vào trước đó. Tiêu chí không cấm hỏi lại khi điều đó thiết yếu (xác minh bảo mật) hoặc khi thông tin đã thay đổi.

3.3.8 Xác thực Có thể Tiếp cận (Tối thiểu), Cấp AA. Xác thực không thể yêu cầu các bài kiểm tra chức năng nhận thức như nhớ mật khẩu, giải câu đố, hoặc sao chép CAPTCHA dựa trên hình ảnh, trừ khi cung cấp phương án thay thế. Các phương án thay thế chấp nhận được bao gồm trình quản lý mật khẩu, mã một lần, sinh trắc học, hoặc token phần cứng. Đây là tiêu chí đã chấm dứt mô hình "gõ các chữ cái từ hình ảnh này" cho các trang có thể tiếp cận.

3.3.9 Xác thực Có thể Tiếp cận (Nâng cao), Cấp AAA. Phiên bản mạnh hơn: các câu đố nhận dạng đối tượng và nội dung cá nhân (hình ảnh nào chứa xe buýt?, tên thú cưng đầu tiên của bạn là gì?) cũng không được phép, trừ khi cung cấp phương án thay thế.

Một tiêu chí được loại bỏ

4.1.1 Parsing đã được rút lại vì lỗi thời. Nó yêu cầu nội dung phải có thể phân tích được: thẻ mở/đóng đầy đủ, không có ID trùng lặp, các phần tử lồng đúng cách. Năm 2008 điều này quan trọng vì công nghệ hỗ trợ tự phân tích HTML và sẽ thất bại trên đánh dấu không đúng định dạng. Năm 2024 mọi công nghệ hỗ trợ đều tiêu thụ cây khả năng tiếp cận của trình duyệt, không phải HTML thô; trình duyệt đã phục hồi từ đánh dấu không đúng định dạng một cách duyên dáng. WCAG 2.2 thừa nhận điều này bằng cách loại bỏ tiêu chí. Nó vẫn xuất hiện trong tuân thủ WCAG 2.0 và 2.1, nhưng không xuất hiện trong 2.2.

Đây là tiêu chí duy nhất từng được loại bỏ khỏi WCAG. Các audit 2.0 / 2.1 hiện có đã đánh dấu các thất bại 4.1.1 nên được kiểm tra lại đối với 2.2; một số trong các thất bại đó hiện không còn là vấn đề.

Tóm tắt các cấp tuân thủ

WCAG 2.2 thêm 4 tiêu chí Cấp A hoặc AA (2.5.7, 2.5.8, 2.4.11, 3.2.6, 3.3.7, 3.3.8) và 4 tiêu chí Cấp AAA (2.4.12, 2.4.13, 3.3.9, cộng với nhánh AAA của 2.4.11). Đối với hầu hết công việc tuân thủ pháp luật, hãy tập trung trước vào các bổ sung AA.

Tác động thực tế, sửa gì trước

Đối với một trang web điển hình đã tuân thủ WCAG 2.1 AA, khoảng cách 2.2 AA thường là:

1. 2.5.8 Kích thước Mục tiêu (Tối thiểu), 24x24 pixel CSS. Kiểm toán các nút, liên kết biểu tượng và các toggle nhỏ. Các điều khiển nhỏ hơn 24x24 cần một vùng chạm lớn hơn, nhiều khoảng cách hơn xung quanh chúng, hoặc một điều khiển tương đương lớn hơn trên trang. Đây là thất bại 2.2 đơn lẻ phổ biến nhất trên các trang hiện có.
2. 2.4.11 Tiêu điểm Không Bị Che Khuất (Tối thiểu). Tìm các thanh dưới dính, footer dính, widget chat, banner cookie phủ lên dưới của viewport. Khi một phần tử có thể tiêu điểm cuộn ra phía sau một trong số đó, tiêu chí thất bại. Sửa bằng cách thêm scroll-margin-bottom vào các phần tử có thể tiêu điểm bằng chiều cao của thanh dính.
3. 3.3.8 Xác thực Có thể Tiếp cận (Tối thiểu). Loại bỏ CAPTCHA dựa trên hình ảnh khỏi luồng đăng nhập; thay bằng cách tiếp cận CAPTCHA vô hình hoặc giới hạn tỷ lệ. Cho phép trình quản lý mật khẩu (đừng vô hiệu hóa autocomplete trên các trường mật khẩu). Cho phép dán mã một lần.
4. 2.5.7 Cử chỉ Kéo. Cung cấp một phương án thay thế không-kéo cho bất kỳ tương tác chỉ-kéo nào. Danh sách có thể sắp xếp cần mũi tên lên/xuống; thanh trượt cần đầu vào số; bản đồ cần nút pan.
5. 3.2.6 Trợ giúp Nhất quán. Nếu liên kết "Liên hệ" hoặc "Trợ giúp" của bạn xuất hiện trên nhiều trang, hãy đặt chúng nhất quán. Hầu hết các trang đã làm điều này; thất bại là ở các trang di chuyển liên kết trợ giúp dựa trên loại trang.
6. 3.3.7 Nhập Trùng lặp. Biểu mẫu nhiều bước phải nhớ các đầu vào trước đó. Hầu hết các framework hiện đại đã làm điều này nếu bạn nối trạng thái đúng cách; thất bại là ở các biểu mẫu nhiều trang cũ đặt lại trạng thái giữa các bước.

Các cạm bẫy phổ biến khi triển khai các tiêu chí mới

• Coi 4.1.1 Parsing đã biến mất ở mọi nơi. 4.1.1 bị loại khỏi WCAG 2.2 nhưng vẫn được WCAG 2.0 và 2.1 yêu cầu. Nếu hợp đồng hoặc quy định của bạn nêu rõ 2.1, quy tắc parsing vẫn áp dụng.
• Hiểu sai 2.5.8 Kích thước Mục tiêu. Mức tối thiểu 24x24 dành cho mục tiêu, không phải cho biểu tượng nhìn thấy được. Một biểu tượng 16x16 bên trong nút 24x24 vượt qua. Một biểu tượng 16x16 trong nút 16x16 thất bại.
• Quên các ngoại lệ của 2.5.8. Các liên kết inline trong đoạn văn, các điều khiển mặc định của user-agent, các mục tiêu thiết yếu, và các điều khiển tương đương lớn hơn ở nơi khác trên trang đều được miễn.
• Triển khai 3.3.8 bằng cách loại bỏ tất cả CAPTCHA. Bạn có thể giữ CAPTCHA; bạn chỉ cần một con đường thay thế có thể tiếp cận. Reverse Turing test, giới hạn tỷ lệ, magic link, passkey, hoặc token phần cứng đều đủ điều kiện.
• 2.4.11 bị nhầm với 2.4.13. Tiêu điểm Không Bị Che Khuất (2.4.11) liên quan đến việc liệu phần tử được tiêu điểm có nhìn thấy được không. Hình dạng Tiêu điểm (2.4.13) liên quan đến bản thân chỉ báo tiêu điểm phải dày và tương phản. Đây là những yêu cầu khác nhau ở các cấp khác nhau.
• Bỏ qua 2.4.13 vì nó là AAA. Một số chính phủ (Na Uy, một phần Canada) đã áp dụng các quy tắc cấp AAA cho các trang khu vực công. Hãy kiểm tra khu vực pháp lý của bạn.

Công cụ kiểm tra tuân thủ WCAG 2.2

Một số công cụ đã được cập nhật để kiểm tra các tiêu chí 2.2 mới; những công cụ khác vẫn chỉ kiểm tra theo 2.0 / 2.1.

Các công cụ tự động bắt được khoảng 30 đến 40% các thất bại WCAG ngay cả khi tốt nhất. Các tiêu chí 2.2 mới đặc biệt khó tự động hóa (2.5.7 Kéo, 3.2.6 Trợ giúp Nhất quán, 3.3.7 Nhập Trùng lặp, 3.3.8 Xác thực) vì chúng đòi hỏi hiểu luồng người dùng, không chỉ markup. Hãy lập kế hoạch cho kiểm tra bàn phím thủ công ở mỗi lần phát hành.

Quyền riêng tư và các công cụ

Color contrast checker, WCAG heading checker, và accessible palette generator trên Absolutool đều chạy hoàn toàn trong trình duyệt của bạn. Các giá trị HTML hoặc màu mà bạn dán được xử lý bởi JavaScript trên thiết bị của bạn, kết quả hiển thị lên trang, và không có gì được gửi đến máy chủ. Không có telemetry trên đầu vào, không có script bên thứ ba chạm vào nội dung, không có cache sau khi điều hướng. Đối với kiểm toán design system nội bộ, màu thương hiệu chưa phát hành, hoặc bất kỳ dữ liệu kiểm toán nào dưới lệnh cấm, luồng chỉ-cục-bộ đó là mặc định đúng. Các công cụ có thể chạy ngoại tuyến sau khi trang được tải, điều bạn có thể xác minh bằng cách tắt mạng và kiểm tra lại một cặp tương phản.