Về tiêu chí 1.3.3 Đặc điểm cảm giác (Level A) trong hướng dẫn WCAG 2.2
Mở đầu
Tiêu chí 1.3.3 “Đặc điểm cảm giác” trong WCAG 2.2 yêu cầu rằng các chỉ dẫn cần thiết để hiểu hoặc thao tác với nội dung không được chỉ dựa vào các đặc điểm cảm giác như hình dạng, màu sắc, kích thước, vị trí, hướng hoặc âm thanh. Tiêu chí này rất quan trọng nhằm giúp người dùng có hạn chế về thị giác hoặc thính giác vẫn có thể hiểu được nội dung hướng dẫn.
Trong bài viết này, chúng tôi sẽ giải thích một cách dễ hiểu kèm theo các ví dụ cụ thể, nhằm giúp cả những người mới bắt đầu học HTML, CSS và JavaScript cũng có thể hiểu được.
1. Phụ thuộc vào đặc điểm cảm giác là gì?
Ví dụ về chỉ dẫn không phù hợp
- “Hãy nhấp vào nút màu xanh ở góc trên bên phải.”
→ Phụ thuộc vào vị trí (góc trên bên phải) và màu sắc (màu xanh). - Hãy nhấp vào hình mũi tên."
→ Phụ thuộc vào hình dạng (mũi tên).
Những chỉ dẫn như vậy có thể gây khó hiểu đối với các đối tượng người dùng sau:
- Người khiếm thị: Không thể nhìn thấy màu sắc hoặc hình dạng nên không hiểu được chỉ dẫn.
- Người bị rối loạn thị giác màu (mù màu): Không thể nhận diện được một số màu sắc nhất định.
- Người có khuyết tật nhận thức: Gặp khó khăn trong việc nhận diện vị trí trong không gian.
Ví dụ về chỉ dẫn phù hợp
- “Hãy nhấp vào nút có chữ [Gửi].”
→ Có phần mô tả bằng văn bản - “Hãy chọn ‘Cài đặt’ từ menu.”
→ Đối tượng thao tác được chỉ rõ ràng
2. Phương pháp triển khai đáp ứng tiêu chí
a. Thêm phần mô tả bằng văn bản
Trường hợp phải dựa vào các đặc điểm cảm giác, nhất định phải bổ sung phần mô tả bằng văn bản.
Ví dụ không phù hợp
<p>Hãy nhấp vào nút màu đỏ</p>
<button style="background-color: red;">Gửi</button>
Ví dụ cải thiện
<p>Hãy nhấp vào nút màu đỏ có chữ [Gửi]</p>
<button style="background-color: red;">送信</button>
Điểm mấu chốt
- Không chỉ dựa vào màu sắc, mà còn ghi rõ chữ “Gửi” trên nút và giải thích bằng văn bản.
b. Tận dụng HTML ngữ nghĩa (semantic HTML)
Bằng cách sử dụng HTML ngữ nghĩa, có thể truyền đạt thông tin một cách chính xác đến các công nghệ hỗ trợ.
Ví dụ không phù hợp
<div onclick="submitForm()" style="width: 100px; height: 50px; background-color: green;"> </div>
Ví dụ cải thiện
<button onclick="submitForm()">Gửi</button>
Điểm mấu chốt
- Không chỉ dựa vào thiết kế hình thức, việc sử dụng phần tử nút (button) giúp làm rõ mục đích sử dụng.
c. Cung cấp nội dung thay thế cho âm thanh
Khi truyền đạt thông tin chỉ bằng âm thanh, nhất định phải cung cấp văn bản thay thế tương ứng.
Ví dụ không phù hợp
- Thông báo âm thanh: “Để tiếp tục, hãy nhấn nút khi nghe thấy tiếng bíp.”
Ví dụ cải thiện
- Ngoài thông báo âm thanh, hiển thị văn bản sau trên màn hình:
<p>Hãy nhấn nút "Tiếp theo"</p> <button>Tiếp theo</button>
3. Những lỗi thường gặp và cách khắc phục
a. Truyền đạt thông tin chỉ bằng màu sắc.
Ví dụ không phù hợp
<p>Các mục có nền màu đỏ là bắt buộc nhập</p>
Ví dụ cải thiện
<p>Các mục bắt buộc nhập được hiển thị với nhãn [Bắt buộc].</p>
<form>
<label>Họ tên <span>[Bắt buộc]</span></label>
<input type="text">
</form>
b. Truyền đạt thông tin chỉ bằng hình dạng hoặc vị trí.
Ví dụ không phù hợp
<p>Hãy nhấp vào mũi tên ở góc trên bên phải.</p>
<img src="arrow.png" alt="Mũi tên">
Ví dụ cải thiện
<p>Hãy nhấp vào nút [Tiếp theo]</p>
<button>Tiếp theo</button>
4. Điểm cần lưu ý khi triển khai
Ưu tiên sử dụng văn bản
- Chỉ dẫn phải luôn được cung cấp bằng văn bản.
- Việc sử dụng các đặc điểm cảm giác như một yếu tố bổ sung là chấp nhận được, nhưng nhất định phải cung cấp thông tin thay thế.
Tận dụng thuộc tính ARIA
- Sử dụng nhãn ARIA (ARIA label) để cung cấp thông tin bổ trợ ngay cả khi người dùng không thể hiểu bằng hình ảnh.
Ví dụ
<button aria-label="Chuyển sang bước tiếp theo">Tiếp theo</button>
5. Lợi ích của khả năng truy cập (Accessibility)
Việc tuân thủ tiêu chí “1.3.3 Đặc điểm cảm giác” giúp đáp ứng nhu cầu của các nhóm người dùng sau:
- Người khiếm thị: Có thể hiểu nội dung thông qua công nghệ hỗ trợ.
- Người bị rối loạn thị giác màu (mù màu): Có thể thao tác dựa trên thông tin khác ngoài màu sắc.
- Người có khuyết tật nhận thức: Nhờ chỉ dẫn dễ hiểu, giảm thiểu lỗi thao tác.
Tóm tắt
Tiêu chí “1.3.3 Đặc điểm cảm giác” trong WCAG 2.2 yêu cầu không được phụ thuộc chỉ vào các đặc điểm cảm giác như hình dạng hay màu sắc để người dùng thao tác hoặc hiểu nội dung.
- Thêm chỉ dẫn bằng văn bản và sử dụng các đặc điểm cảm giác như một yếu tố bổ trợ.
- Tận dụng HTML ngữ nghĩa và thuộc tính ARIA để tăng cường khả năng hỗ trợ cho các công nghệ trợ giúp.
Bằng cách thực hiện những điều này, bạn sẽ bước những bước đầu tiên trong việc tạo ra 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.