Hướng dẫn WCAG 2.2 ‘2.4.2 Tiêu đề trang’ Mức A
Mở đầu
Hướng dẫn “2.4.2 Tiêu đề trang” của WCAG 2.2 yêu cầu tiêu đề của trang web phải mô tả rõ ràng chủ đề và mục đích của nó. Tiêu chí này nhằm giúp người dùng dễ dàng hiểu nội dung của trang mà họ đã truy cập, đặc biệt là cải thiện sự tiện lợi cho những người sử dụng phần mềm đọc màn hình.
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Cung cấp tiêu đề rõ ràng và ngắn gọn:
- Diễn đạt nội dung và mục đích của trang một cách phù hợp.
- Đồng nhất tiêu đề theo một định dạng nhất quán.
- Sử dụng đúng yếu tố tiêu đề:
- Sử dụng thẻ <title> trong HTML để chỉ định tiêu đề.
2. Phương pháp triển khai
a. Chỉ định tiêu đề phù hợp
Sử dụng thẻ <title> trong HTML
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liên hệ - Tên công ty</title>
</head>
<body>
<h1>Liên hệ</h1>
<p>Vui lòng điền vào mẫu dưới đây</p>
</body>
</html>
Trong ví dụ này, tiêu đề được chỉ định là ‘Liên hệ – Tên công ty’, và mục đích của trang được làm rõ.
b. Áp dụng định dạng nhất quán
Bằng cách thống nhất định dạng tiêu đề trên toàn bộ trang web, người dùng có thể dễ dàng nhận biết nội dung của mỗi trang.
Ví dụ về định dạng tiêu đề
- Trang chủ: Tên công ty – Trang chủ
- Trang Liên hệ: Liên hệ – Tên công ty
- Trang sản phẩm: Tên sản phẩm – Tên công ty
c. Sử dụng JavaScript để thay đổi tiêu đề động
Ví dụ về thay đổi tiêu đề động
HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Đang tải...</title>
</head>
<body>
<h1>Chào mừng bạn đến với trang web</h1>
</body>
<script>
document.title = 'Trang web - Trang chủ';
</script>
</html>
d. Trường hợp tài liệu PDF
Trong trường hợp PDF, tiêu đề được chỉ định bằng cách sử dụng từ điển thông tin của tài liệu.
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Tiêu đề bị trống hoặc không phù hợp
Ví dụ thất bại
<title>Tài liệu chưa có tiêu đề</title>
Vấn đề
- Tiêu đề trống và không thể hiểu được mục đích của trang
Ví dụ cải thiện
<title>Danh sách dịch vụ - Tên công ty</title>
b. Tiêu đề không nhất quán
Ví dụ thất bại
- Trang A: Tên công ty – Giới thiệu sản phẩm
- Trang B: Chi tiết sản phẩm | Công ty TNHH 〇〇
- Trang C: Danh sách sản phẩm 〇〇
Ví dụ cải thiện
- Sử dụng định dạng thống nhất:
- Giới thiệu sản phẩm – Tên công ty
- Chi tiết sản phẩm – Tên công ty
- Danh sách sản phẩm – Tên công ty
4. Lợi ích của khả năng tiếp cận
a. Cải thiện sự tiện lợi cho người dùng
- Nếu tiêu đề rõ ràng, người dùng có thể nhanh chóng xác định xem trang họ đã truy cập có phù hợp với mục đích của mình hay không.
b. Chú ý đến người dùng sử dụng phần mềm đọc màn hình
- Tiêu đề được đọc đầu tiên bởi phần mềm đọc màn hình, vì vậy nó là phương tiện giúp truyền đạt ngắn gọn nội dung trang.
c. Tác dụng SEO
- Tiêu đề rõ ràng và dễ hiểu sẽ cải thiện đánh giá của công cụ tìm kiếm và tăng khả năng hiển thị của trang web.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem tiêu đề của từng trang có phù hợp không
- Kiểm tra tiêu đề hiển thị trên tab hoặc cửa sổ trình duyệt
b. Kiểm tra bằng phần mềm đọc màn hình
- Mở trang bằng phần mềm đọc màn hình và kiểm tra xem tiêu đề được đọc đầu tiên có phù hợp không.
c. Công cụ kiểm tra tự động
- Sử dụng các công cụ hỗ trợ khả năng truy cập như Axe hoặc WAVE để kiểm tra tính phù hợp của tiêu đề trang.
Tóm tắt
Tiêu chí ‘2.4.2 Tiêu đề trang’ trong WCAG 2.2 là một tiêu chuẩn quan trọng nhằm giúp người dùng dễ dàng hiểu nội dung của trang ngay lập tức.
Điểm cần chú ý khi triển khai
- Cung cấp tiêu đề rõ ràng thể hiện nội dung và mục đích
- Sử dụng thẻ <title> trong HTML một cách chính xác
- Áp dụng định dạng tiêu đề nhất quán trên toàn bộ trang web
Bằng cách thực hiện những điều này, bạn có thể cung cấp 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.