Bắt đầu với lựa chọn của người dùng và hệ thống token
Dùng thiết lập hệ thống làm mặc định với prefers-color-scheme. Nếu bạn cung cấp công tắc, dùng điều khiển có thể thao tác bằng bàn phím với tên truy cập được và phơi bày lựa chọn đang bật dưới dạng dữ liệu có thể đọc chương trình. Đặt ưu tiên lựa chọn thủ công trong ngữ cảnh trình duyệt đó; đừng hứa nó sẽ theo người dùng sang thiết bị khác hoặc phiên riêng tư.
Đặt tên màu theo vai trò, không theo hình dáng: canvas, surface, text, muted text, border, link, accent, error, success, focus và disabled. Ánh xạ mọi vai trò trong cả hai chủ đề. Điều này ngăn một màu xám chỉ dành cho sáng rò rỉ sang chế độ tối và làm cho các sửa lỗi có thể tái sử dụng. Chế độ tối không tự nhiên dễ truy cập hơn hay được ưa thích phổ quát; đó là một trải nghiệm khác cần làm cho có thể sử dụng được.
Ghi lại một thứ tự, ví dụ lựa chọn đã lưu trước và thiết lập hệ thống sau, để các nhóm kiểm thử cùng một kết quả.
Bao gồm hover, focus, selected, invalid, disabled, loading, empty và visited-link states, không chỉ mặc định.
Đo độ tương phản trong chủ đề đã render
WCAG 2.2 Tiêu chí thành công 1.4.3 đặt ngưỡng tối thiểu 4.5:1 cho văn bản bình thường và hình ảnh chứa văn bản, và 3:1 cho văn bản lớn. Đừng làm tròn: 4.499:1 không đạt 4.5:1. Kiểu chữ mảnh có thể trông yếu hơn so với màu tính toán của nó, vì vậy hãy dùng font chắc hơn hoặc tăng khoảng cách.
Kiểm tra từng tiền cảnh (foreground) và nền liền kề đã render. Văn bản trên ảnh, gradient, panel bán trong suốt hoặc video có nền thay đổi, vì vậy một phép tính token đơn không chứng minh được khả năng đọc. Dùng nền đục, overlay đủ độ che phủ, hoặc đặt khác vị trí, rồi kiểm tra ở viewport thực tế.
Theo WCAG 2.1 Tiêu chí thành công 1.4.11, thông tin hình ảnh cần để xác định điều khiển đang hoạt động, trạng thái bắt buộc hoặc đồ họa có ý nghĩa cần đạt 3:1 so với màu liền kề.
Kết hợp thay đổi màu với văn bản, biểu tượng, mẫu, vị trí hoặc tín hiệu rõ ràng khác; trạng thái lỗi và đã chọn không nên chỉ dựa vào một sắc tint tinh tế.
Bảo vệ tiêu điểm bàn phím, biểu mẫu và thay đổi trạng thái
Đi qua bằng Tab trong cả hai chủ đề. Tiêu điểm phải nhìn thấy được trên liên kết, nút, input, menu, dialog, widget tùy chỉnh và điều khiển chủ đề. Đừng loại bỏ outline mặc định của trình duyệt trừ khi phần thay thế của bạn đã được kiểm thử trên mọi bề mặt và trạng thái. Một outline lệch thường rõ ràng hơn một glow hòa vào nền.
WCAG 2.2 Focus Appearance là tiêu chí AAA, không phải bằng chứng rằng một trang đạt AA. Đây là mục tiêu hữu ích: một vùng chỉ báo có kích thước ít nhất bằng chu vi 2 CSS-pixel và tỷ lệ tương phản 3:1 giữa pixel được tập trung và không được tập trung. Cũng xác minh rằng trạng thái lỗi, bắt buộc, được chọn và không khả dụng giữ được ý nghĩa.
Thử riêng chữ gợi ý input, giá trị đã nhập, nhãn, văn bản trợ giúp, văn bản lỗi, viền không hợp lệ, dấu checkbox, lựa chọn radio và trạng thái gửi.
Với checkout hoặc luồng bị điều chỉnh khác, dùng sandbox của nhà cung cấp và thu thập đánh giá khả năng truy cập và bảo mật có chuyên môn khi cần. Đây là hướng dẫn mang tính giáo dục, không phải đánh giá tuân thủ hay bảo mật.
Xử lý hình ảnh, tài sản nhúng và UI do trình duyệt cung cấp
Xem xét logo, minh họa, ảnh chụp màn hình, biểu đồ, biểu tượng và văn bản đã ghép sẵn vào ảnh trong cả hai chủ đề. Một logo chỉ có phiên bản sáng có thể biến mất và chú thích biểu đồ có thể không đọc được ngay cả khi HTML xung quanh đạt chuẩn. Cung cấp tài sản phù hợp mục đích hoặc nền ổn định. Hình ảnh truyền đạt hướng dẫn, trạng thái hoặc dữ liệu phải vẫn dễ hiểu.
Khai báo hỗ trợ scheme sáng và tối, sau đó style nội dung trang cho chủ đề được chọn. Thuộc tính color-scheme đồng bộ canvas của trình duyệt, scrollbar, điều khiển form và các UI trình duyệt khác. Đặt metadata tương ứng sớm trong tài liệu. SVG nhúng có thể phản hồi scheme cha; kiểm thử iframe và widget bên thứ ba đầu-cuối.
Ưu tiên điều khiển HTML ngữ nghĩa. Hành vi forced-color dùng ngữ nghĩa gốc, không phải một vai ARIA thêm vào phần tử generic.
Kiểm tra trạng thái đã tải xuống, cache, tải chậm và ảnh lỗi, đặc biệt nơi văn bản hoặc dấu hiệu hành động nằm trên media.
Tôn trọng forced-colors và kiểm thử bản phát hành như một hệ thống
Chế độ forced-colors áp dụng một bảng màu do người dùng chọn hạn chế, ví dụ Windows High Contrast. Trình duyệt có thể thay thế màu, loại bỏ bóng và thêm backplate cho văn bản. Đừng chặn lựa chọn ghi đè. Thực hiện sửa lỗi có mục tiêu nơi component mất biên hoặc ý nghĩa, ví dụ dùng viền thực nơi một bóng đã mang tính affordance. Việc giả lập không thể đại diện cho mọi thiết bị, trình duyệt, extension, mức phóng to hoặc tổ hợp công nghệ hỗ trợ.
Chạy ma trận đường dẫn và tương tác ở chế độ sáng, tối và forced-colors trước khi phát hành. Chrome DevTools có thể giả lập cả hai điều kiện; dùng nó để tăng tốc rà soát, sau đó điều hướng thủ công các luồng ưu tiên. Máy quét tìm ứng viên nhưng không thể xác định tính khả dụng một mình. SIU preflights các tài sản và tương tác chủ đề quan trọng, ghi lại cánh cổng phát hành và giữ đường lui đã được kiểm thử cho các suy giảm trình bày nghiêm trọng; nó không phải giám sát thời gian chết.
Bao gồm landing, navigation, search, account access, forms, error pages, authenticated screens và các luồng chuyển đổi vật liệu.
Lưu các URL đã kiểm thử, phiên bản trình duyệt, cài đặt, ngoại lệ, chủ sở hữu và trigger rollback để khắc phục bắt đầu từ dữ kiện.