Về hướng dẫn WCAG 2.2 – Mục 1.4.1 Sử dụng màu sắc (Level A)
Mở đầu
Tiêu chí “1.4.1 Sử dụng màu sắc” trong WCAG 2.2 yêu cầu không sử dụng màu sắc làm phương tiện truyền đạt thông tin duy nhất. Tiêu chí này rất quan trọng để đảm bảo rằng người dùng bị khiếm khuyết thị giác hoặc có hạn chế về khả năng nhận biết màu sắc vẫn có thể hiểu và thao tác với nội dung.
Trong bài viết này, chúng tôi sẽ giải thích nội dung và cách triển khai tiêu chí “1.4.1 Sử dụng màu sắc” một cách dễ hiểu, kèm theo các ví dụ cụ thể, dành cho những người mới bắt đầu học HTML, CSS và JavaScript.
1. Vấn đề khi chỉ phụ thuộc vào màu sắc
Khi truyền đạt thông tin chỉ bằng màu sắc, một số người dùng sau đây có thể gặp khó khăn trong việc hiểu nội dung:
- Người có rối loạn nhận biết màu sắc: Khó phân biệt sự khác nhau giữa các màu.
- Người sử dụng màn hình đơn sắc (đen trắng): Không thể xác nhận thông tin truyền đạt bằng màu sắc một cách trực quan.
- Người khiếm thị: Không thể nhận biết thông tin dựa trên màu sắc.
2. Phương pháp triển khai không phụ thuộc vào màu sắc
a. Thêm các phương tiện trực quan khác ngoài màu sắc
Khi truyền đạt thông tin, hãy kết hợp sử dụng các phương tiện trực quan khác ngoài màu sắc (như văn bản, biểu tượng, đường viền, v.v.).
Trường nhập bắt buộc trong biểu mẫu
Ví dụ không phù hợp
<form>
<label for="name" style="color: red;">Tên</label>
<input type="text" id="name" name="name">
</form>
<p>*Nhãn màu đỏ biểu thị trường bắt buộc.</p>
- Vì chỉ sử dụng màu (đỏ) để biểu thị trường bắt buộc nên người dùng bị rối loạn nhận biết màu sắc có thể không hiểu được.
Ví dụ cải thiện
<form>
<label for="name">Tên <span style="color: red;">*</span></label>
<input type="text" id="name" name="name">
</form>
<p>*biểu thị trường bắt buộc</p>
- Trường bắt buộc được làm rõ bằng ký hiệu “*”, bổ sung thông tin không phụ thuộc vào màu sắc.
b. Phân biệt liên kết bằng cách khác ngoài màu sắc
Tránh chỉ sử dụng màu sắc để phân biệt liên kết, hãy sử dụng thêm các phương tiện trực quan khác như gạch chân hoặc độ đậm của phông chữ.
Ví dụ không phù hợp
<p>Vui lòng xem tại đây để biết thêm chi tiết.</p>
- Vì liên kết chỉ được phân biệt bằng màu sắc (màu xanh), người dùng bị rối loạn nhận biết màu sắc có thể không nhận ra được.
Ví dụ cải thiện
<p>Vui lòng xem <a href="#" style="text-decoration: underline;">tại đây</a> để biết thêm chi tiết.</p>
- Thêm gạch chân để làm rõ đó là liên kết, giúp nhận biết không chỉ dựa vào màu sắc.
c. Cung cấp thông tin thay thế cho màu sắc trong hình ảnh
Khi sử dụng màu sắc trong hình ảnh để truyền đạt thông tin, hãy bổ sung nội dung đó bằng văn bản.
Ví dụ không phù hợp
<img src="chart.png" alt="Biểu đồ cột màu đỏ biểu thị doanh thu, biểu đồ cột màu xanh biểu thị lợi nhuận.">
- Vì truyền đạt thông tin chỉ bằng màu sắc, nên người dùng khiếm thị sẽ khó hiểu.
Ví dụ cải thiện
<img src="chart.png" alt="Biểu đồ cột màu đỏ biểu thị doanh thu, còn biểu đồ cột màu xanh biểu thị lợi nhuận. Cụ thể, doanh thu là 1 triệu yên và lợi nhuận là 500 nghìn yên.">
- Cung cấp thông tin cụ thể bằng văn bản để cải thiện nội dung, tránh phụ thuộc vào màu sắc.
3. Bổ sung các phương tiện trực quan ngoài màu sắc bằng cách sử dụng CSS
a. Thay đổi trực quan khi có tiêu điểm (focus)
Thêm hiệu ứng thay đổi trực quan khi liên kết hoặc nút được focus (lấy tiêu điểm).
Ví dụ CSS
a:focus {
outline: 2px dashed blue;
text-decoration: underline;
}
- Hiển thị gạch chân và đường viền khi focus để làm rõ sự thay đổi trực quan.
b. Sử dụng họa tiết thay cho mã màu sắc
Trong biểu đồ hoặc đồ thị, hãy sử dụng họa tiết hoặc nhãn thay vì chỉ dựa vào màu sắc.
Ví dụ CSS
.bar-red {
background-color: red;
background-image: repeating-linear-gradient(45deg, black, black 5px, transparent 5px, transparent 10px);
}
.bar-blue {
background-color: blue;
background-image: repeating-linear-gradient(-45deg, black, black 5px, transparent 5px, transparent 10px);
}
4. Các lỗi thường gặp và biện pháp khắc phục
a. Chỉ biểu thị trường bắt buộc bằng màu sắc
Trường hợp lỗi
<p style="color: red;">*là mục bắt buộc</p>
Biện pháp cải thiện
<p>*là mục bắt buộc</p>
b. Phân biệt liên kết chỉ bằng màu sắc
Trường hợp lỗi
<a href="#">Liên kết</a>
Biện pháp cải thiện
<a href="#" style="text-decoration: underline;">Liên kết</a>
5. Lợi ích của khả năng truy cập (accessibility)
a. Người dùng có rối loạn nhận biết màu sắc có thể hiểu được nội dung.
Nếu có thông tin ngoài màu sắc, bất kỳ ai cũng có thể hiểu chính xác thông tin.
b. Nâng cao trải nghiệm người dùng
Tăng khả năng nhìn thấy của liên kết và nút bấm, giúp giảm thiểu lỗi thao tác.
Tóm tắt
Tiêu chí “1.4.1 Sử dụng màu sắc” trong WCAG 2.2 yêu cầu không chỉ truyền đạt thông tin bằng màu sắc mà còn phải sử dụng thêm các phương tiện trực quan hoặc văn bản bổ sung.
Điểm chính trong triển khai
- Không chỉ phụ thuộc vào màu sắc mà kết hợp sử dụng văn bản hoặc biểu tượng.
- Thêm gạch chân hoặc đường viền cho liên kết và nút bấm để phân biệt một cách trực quan.
- Cung cấp văn bản thay thế cho thông tin màu sắc trong hình ảnh.
Bằng cách tuân thủ những điều này, bạn có thể tạo ra một môi trường nơi mọi người đều có thể truy cập và sử dụng nội dung web một cách bình đẳ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.