Hướng dẫn WCAG 2.2 “3.1.2 Ngôn ngữ của phần nội dung” Mức AA
Mở đầu
Tiêu chí “3.1.2 Ngôn ngữ của phần nội dung” trong WCAG 2.2 yêu cầu ngôn ngữ của mỗi đoạn văn hoặc cụm từ trong nội dung phải có thể xác định được một cách lập trình. Tiêu chuẩn này rất quan trọng để các công nghệ hỗ trợ như trình đọc màn hình có thể giải thích nội dung một cách chính xác và đọc đúng.
1. Khái quát tiêu chí
Yêu cầu
- Khi một đoạn văn hoặc cụm từ cụ thể trong nội dung khác với ngôn ngữ mặc định của trang, ngôn ngữ đó cần phải được chỉ định một cách lập trình.
- Các danh từ riêng, thuật ngữ kỹ thuật, từ ngữ mơ hồ hoặc từ ngữ ngoại lai quen thuộc với ngôn ngữ xung quanh sẽ không cần phải chỉ định ngôn ngữ.
Ví dụ
Ví dụ: Nếu trang web được viết bằng tiếng Việt nhưng có một phần bằng tiếng Anh, cần chỉ định ngôn ngữ cho phần tiếng Anh như sau:
<p>Tiêu đề của trang này là <span lang="en">Web Accessibility Guidelines</span> </p>
2. Phương pháp triển khai
a. Chỉ định ngôn ngữ trong HTML
Trong HTML, sử dụng thuộc tính lang để chỉ định ngôn ngữ của cụm từ hoặc đoạn văn.
Ví dụ: Chỉ định tiếng Anh
<p>Trên trang web của chúng tôi, chúng tôi chú trọng vào <span lang="en">Accessibility</span></p>
lang="en"giúp trình đọc màn hình nhận diện “Accessibility” là tiếng Anh và phát âm đúng cách.
b. Chỉ định ngôn ngữ trong PDF
Trong PDF, sử dụng Lang entry để chỉ định ngôn ngữ cho các đoạn văn hoặc cụm từ cụ thể. Việc này có thể được thiết lập thông qua các công cụ như Adobe Acrobat.
c. Kết hợp với CSS
Khi áp dụng kiểu dáng cho các phần đã chỉ định ngôn ngữ, có thể sử dụng kết hợp với CSS.
Ví dụ: Áp dụng kiểu dáng cho văn bản tiếng Pháp
HTML
<p>Câu nói nổi tiếng của ông là, <span lang="fr">Liberté, égalité, fraternité</span></p>
CSS
[lang="fr"] {
font-style: italic;
}
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Quên chỉ định ngôn ngữ
Ví dụ thất bại
<p>Slogan của ông là "Yes we can"</p>
Vấn đề
- Phần tiếng Anh có thể bị nhận diện là tiếng Nhật và bị đọc sai
Biện pháp cải thiện
<p>Slogan của ông là <span lang="en">"Yes we can"</span> </p>
b. Cài đặt ngôn ngữ bị sai
Ví dụ thất bại
<p>Slogan của ông là <span lang="de">"Yes we can"</span></p>
Vấn đề
- Mặc dù thực tế là tiếng Anh, nhưng vì nó được chỉ định là tiếng Đức, nên sẽ không được đọc chính xác.
Biện pháp cải thiện
<p>Slogan của ông là <span lang="en">"Yes we can"</span></p>
4. Lợi ích của khả năng truy cập (accessibility)
a. Phát âm chính xác
- Để trình đọc màn hình có thể đọc đúng ngôn ngữ, thông tin chính xác sẽ được truyền đạt đến tất cả người dùng.
b. Hỗ trợ học tập và hỗ trợ đa ngôn ngữ
- Khi nội dung hỗ trợ đa ngôn ngữ được làm rõ, nó sẽ trở thành nội dung dễ sử dụng đối với người học và người dùng nói các ngôn ngữ khác nhau.
c. Thiết kế toàn diện
- Cải thiện khả năng hỗ trợ người dùng nói các ngôn ngữ khác nhau và nâng cao trải nghiệm người dùng quốc tế.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra mã nguồn để xác nhận xem ngôn ngữ của mỗi cụm từ hoặc đoạn văn đã được chỉ định đúng hay chưa.
- Sử dụng trình đọc màn hình để kiểm tra xem nội dung có được đọc chính xác bằng ngôn ngữ đã chỉ định hay không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra xem thuộc tính lang có được thiết lập đúng cách hay không.
Tóm tắt
Tiêu chí “3.1.2 Ngôn ngữ của phần nội dung” trong WCAG 2.2 nhằm mục đích đảm bảo ngôn ngữ trong nội dung được chỉ định chính xác, giúp các công nghệ hỗ trợ hoạt động đúng cách và truyền đạt thông tin đến tất cả người dùng.
Điểm cần lưu ý khi triển khai
- Sử dụng thuộc tính lang cho các phần có ngôn ngữ khác với ngôn ngữ mặc định.
- Cài đặt ngôn ngữ một cách chính xác để tránh hiểu lầm.
- Cài đặt ngôn ngữ phù hợp trong PDF.
Đ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.