Hướng dẫn WCAG 2.2 “3.1.1 Ngôn ngữ trang” Mức A
Mở đầu
Tiêu chí “3.1.1 Ngôn ngữ trang” trong WCAG 2.2 yêu cầu ngôn ngữ mặc định của mỗi trang web phải có thể xác định một cách lập trình. Tiêu chuẩn này rất quan trọng để đảm bảo các công nghệ hỗ trợ như trình đọc màn hình hoạt động đúng cách, giúp người dùng hiểu nội dung của trang một cách chính xác.
1. Khái quát tiêu chí
Yêu cầu
Ngôn ngữ mặc định của toàn bộ trang web cần phải được thiết lập một cách rõ ràng trong các tài liệu như HTML hoặc PDF.
Ví dụ
- Ví dụ: Nếu toàn bộ trang web được viết bằng tiếng Việt, sử dụng thuộc tính lang trong HTML để chỉ định ngôn ngữ là tiếng Việt.
<html lang="vi">
2. Phương pháp triển khai
a. Cài đặt ngôn ngữ trong HTML
Sử dụng thuộc tính lang để chỉ định ngôn ngữ của trang. Thuộc tính lang được ghi vào phần tử gốc của HTML (<html>).
Ví dụ: Nếu trang web bằng tiếng Việt
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Tiêu đề trang</title>
</head>
<body>
<h1>Xin chào</h1>
</body>
</html>
- lang=“vi” giúp thông báo cho các công nghệ hỗ trợ rằng ngôn ngữ mặc định của trang này là tiếng Việt.
b. Cài đặt ngôn ngữ trong PDF
Trong trường hợp PDF, sử dụng /Lang entry để chỉ định ngôn ngữ mặc định. Việc này có thể được thiết lập thông qua phần mềm chỉnh sửa PDF như Adobe Acrobat.
c. Cài đặt ngôn ngữ trong header HTTP
Một cách khác để chỉ định ngôn ngữ mặc định là thông qua việc cài đặt header HTTP trên máy chủ web.
Ví dụ: Chỉ định tiếng Việt
Content-Language: vi
- Phương pháp này giúp hỗ trợ nhiều công nghệ có thể được sử dụng ở phía khách hàng.
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Ngôn ngữ không được chỉ định
Ví dụ thất bại
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Vấn đề
- Vì ngôn ngữ mặc định chưa được thiết lập, có thể trình đọc màn hình sẽ không đọc đúng cách.
Biện pháp cải thiện
<html lang="en">
b. Cài đặt ngôn ngữ không chính xác
Ví dụ thất bại
<html lang="fr">
Vấn đề
- Mặc dù nội dung trang là tiếng Anh, nhưng lại chỉ định lang=“fr” (tiếng Pháp).
Biện pháp cải thiện
<html lang="en">
4. Lợi ích của khả năng truy cập (accessibility)
a. Đọc chính xác của trình đọc màn hình
- Khi thông tin ngôn ngữ chính xác, trình đọc màn hình sẽ đọc nội dung với phát âm đúng.
b. Tối ưu hóa công cụ tìm kiếm (SEO)
- Khi thông tin ngôn ngữ của trang được chỉ rõ, công cụ tìm kiếm có thể lập chỉ mục nội dung một cách chính xác.
c. Cải thiện trải nghiệm người dùng
- Người dùng sẽ dễ dàng hiểu chính xác nội dung của trang.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra mã nguồn và xác nhận xem thuộc tính lang đã được thiết lập đúng hay chưa.
- Kiểm tra xem ngôn ngữ được chỉ định có phù hợp với nội dung của trang hay không.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ kiểm tra khả năng truy cập như Axe hoặc WAVE để xác nhận cài đặt thuộc tính lang.
Tóm tắt
Tiêu chí “3.1.1 Ngôn ngữ trang” trong WCAG 2.2 nhằm mục đích đảm bảo ngôn ngữ mặc định của trang web có thể xác định được một cách lập trình, giúp tất cả người dùng có thể hiểu chính xác nội dung.
Điểm cần lưu ý khi triển khai
- Cài đặt thuộc tính lang trong phần tử gốc của HTML.
- Cài đặt ngôn ngữ một cách thích hợp trong PDF và HTTP header.
- Cài đặt ngôn ngữ phù hợp với nội dung của trang.
Đ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.