Hướng dẫn WCAG 2.2 ‘2.3.1 Chớp sáng không quá 3 lần hoặc dưới ngưỡng’ Cấp A
Mở đầu
WCAG 2.2 ‘2.3.1 Chớp sáng không quá 3 lần hoặc dưới ngưỡng’ 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, hoặc đảm bảo ánh sáng chớp có cường độ dưới ngưỡng của chớp sáng thông thường và ánh sáng đỏ. Tiêu chuẩn này được thiết lập đặc biệt để giảm thiểu nguy cơ co giật nhạy cảm với ánh sáng (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
- Không bao gồm chớp sáng xảy ra quá 3 lần trong 1 giây.。
- Nếu có ánh sáng chớp, cường độ của nó phải dưới ngưỡng của chớp sáng thông thường và ánh sáng đỏ.
Điểm cần chú ý
- Tiêu chuẩn này áp dụng cho toàn bộ nội dung của trang
- Nếu toàn bộ nội dung không đáp ứng tiêu chuẩn này, sẽ có nguy cơ người dùng không thể sử dụng toàn bộ trang
2. Phương pháp triển khai
a. Không phát sinh ánh sáng chớp
Ví dụ về hoạt hình giảm hiệu ứng ánh sáng chớp
HTML
<div id="safeAnimation" style="width: 100px; height: 100px; background-color: blue;"></div>
CSS
@keyframes safeBlink {
0%, 100% { background-color: blue; }
50% { background-color: lightblue; }
}
#safeAnimation {
animation: safeBlink 2s infinite;
}
- Hoạt hình này an toàn vì chỉ thay đổi màu một lần trong 1 giây
b. Giảm diện tích của ánh sáng chớp
Khi diện tích ánh sáng chớp nhỏ, có thể giảm thiểu tác động của kích thích ánh sáng.
Ví dụ về hoạt hình trong khu vực nhỏ
HTML
<div id="smallFlash" style="width: 20px; height: 20px; background-color: red;"></div>
CSS
@keyframes smallFlash {
0%, 100% { background-color: red; }
50% { background-color: darkred; }
}
#smallFlash {
animation: smallFlash 3s infinite;
}
c. Đo ngưỡng của ánh sáng chớp
Sử dụng công cụ đo lường
- Sử dụng công cụ chuyên dụng để xác nhận rằng nội dung không vượt quá ngưỡng dưới đây:
- Ngưỡng chớp sáng thông thường。
- Ngưỡng chớp sáng đỏ。
3. Về ngưỡng chớp sáng
Ngưỡng chớp sáng thông thường
- Khi độ sáng của ánh sáng chớp tăng hoặc giảm đột ngột và sự thay đổi này lớn, nó có thể đạt đến ngưỡng chớp sáng thông thường.
Ngưỡng chớp sáng đỏ
- Ánh sáng chớp có chứa thành phần màu đỏ nhiều, đặc biệt có nguy cơ cao gây ra cơn động kinh nhạy cảm với ánh sáng, vì vậy có những hạn chế nghiêm ngặt.
4. よくある失敗例とその改善策
a. 1秒間に3回を超える閃光を含む
失敗例
@keyframes unsafeBlink {
0%, 100% { background-color: red; }
25%, 75% { background-color: white; }
}
#unsafeAnimation {
animation: unsafeBlink 0.5s infinite;
}
改善策
- アニメーション速度を1秒間に3回未満に変更します。
- 色の変化を緩やかにする。
b. 閃光エリアが大きすぎる
失敗例
#largeFlash {
width: 500px;
height: 500px;
background-color: red;
animation: unsafeBlink 0.5s infinite;
}
改善策
- エリアを小さくする。
- または、アニメーションを完全に削除する。
5. アクセシビリティのメリット
a. Giảm thiểu nguy cơ cơn động kinh nhạy cảm với ánh sáng
- Giảm đáng kể nguy cơ một số ánh sáng chớp gây ra cơn động kinh nhạy cảm với ánh sáng.
b. Cung cấp trải nghiệm web an toàn
- Cung cấp nội dung web an toàn và dễ sử dụng cho tất cả người dùng.
c. Gia tăng sự hài lòng của người dùng
- Bằng cách chú ý đến khả năng tiếp cận, sự tin tưởng và hài lòng của người dùng sẽ được nâng cao.
6. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận rằng ánh sáng chớp trong hoạt hình hoặc video không vượt quá 3 lần trong 1 giây.
- Xác nhận rằng sự thay đổi độ sáng là dần dần.
b. Công cụ kiểm tra tự động
- Sử dụng công cụ chuyên dụng (ví dụ: Photosensitive Epilepsy Analysis Tool để kiểm tra ngưỡng chớp sáng thông thường và ngưỡng chớp sáng đỏ.
Tóm tắt
WCAG 2.2 ‘2.3.1 Chớp sáng không quá 3 lần hoặc dưới ngưỡng’ là tiêu chuẩn hạn chế tần suất và cường độ ánh sáng chớp nhằm ngăn ngừa nguy cơ động kinh nhạy cảm với ánh sáng.
Điểm cần chú ý khi triển khai
- Tránh ánh sáng chớp xảy ra quá 3 lần trong 1 giây.
- Giảm diện tích ánh sáng chớp.
- Xác nhận rằng nó nằm dưới ngưỡng bằng công cụ chuyên dụng.
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.