Hướng dẫn WCAG 2.2 “1.3.1 Thông tin và Mối quan hệ” Cấp độ A
Mở đầu
WCAG 2.2 “1.3.1 Thông tin và Mối quan hệ” yêu cầu rằng thông tin, cấu trúc và mối quan hệ phải được đánh dấu (markup) một cách phù hợp để có thể được các công nghệ hỗ trợ (ví dụ: trình đọc màn hình) diễn giải một cách có chương trình. Hướng dẫn này là một tiêu chuẩn quan trọng nhằm giúp người dùng khiếm thị và những người sử dụng công nghệ hỗ trợ khác có thể truy cập nội dung web dễ dàng hơn.
Bài viết này sẽ giải thích nội dung của hướng dẫn và cách triển khai một cách dễ hiểu, kèm theo các ví dụ cụ thể, để những người mới bắt đầu học HTML, CSS và JavaScript cũng có thể hiểu được.
1. Tầm quan trọng của thông tin và mối quan hệ
Trong nhiều nội dung web, thông tin thường được thể hiện bằng các phương pháp trực quan sau:
- Cấu trúc hóa bằng tiêu đề và đoạn văn
- Sắp xếp dữ liệu bằng bảng hoặc danh sách
- Nhấn mạnh bằng cách sử dụng màu sắc hoặc kiểu phông chữ
Nếu thông tin chỉ được truyền đạt một cách trực quan, người dùng sử dụng công nghệ hỗ trợ sẽ không thể tiếp cận được. Bằng cách sử dụng đánh dấu (markup) đúng để làm rõ cấu trúc và mối quan hệ của thông tin, tất cả người dùng sẽ có thể hiểu nội dung dễ dàng hơn.
2. Yêu cầu của hướng dẫn và phương pháp triển khai cơ bản
a. Sử dụng HTML ngữ nghĩa (Semantic HTML)
HTML cung cấp các phần tử ngữ nghĩa để làm rõ cấu trúc của thông tin. Việc sử dụng chúng một cách phù hợp là rất quan trọng.
Sử dụng tiêu đề đúng cách
Sử dụng các thẻ tiêu đề (<h1> đến <h6>) để tổ chức cấu trúc tài liệu theo thứ bậc.
Ví dụ HTML
<h1>Những kiến thức cơ bản về khả năng truy cập web (Web Accessibility)</h1>
<h2>Tầm quan trọng của tiêu đề</h2>
<p>Bằng cách sử dụng tiêu đề đúng cách, cấu trúc của nội dung sẽ trở nên rõ ràng hơn.</p>
Điểm quan trọng
- Tiêu đề nên được sử dụng theo đúng thứ tự (ví dụ: sau <h1> là <h2>, tiếp theo là <h3>).
- Đảm bảo rằng chỉ với các tiêu đề, người dùng có thể nắm bắt được toàn bộ nội dung của trang.
Sử dụng danh sách một cách phù hợp
Danh sách cần được đánh dấu đúng cách bằng danh sách có thứ tự (<ol>) và danh sách không có thứ tự (<ul>).
Ví dụ HTML
<h2>Ví dụ về danh sách có thứ tự</h2>
<ol>
<li>Học HTML</li>
<li>Học CSS</li>
<li>Học JavaScript</li>
</ol>
Sử dụng bảng dữ liệu một cách phù hợp
Trong bảng dữ liệu, sử dụng đúng các ô tiêu đề (<th>) và ô dữ liệu (<td>) để làm rõ mối quan hệ.
Ví dụ HTML
<table>
<caption>Tiêu chuẩn về khả năng truy cập web</caption>
<thead>
<tr>
<th>Số hiệu tiêu chuẩn</th>
<th>Nội dung</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1</td>
<td>Cung cấp văn bản thay thế cho nội dung phi văn bản</td>
</tr>
<tr>
<td>1.3.1</td>
<td>Đảm bảo thông tin và mối quan hệ có thể được nhận diện bằng chương trình</td>
</tr>
</tbody>
</table>
Điểm quan trọng
- Sử dụng <caption> để làm rõ mục đích của bảng
- Sử dụng <th> cho ô tiêu đề và chỉ định mối quan hệ giữa cột hoặc hàng bằng thuộc tính scope.
b. Sử dụng thuộc tính ARIA để bổ sung thông tin
Khi HTML không thể truyền đạt đầy đủ thông tin, hãy sử dụng các thuộc tính ARIA (Accessible Rich Internet Applications).
Kết nối nhãn với các phần tử biểu mẫu.
Ví dụ HTML
<form>
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
</form>
Các mốc xác định khu vực (Landmark)
Ví dụ HTML
<nav aria-label="Điều hướng chính (Main Navigation)">
<ul>
<li><a href="/home">Trang chủ</a></li>
<li><a href="/about">Thông tin công ty</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
c. Không phụ thuộc vào màu sắc hoặc kiểu dáng để truyền đạt thông tin.
Đảm bảo thông tin không chỉ được truyền đạt bằng màu sắc hoặc kiểu dáng.
Ví dụ không phù hợp
<p style="color: red;">Mục này là bắt buộc</p>
Ví dụ cải thiện
<p>Mục này là <strong>bắt buộc</strong>です。</p>
3. Lưu ý khi triển khai
- Xem xét thứ tự của thông tin
Thiết kế để thứ tự đọc bằng công nghệ hỗ trợ khớp với thứ tự hiển thị trực quan. - Tách biệt trang trí trực quan và cấu trúc nội dung
Cấu trúc thông tin được kiểm soát bằng HTML, còn phần trang trí trực quan được kiểm soát bằng CSS.
4. Lợi ích đối với khả năng truy cập
Tuân thủ hướng dẫn này sẽ giúp hỗ trợ các nhóm người dùng sau:
- Người dùng trình đọc màn hình: Khi cấu trúc và mối quan hệ của thông tin được làm rõ, việc hiểu nội dung sẽ trở nên dễ dàng hơn.
- Người dùng có khuyết tật nhận thức：: Việc cấu trúc thông tin hợp lý giúp họ sắp xếp và hiểu nội dung dễ dàng hơn.
Tóm tắt
WCAG 2.2 “1.3.1 Thông tin và Mối quan hệ” là một tiêu chuẩn quan trọng nhằm đánh dấu chính xác thông tin và cấu trúc nội dung, giúp các công nghệ hỗ trợ có thể diễn giải được.
- Sử dụng HTML ngữ nghĩa để làm rõ cấu trúc của thông tin.
- Sử dụng các thuộc tính ARIA để bổ sung thông tin hỗ trợ.
- Truyền đạt thông tin bằng văn bản và cấu trúc, không chỉ dựa vào màu sắc hoặc kiểu dáng.
Ngay cả những người mới bắt đầu cũng có thể tạo ra nội dung web thân thiện với tất cả người dùng bằng cách thực hiện theo hướng dẫn này!
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.