Về Hướng dẫn WCAG 2.2 – Mục 2.4.6: Tiêu đề và nhãn (mức độ AA)
Mở đầu
Mục 2.4.6 “Tiêu đề và nhãn” trong WCAG 2.2 yêu cầu rằng tiêu đề và nhãn phải mô tả rõ ràng chủ đề hoặc mục đích của phần hoặc thành phần đó. Tiêu chí này nhằm giúp người dùng nhanh chóng hiểu nội dung và dễ dàng tìm thấy thông tin cần thiết.
1. Tổng quan tiêu chí
Yêu cầu
- Tiêu đề cần diễn đạt ngắn gọn và rõ ràng chủ đề của nội dung.
- Nhãn cần giải thích rõ ràng mục đích của thông tin hoặc lựa chọn mà người dùng cần nhập.
2. Phương pháp triển khai
a. Thiết lập tiêu đề một cách phù hợp
Ví dụ về tiêu đề
HTML
<h1>Liên hệ</h1>
<section>
<h2>Liên hệ qua điện thoại</h2>
<p>Số điện thoại ở đây</p>
</section>
<section>
<h2>Liên hệ qua email</h2>
<form>
<label for="email">Địa chỉ email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
</section>
- Việc đặt tiêu đề phù hợp cho từng phần sẽ giúp nội dung trở nên rõ ràng hơn và dễ dàng điều hướng hơn.
Ví dụ không phù hợp
<h1>Liên hệ</h1>
<section>
<h2>Phương pháp 1</h2>
<p>Số điện thoại là như sau</p>
</section>
<section>
<h2>Phương pháp 2</h2>
<form>
<label for="email">Địa chỉ email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
</section>
- Các tiêu đề như “Phương pháp 1” hay “Phương pháp 2” thiếu tính cụ thể về nội dung
b. Thiết lập nhãn một cách phù hợp
Ví dụ về nhãn
HTML
<form>
<label for="name">Họ tên:</label>
<input type="text" id="name" name="name">
<label for="email">Địa chỉ email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
- Bằng cách cung cấp nhãn phù hợp cho từng trường nhập liệu, người dùng có thể hiểu chính xác thông tin cần nhập.
Ví dụ sử dụng ARIA
HTML
<form>
<div aria-label="Biểu mẫu nhập họ tên">
<input type="text" placeholder="Họ tên">
</div>
<div aria-label="Biểu mẫu nhập địa chỉ email">
<input type="email" placeholder="Địa chỉ email">
</div>
<button type="submit">Gửi</button>
</form>
- Có thể sử dụng aria-label để bổ sung các nhãn không hiển thị về mặt trực quan.
c. Thêm mô tả phù hợp với ngữ cảnh
Cung cấp thông tin bổ sung
HTML
<form>
<label for="password">Mật khẩu (từ 8 ký tự trở lên):</label>
<input type="password" id="password" name="password">
</form>
- Ghi rõ các yêu cầu cần thiết trong nhãn (ví dụ: “từ 8 ký tự trở lên”) để người dùng có thể nhập thông tin chính xác.
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Tiêu đề không cụ thể
Ví dụ thất bại
<h2>Phần 1</h2>
<p>Phần này chứa thông tin</p>
Biện pháp cải thiện
<h2>Đặc điểm của sản phẩm</h2>
<p>Phần này trình bày chi tiết các đặc điểm của sản phẩm</p>
b. Thiếu nhãn
Ví dụ thất bại
<form>
<input type="text" placeholder="名前を入力">
<input type="email" placeholder="メールアドレスを入力">
<button type="submit">送信</button>
</form>
Vấn đề
- Trình đọc màn hình có thể không nhận diện văn bản gợi ý (placeholder) là phần mô tả đầy đủ.
Biện pháp cải thiện
<form>
<label for="name">Họ tên:</label>
<input type="text" id="name" name="name">
<label for="email">Địa chỉ email:</label>
<input type="email" id="email" name="email">
</form>
4. Lợi ích của khả năng truy cập (accessibility)
a. Nâng cao trải nghiệm người dùng
- Tiêu đề và nhãn rõ ràng giúp người dùng dễ dàng hiểu nội dung, từ đó nâng cao mức độ hài lòng của họ.
b. Quan tâm đến người dùng trình đọc màn hình
- Tiêu đề và nhãn được thiết lập đúng cách sẽ được trình đọc màn hình đọc chính xác, giúp người dùng dễ dàng tiếp cận thông tin.
c. Giảm thiểu lỗi khi nhập liệu
- Nhãn rõ ràng giúp người dùng dễ dàng nhập thông tin chính xác hơn.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Xác nhận rằng các tiêu đề trong trang phù hợp với nội dung
- Xác nhận rằng các nhãn tương ứng với trường nhập liệu đã được thiết lập đúng cách
b. Kiểm tra bằng trình đọc màn hình
- Sử dụng trình đọc màn hình để kiểm tra xem tiêu đề và nhãn có được đọc lên một cách phù hợp hay không.
c. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra tính phù hợp của tiêu đề và nhãn
Tóm tắt
Mục 2.4.6 “Tiêu đề và nhãn” trong WCAG 2.2 nhằm truyền đạt rõ ràng mục đích của nội dung hoặc thành phần đến người dùng.
Điểm cần lưu ý khi triển khai
- Tiêu đề cần được viết một cách cụ thể và ngắn gọn
- Thiết lập nhãn một cách phù hợp và làm rõ các yêu cầu nhập liệu
- Sử dụng thuộc tính ARIA như một phần hỗ trợ để cung cấp thông tin bổ sung
Đ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.