WCAG 2.2 Hướng dẫn ‘2.4.10 Tiêu đề phần’ Cấp AAA
Mở đầu
2.4.10 Tiêu đề phần" trong WCAG 2.2 yêu cầu sử dụng tiêu đề để tổ chức nội dung một cách hợp lý. Tiêu chí này nhằm mục đích phân chia nội dung thành các phần riêng biệt, giúp người dùng dễ dàng hiểu thông tin.
1. Khái quát tiêu chí
Yêu cầu
- Sử dụng tiêu đề phù hợp cho từng phần để tổ chức nội dung.
- Tiêu đề phải rõ ràng thể hiện cấu trúc thông tin trong trang.
Lưu ý
- “Tiêu đề” được sử dụng trong ý nghĩa rộng, bao gồm cả tiêu đề phần và nhãn.
- Tiêu đề của các thành phần giao diện người dùng không nằm trong phạm vi áp dụng (được bao phủ trong Tiêu chí Thành công 4.1.2)
2. Phương pháp triển khai
a. Sử dụng đúng các yếu tố tiêu đề HTML
Sử dụng các yếu tố tiêu đề HTML từ <h1> đến <h6> để phân chia các phần rõ ràng.
Ví dụ: Phân chia phần bằng cách sử dụng các yếu tố tiêu đề.
HTML
<h1>Tổng quan công ty</h1>
<p>Công ty của chúng tôi là..</p>
<h2>Sứ mệnh</h2>
<p>Sứ mệnh của chúng tôi là...</p>
<h2>Tầm nhìn</h2>
<p>Mục tiêu trong tương lai là...</p>
- Sử dụng <h1> làm tiêu đề chính của trang, và <h2> làm tiêu đề của các phần.
b. Làm cho tiêu đề trở nên dễ hiểu về mặt thị giác
Sử dụng CSS để trang trí tiêu đề, giúp người dùng dễ dàng nhận diện các phần ngay lập tức.
Ví dụ: Kiểu tiêu đề bằng CSS
CSS
h1 {
font-size: 2em;
color: #333;
}
h2 {
font-size: 1.5em;
color: #555;
}
c. Thông tin bổ sung dành cho người dùng trình đọc màn hình
Ngay cả khi tiêu đề không được thể hiện về mặt thị giác, cũng cần đảm bảo rằng nó được nhận diện chính xác bởi trình đọc màn hình.
Ví dụ: Tiêu đề không hiển thị
HTML
<h2 class="sr-only">Thông tin liên hệ</h2>
<div>
<p>Số điện thoại: 012-3456-7890</p>
<p>Email: info@example.com</p>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
d. Thêm tiêu đề cho nội dung động
Thêm tiêu đề cho các phần được tạo động bằng JavaScript.
Ví dụ: Thêm tiêu đề bằng JavaScript
JavaScript
const section = document.createElement('section');
const heading = document.createElement('h2');
heading.textContent = 'Phần mới';
section.appendChild(heading);
document.body.appendChild(section);
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Thiếu tiêu đề
Ví dụ thất bại
<p>Đây là nội dung của phần này</p>
Vấn đề
- Nội dung của phần khó nhận biết ngay lập tức
Biện pháp cải thiện
<h2>Tiêu đề phần</h2>
<p>Đây là nội dung của phần này</p>
b. Cấu trúc tiêu đề không phù hợp
Ví dụ thất bại
<h2>Tiêu đề chính</h2>
<h1>Tiêu đề phụ</h1>
Vấn đề
- Cấp độ tiêu đề bị đảo ngược, dẫn đến cấu trúc thông tin không rõ ràng.
Biện pháp cải thiện
<h1>Tiêu đề chính</h1>
<h2>Tiêu đề phụ</h2>
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện khả năng quét nội dung
- Nhờ có các tiêu đề, người dùng có thể quét nhanh trang và dễ dàng tìm thấy thông tin cần thiết.
b. Chú ý đến người dùng trình đọc màn hình
- Khi tiêu đề được triển khai đúng cách, người dùng có thể di chuyển hiệu quả trong trang thông qua chức năng điều hướng của trình đọc màn hình.
c. Hiệu quả SEO
- Vì công cụ tìm kiếm chú trọng đến các tiêu đề, cấu trúc tiêu đề phù hợp sẽ góp phần cải thiện SEO.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra toàn bộ trang và xác nhận xem mỗi phần có tiêu đề phù hợp hay không.
- Kiểm tra xem các cấp độ tiêu đề có được tổ chức một cách logic hay không.
b. Kiểm tra với trình đọc màn hình
- Sử dụng trình đọc màn hình để kiểm tra xem các tiêu đề có được đọc chính xác 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 cấu trúc tiêu đề.
Tóm tắt
“2.4.10 Tiêu đề phần” của WCAG 2.2 yêu cầu sử dụng tiêu đề để tổ chức thông tin trong trang một cách hợp lý và trực quan.
Điểm cần lưu ý khi triển khai
- Đặt tiêu đề phù hợp cho từng phần.
- Sử dụng các yếu tố tiêu đề HTML theo cấu trúc cấp độ chính xác.
- Cung cấp các tiêu đề có thể nhận diện được bởi trình đọc màn hình.
Đ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.