Tại sao khả năng tiếp cận và đồng ý hiện giao nhau

GDPR yêu cầu sự đồng ý phải có thể lấy được từ mọi người dùng, không chỉ những người có thể nhìn và nhấp vào biểu ngữ. Ủy ban Bảo vệ Dữ liệu Châu Âu đã làm rõ rằng nếu chủ thể dữ liệu không thể tương tác có ý nghĩa với giao diện đồng ý — do khuyết tật mà trang web không đáp ứng — thì sự đồng ý không được lấy hợp lệ. Điều đó có nghĩa là cookie không bao giờ nên được tải ngay từ đầu.

Về phía khả năng tiếp cận, Đạo luật Tiếp cận Châu Âu (EAA) được chuyển vào luật quốc gia trên khắp các Quốc gia Thành viên EU làm cho WCAG 2.1 AA trở thành mức tối thiểu cho các trang web và ứng dụng khu vực tư nhân cung cấp dịch vụ người tiêu dùng. Chế độ phạt thay đổi theo quốc gia nhưng thường dao động từ €50.000 đến €500.000 mỗi vi phạm, cộng với lệnh rút khỏi thị trường đối với việc không tuân thủ liên tục.

Các yêu cầu WCAG cốt lõi cho biểu ngữ cookie

Khả năng vận hành bằng bàn phím

Mọi điều khiển biểu ngữ — Chấp nhận, Từ chối, Quản lý tùy chọn, đóng — phải có thể truy cập và vận hành chỉ bằng bàn phím. Người dùng phải có thể dùng Tab để di chuyển qua các nút theo thứ tự hợp lý và kích hoạt chúng bằng Enter hoặc Space. Tiêu điểm phải hiển thị với tỷ lệ tương phản tối thiểu 3:1 so với nền.

Bẫy tiêu điểm trong biểu ngữ modal

Nếu biểu ngữ chặn tương tác với phần còn lại của trang, tiêu điểm bàn phím phải bị bẫy bên trong biểu ngữ cho đến khi người dùng đưa ra lựa chọn. Người dùng không được phép dùng Tab thoát khỏi biểu ngữ để cuộn trang bên dưới. Khi tiêu điểm bị bẫy và biểu ngữ đóng, tiêu điểm nên quay lại phần tử đã kích hoạt biểu ngữ hoặc về giá trị mặc định hợp lý.

Thông báo trình đọc màn hình

Biểu ngữ phải được thông báo là hộp thoại với tên và vai trò có thể tiếp cận. Sử dụng role="dialog" hoặc role="alertdialog" với aria-labelledby trỏ đến tiêu đề biểu ngữ và aria-describedby trỏ đến văn bản giải thích.

Tương phản màu sắc

Văn bản nội dung phải đáp ứng tương phản 4,5:1 so với nền; văn bản lớn (18pt+ hoặc 14pt đậm) cần 3:1. Văn bản nút, biểu tượng và chỉ báo tiêu điểm đều có mức tương phản tối thiểu riêng. Nút "Từ chối" màu xám nhạt trên nền trắng là lỗi WCAG thường gặp mà chúng tôi thấy trong các cuộc kiểm tra.

Không chỉ dùng màu sắc làm tín hiệu

Đừng chỉ dựa vào màu sắc để phân biệt Chấp nhận và Từ chối. Sử dụng nhãn, biểu tượng hoặc hình dạng khác biệt để người dùng mù màu có thể phân biệt các nút.

Mẫu tối và khả năng tiếp cận

WCAG 2.2 giới thiệu các tiêu chí mới nhắm trực tiếp vào các mẫu tối — đặc biệt liên quan đến đồng ý:

• 3.3.8 Xác thực có thể tiếp cận — cấm câu đố nhận thức như ma sát đồng ý.
• 3.3.7 Nhập liệu dư thừa — người dùng không phải nhập lại thông tin chỉ để rút lại sự đồng ý.
• 2.4.11 Tiêu điểm không bị che khuất — bản thân biểu ngữ không được che khuất chỉ báo tiêu điểm của các phần tử phía sau nó.
• 2.5.7 Chuyển động kéo — nếu biểu ngữ của bạn sử dụng tương tác kéo để chấp nhận, phải có thay thế một con trỏ.

RTL và quốc tế hóa

Khả năng tiếp cận mở rộng đến các ngôn ngữ từ phải sang trái (tiếng Ả Rập, tiếng Do Thái, tiếng Ba Tư, tiếng Urdu) và đến cách phát âm của trình đọc màn hình:

• Đặt dir="rtl" trên biểu ngữ khi ngôn ngữ tài liệu là RTL để thứ tự nút và luồng tiêu điểm khớp với hướng đọc.
• Sử dụng thuộc tính lang chính xác trên bản sao biểu ngữ đã dịch để trình đọc màn hình phát âm các từ với ngữ âm đúng.
• Đảo ngược biểu tượng — chevron, mũi tên và chỉ báo tiến trình nên lật cho các ngôn ngữ RTL.

Kiểm tra biểu ngữ của bạn về tuân thủ WCAG

Đừng dựa vào một công cụ duy nhất. Kết hợp quét tự động với kiểm tra công nghệ hỗ trợ thực tế:

• axe DevTools hoặc Lighthouse — tự động bắt khoảng 30-40% lỗi WCAG.
• NVDA hoặc JAWS trên Windows, VoiceOver trên Mac/iOS, TalkBack trên Android — kiểm tra với trình đọc màn hình thực sự. Biểu ngữ có thể được thông báo, điều hướng và đóng chỉ bằng trình đọc màn hình không?
• Điều hướng chỉ bằng bàn phím — ngắt kết nối chuột. Nếu bạn không thể Chấp nhận, Từ chối và quản lý tùy chọn, người dùng bàn phím cũng không thể.
• Mô phỏng mù màu — Chrome DevTools có trình mô phỏng khiếm khuyết thị giác tích hợp. Kiểm tra xem Chấp nhận và Từ chối có thể phân biệt được dưới protanopia, deuteranopia và tritanopia không.
• Phóng to đến 400% — WCAG yêu cầu nội dung phải có thể sử dụng được ở độ phóng to 400% mà không cần cuộn ngang. Biểu ngữ có vị trí cố định thường thất bại bài kiểm tra này.

Các lỗi khả năng tiếp cận phổ biến chúng tôi thấy

• Ẩn Từ chối sau biểu tượng bánh răng — mẫu tối cộng với lỗi khả năng tiếp cận (không có tên có thể tiếp cận trên nút biểu tượng).
• Tiêu điểm không bao giờ đến biểu ngữ — biểu ngữ thu hút sự chú ý trực quan nhưng bị bỏ qua trong thứ tự Tab.
• Biểu ngữ modal không có bẫy tiêu điểm — người dùng có thể tab vào trang nền trong khi biểu ngữ tuyên bố chặn tương tác.
• Không có aria-live về thay đổi tùy chọn — người dùng trình đọc màn hình không nghe xác nhận rằng lựa chọn của họ đã được lưu.
• Biểu ngữ đã dịch không có thuộc tính lang — trình đọc màn hình phát âm văn bản tiếng Tây Ban Nha với ngữ âm tiếng Anh.

Cách FlexyConsent cung cấp khả năng tiếp cận