Hướng dẫn WCAG 2.2 ‘2.5.3 Sự phù hợp giữa nhãn và tên’ Mức độ A
Mở đầu
Tiêu chuẩn ‘2.5.3 Sự phù hợp giữa nhãn và tên’ trong WCAG 2.2 nhằm đảm bảo rằng nếu các thành phần giao diện người dùng có nhãn hiển thị, nhãn đó cũng phải được bao gồm trong tên có thể tiếp cận. Tiêu chuẩn này đặc biệt quan trọng để người dùng trình đọc màn hình có thể nhận được thông tin khớp với nhãn hiển thị trên giao diện.
1. Khái quát tiêu chí
Yêu cầu
- Đối với các yếu tố giao diện người dùng như nút bấm và trường nhập liệu, nhãn hiển thị và tên có thể tiếp cận (tên được chỉ định qua chương trình) phải khớp nhau.
- Sự phù hợp bao gồm việc nhãn hiển thị được bao gồm như một phần của tên có thể tiếp cận.
2. Phương pháp triển khai
a. Đảm bảo sự phù hợp giữa nhãn hiển thị và tên có thể tiếp cận
Ví dụ: Sử dụng nhãn hiển thị như một tên có thể tiếp cận
HTML
<label for="username">Tên người dùng</label>
<input type="text" id="username" name="username" aria-label="Tên người dùng">
- Nhãn hiển thị ‘Tên người dùng’ sẽ được truyền đạt đến người dùng trình đọc màn hình thông qua thuộc tính aria-label.
b. Đảm bảo tên có thể tiếp cận của nút khớp với nhãn
Ví dụ: Sử dụng văn bản của nút như một tên có thể tiếp cận
HTML
<button>Gửi</button>
- Văn bản hiển thị của nút ‘Gửi’ sẽ tự động trở thành tên có thể tiếp cận
c. Trong trường hợp nhãn sử dụng hình ảnh
Trong trường hợp sử dụng hình ảnh làm nhãn, hãy chỉ định tên bằng thuộc tính alt hoặc aria-label.
Ví dụ: Nhãn sử dụng hình ảnh
HTML
<button aria-label="Gửi">
<img src="send-icon.png" alt="Gửi">
</button>
- Chỉ định ‘Gửi’ trong thuộc tính alt hoặc aria-label của hình ảnh để trình đọc màn hình có thể truyền đạt chính xác.
d. Trong trường hợp nhãn tùy chỉnh
Trong trường hợp sử dụng nhãn tùy chỉnh, hãy liên kết nhãn và yếu tố bằng thuộc tính aria-labelledby.
Ví dụ: Nhãn tùy chỉnh
HTML
<label id="customLabel">Địa chỉ email</label>
<input type="email" id="email" aria-labelledby="customLabel">
- Sử dụng thuộc tính aria-labelledby để liên kết đúng nhãn ‘Địa chỉ email’.
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Tên có thể tiếp cận không khớp với nhãn
Ví dụ thất bại
<label for="username">Tên người dùng</label>
<input type="text" id="username" name="username" aria-label="Vui lòng nhập">
Vấn đề
- Nhãn hiển thị ‘Tên người dùng’ và aria-label không khớp nhau.
Biện pháp cải thiện
<label for="username">Tên người dùng</label>
<input type="text" id="username" name="username" aria-label="Tên người dùng">
b. Nhãn của nút bị thiếu
Ví dụ thất bại
<button>
<img src="send-icon.png">
</button>
Vấn đề
- Chỉ sử dụng hình ảnh sẽ không được nhận diện là nhãn
Biện pháp cải thiện
<button aria-label="Gửi">
<img src="send-icon.png" alt="">
</button>
4. Lợi ích của khả năng truy cập (accessibility)
a. Quan tâm đến người dùng trình đọc màn hình
- Việc cung cấp tên khớp với nhãn hiển thị giúp người dùng trình đọc màn hình có thể hiểu chính xác nội dung thao tác.
b. Cải thiện tính nhất quán
- Vì thông tin hiển thị và thông tin âm thanh khớp nhau, trải nghiệm trực quan và dễ hiểu được cung cấp cho tất cả người dùng.
c. Giảm thiểu lỗi
- Việc nhãn khớp nhau giúp ngăn ngừa thao tác sai và sự nhầm lẫn
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Sử dụng trình đọc màn hình để kiểm tra xem nhãn hiển thị và tên được đọc lên có khớp nhau không.
- Kiểm tra xem thuộc tính aria-label hoặc aria-labelledby của yếu tố có được thiết lập đúng cách không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra tính phù hợp của tên có thể tiếp cận.
Tóm tắt
Tiêu chuẩn ‘2.5.3 Sự phù hợp giữa nhãn và tên’ trong WCAG 2.2 nhằm mục đích đảm bảo sự khớp nhau giữa nhãn hiển thị và tên có thể tiếp cận, giúp tất cả người dùng hiểu chính xác thao tác.
Điểm cần lưu ý khi triển khai
- Sử dụng nhãn hiển thị như một tên có thể tiếp cận.
- Trong trường hợp nhãn tùy chỉnh, sử dụng aria-labelledby.
- Trong trường hợp nhãn là hình ảnh, thiết lập thuộc tính alt hoặc aria-label.
Điều này giúp cung cấp nội dung web dễ sử dụng và dễ truy cập 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.