Hướng dẫn WCAG 2.2 ‘2.3.2 Chớp sáng không quá 3 lần’ Cấp AAA
Mở đầu
WCAG 2.2 ‘2.3.2 Chớp sáng không quá 3 lần’ yêu cầu loại bỏ nội dung có ánh sáng chớp (flash) xảy ra hơn 3 lần trong 1 giây. Tiêu chuẩn này nhằm mục đích loại bỏ hoàn toàn nguy cơ cơn động kinh nhạy cảm với ánh sáng (đặc biệt là cơn động kinh do kích thích ánh sáng).
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Trên trang web, không đặt nội dung có ánh sáng chớp (flash) xảy ra hơn 3 lần trong 1 giây.
Sự khác biệt (so với 2.3.1)
- Level A ‘2.3.1’: Hạn chế ánh sáng chớp xảy ra hơn 3 lần trong 1 giây, đồng thời cho phép nếu cường độ ánh sáng chớp dưới ngưỡng ‘chớp sáng thông thường’ hoặc ‘chớp sáng đỏ’.
- Level AAA ‘2.3.2’: Ánh sáng chớp (flash) xảy ra hơn 3 lần trong 1 giây sẽ không được phép trong bất kỳ trường hợp nào.
2. 実装方法
a. Kiểm soát tần suất ánh sáng chớp
Ví dụ về việc triển khai hoạt hình an toàn
HTML
<div id="safeFlash" style="width: 100px; height: 100px; background-color: blue;"></div>
CSS
@keyframes safeBlink {
0%, 100% { background-color: blue; }
50% { background-color: lightblue; }
}
#safeFlash {
animation: safeBlink 2s infinite; /* Thay đổi màu sắc ít hơn 1 lần trong 1 giây */
}
Trong ví dụ này, vì hoạt hình chỉ thay đổi 1 lần trong 2 giây, nên không có nguy cơ phát sinh ánh sáng chớp hơn 3 lần trong 1 giây.
b. Điều chỉnh tốc độ hoạt hình
Nếu hoạt hình hiện có phát sinh ánh sáng chớp hơn 3 lần trong 1 giây, điều chỉnh tốc độ để giảm tần suất.
Ví dụ về hoạt hình giảm tần suất
Trước khi sửa đổi
@keyframes fastBlink {
0%, 100% { background-color: red; }
50% { background-color: white; }
}
#fastFlash {
animation: fastBlink 0.5s infinite; /* Ánh sáng chớp phát sinh 4 lần trong 1 giây */
}
Sau khi sửa đổi
@keyframes slowBlink {
0%, 100% { background-color: red; }
50% { background-color: white; }
}
#safeFlash {
animation: slowBlink 2s infinite; /* Ít hơn 1 lần trong 1 giây */
}
c. Loại bỏ hoàn toàn ánh sáng chớp
Nếu có thể, thay thế hiệu ứng có ánh sáng chớp bằng các phương pháp khác.
Phương pháp thay thế: Sử dụng hiệu ứng mờ dần vào và mờ dần ra (fade-in, fade-out)
HTML
<div id="fadeEffect" style="width: 100px; height: 100px; background-color: red;"></div>
CSS
@keyframes fadeInOut {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
#fadeEffect {
animation: fadeInOut 3s infinite; /* Độ sáng thay đổi dần dần */
}
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Nội dung có ánh sáng chớp tần suất cao
Ví dụ thất bại
@keyframes unsafeBlink {
0%, 100% { background-color: red; }
25%, 75% { background-color: white; }
}
#unsafeFlash {
animation: unsafeBlink 0.5s infinite; /* Ánh sáng chớp phát sinh 4 lần trong 1 giây */
}
Ví dụ cải thiện
- Thay đổi tốc độ hoạt hình và giới hạn số lần chớp sáng dưới 3 lần trong 1 giây.
- Hoặc thay thế bằng các hiệu ứng hình ảnh khác (ví dụ: mờ dần).
b. Chớp sáng tần suất cao trong JavaScript.
Ví dụ thất bại
setInterval(() => {
const element = document.getElementById('flashElement');
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}, 200); // Chớp sáng mỗi 200ms (5 lần trong 1 giây)
Ví dụ cải thiện
setInterval(() => {
const element = document.getElementById('flashElement');
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}, 1000); // Chớp sáng ít hơn hoặc bằng 1 lần trong 1 giây
4. Lợi ích của khả năng tiếp cận
a. Loại bỏ hoàn toàn nguy cơ cơn động kinh nhạy cảm với ánh sáng
- Ánh sáng chớp tần suất cao có khả năng gây ra cơn động kinh nhạy cảm với ánh sáng, vì vậy có thể loại bỏ hoàn toàn nguy cơ này.
b. Cung cấp trải nghiệm web an toàn và thoải mái
- Bằng cách tránh ánh sáng chớp, tất cả người dùng có thể sử dụng nội dung một cách an tâm.
c. Tăng cường sự hài lòng của người dùng
- Bằng cách chú ý đến những người dùng có nhu cầu đặc biệt, bạn có thể xây dựng một trang web đáng tin cậy.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra ánh sáng chớp của nội dung động và hoạt hình bằng mắt thường.
- Xác minh rằng ánh sáng chớp không vượt quá 3 lần trong 1 giây.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Photosensitive Epilepsy Analysis Tool để đo tần suất ánh sáng chớp.
Tóm tắt
WCAG 2.2 ‘2.3.2 Chớp sáng không quá 3 lần’ nhằm mục tiêu loại bỏ hoàn toàn ánh sáng chớp xảy ra hơn 3 lần trong 1 giây, giảm thiểu nguy cơ động kinh nhạy cảm với ánh sáng xuống bằng không.
Điểm cần chú ý khi triển khai
- Điều chỉnh tần suất hoạt hình và giới hạn số lần chớp sáng dưới 3 lần trong 1 giây.
- Thay thế ánh sáng chớp bằng các phương pháp thay thế như hiệu ứng mờ dần, nếu cần thiết.
- Sử dụng công cụ để đo tần suất ánh sáng chớp và xác nhận rằng nó đáp ứng các tiêu chuẩn.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web dễ sử dụng cho tất cả người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.