Hướng dẫn WCAG 2.2 ‘1.3.2 Thứ tự có ý nghĩa’ Mức A
Mở đầu
Tiêu chuẩn “1.3.2 Thứ tự có ý nghĩa” trong WCAG 2.2 yêu cầu rằng thứ tự của nội dung có ảnh hưởng đến ý nghĩa phải được nhận diện đúng bằng các chương trình. Tiêu chuẩn này rất quan trọng để giúp người dùng sử dụng công nghệ hỗ trợ, như trình đọc màn hình, hiểu nội dung theo đúng thứ tự.
Trong bài viết này, chúng tôi sẽ giải thích chi tiết nội dung của hướng dẫn bằng các ví dụ cụ thể và phương pháp triển khai, nhằm giúp những người mới bắt đầu học HTML, CSS và JavaScript dễ dàng hiểu hơn.
1. Thứ tự có ý nghĩa là gì?
Nội dung web có thể có thứ tự mang ý nghĩa trong các tình huống sau:
- Thứ tự của các đoạn văn và tiêu đề
Ví dụ: Hiển thị nội dung theo thứ tự ‘Giới thiệu’ → ‘Giải thích chi tiết’ → ‘Kết luận’. - Các bước hướng dẫn hoặc danh sách được đánh số
Ví dụ: Cung cấp hướng dẫn thao tác theo thứ tự ‘Bước 1’ → ‘Bước 2’ → ‘Bước 3’ - Thứ tự nhập liệu trong biểu mẫu
Đảm bảo người dùng có thể nhập biểu mẫu theo đúng thứ tự.
Để các công nghệ hỗ trợ trình bày nội dung cho người dùng theo đúng thứ tự, thứ tự trong DOM (Document Object Model) cần phải khớp với thứ tự hiển thị trực quan.
2. Yêu cầu và phương pháp triển khai của hướng dẫn
a. Điều chỉnh thứ tự DOM khớp với thứ tự hiển thị trực quan
Việc đảm bảo thứ tự trong DOM khớp với thứ tự hiển thị trực quan là điều cơ bản.
Kiểm soát bố cục hiển thị bằng CSS và viết cấu trúc HTML theo thứ tự logic đúng.
Ví dụ không phù hợp
<div style="order: 2;">Bước 2</div>
<div style="order: 1;">Bước 1</div>
- Do thứ tự bị thay đổi bằng thuộc tính order của CSS, nên thứ tự đọc của trình đọc màn hình sẽ khác với thứ tự hiển thị trực quan.
Ví dụ cải thiện
<div>Bước 1</div>
<div>Bước 2</div>
- Sắp xếp cấu trúc HTML theo thứ tự logic và điều chỉnh giao diện bằng CSS.
b. Đánh dấu danh sách và bảng một cách phù hợp
Sử dụng danh sách và bảng một cách phù hợp để thể hiện rõ thứ tự và mối liên hệ.
Trong trường hợp danh sách
Ví dụ HTML
<h2>Quy trình</h2>
<ol>
<li>Nhập thông tin vào biểu mẫu</li>
<li>Kiểm tra nội dung</li>
<li>Nhấn nút gửi</li>
</ol>
Trong trường hợp bảng (table)
Ví dụ HTML
<table>
<thead>
<tr>
<th>Ngày tháng</th>
<th>Sự kiện</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/01/2024</td>
<td>Sự kiện đón năm mới</td>
</tr>
<tr>
<td>14/02/2024</td>
<td>Lễ Valentine</td>
</tr>
</tbody>
</table>
c. Thiết lập đúng thứ tự nhập liệu trong biểu mẫu
Sắp xếp thứ tự nhập liệu trong biểu mẫu một cách logic và sử dụng tabindex một cách hợp lý.
Ví dụ HTML
<form>
<label for="name">Tên：</label>
<input type="text" id="name" name="name" tabindex="1">
<label for="email">Email：</label>
<input type="email" id="email" name="email" tabindex="2">
<button type="submit" tabindex="3">Gửi</button>
</form>
3. Những lỗi thường gặp và cách khắc phục
a. Không khớp giữa thứ tự hiển thị trực quan và thứ tự trong DOM
Ví dụ lỗi
<div>Bước 3</div>
<div>Bước 1</div>
<div>Bước 2</div>
- Do thứ tự trong DOM không khớp với thứ tự hiển thị trực quan, trình đọc màn hình sẽ không truyền đạt đúng thứ tự cho người dùng.
Biện pháp cải thiện
<div>Bước 1</div>
<div>Bước 2</div>
<div>Bước 3</div>
b. Bố cục sử dụng ký tự khoảng trắng
Bố cục được thể hiện bằng ký tự khoảng trắng sẽ không được trình đọc màn hình đọc chính xác.
Ví dụ lỗi
<p>Cột 1 Cột 2 Cột 3</p>
Biện pháp cải thiện
<table>
<tr>
<td>Cột 1</td>
<td>Cột 2</td>
<td>Cột 3</td>
</tr>
</table>
4. Những lưu ý để nâng cao khả năng truy cập (accessibility)
- Chú ý đến thứ tự nội dung
Xem xét ý nghĩa của nội dung và viết HTML theo thứ tự logic. - Sử dụng CSS một cách đúng đắn
Điều chỉnh bố cục và thiết kế hiển thị bằng CSS, còn HTML đóng vai trò truyền đạt chính xác thứ tự thông tin. - Kiểm tra hoạt động trên các công nghệ hỗ trợ
Sử dụng trình đọc màn hình để kiểm tra xem nội dung có được đọc theo đúng thứ tự như dự định hay không.
5. Lợi ích của khả năng truy cập (accessibility)
Việc tuân thủ hướng dẫn này giúp hỗ trợ tốt hơn cho các nhóm người dùng sau:
- Người dùng trình đọc màn hình: Thông tin được đọc theo đúng thứ tự, giúp dễ dàng hiểu nội dung hơn.
- Người dùng có khuyết tật nhận thức: Thông tin được sắp xếp hợp lý và có tổ chức giúp tránh gây nhầm lẫn.
Tóm tắt
Tiêu chuẩn “1.3.2 Thứ tự có ý nghĩa” trong WCAG 2.2 yêu cầu rằng, trong trường hợp thứ tự nội dung mang ý nghĩa, thì thứ tự đó phải có thể được nhận diện đúng cách bởi các chương trình.
- Viết cấu trúc HTML một cách logic và thực hiện điều chỉnh hiển thị bằng CSS.
- Sử dụng đánh dấu (markup) phù hợp cho danh sách, bảng và biểu mẫu.
Ngay cả người mới bắt đầu cũng có thể tạo ra nội dung web thân thiện với người dùng sử dụng công nghệ hỗ trợ bằng cách chú ý đến 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.