WCAG 2.2 Hướng dẫn ‘3.2.3 Điều hướng nhất quán’ Cấp AA
Mở đầu
Tiêu chí “3.2.3 Điều hướng nhất quán” của WCAG 2.2 yêu cầu các cơ chế điều hướng xuất hiện lặp đi lặp lại trên website phải được hiển thị theo cùng một thứ tự mọi lúc. Tiêu chí này rất quan trọng để giúp người dùng có thể di chuyển giữa các trang web một cách hiệu quả và dễ dự đoán.
1. Khái quát tiêu chí
Yêu cầu
- Các yếu tố điều hướng lặp lại trên nhiều trang cần phải được hiển thị theo cùng một thứ tự tương đối mọi lúc.
- Tiêu chí này yêu cầu duy trì tính nhất quán, trừ khi người dùng chủ động thực hiện thay đổi.
2. Phương pháp triển khai
a. Cố định thứ tự của các menu điều hướng
Đồng nhất thứ tự của các menu điều hướng trên toàn bộ website.
Ví dụ: Menu điều hướng nhất quán
<nav>
<ul>
<li><a href="/home">Trang chủ</a></li>
<li><a href="/about">Tổng quan công ty</a></li>
<li><a href="/services">Dịch vụ</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
b. Cân nhắc trường hợp người dùng đã tùy chỉnh một cách có chủ ý
Khi người dùng có thể tùy chỉnh thứ tự điều hướng, hãy lưu trữ các thay đổi đó một cách thích hợp.
Ví dụ: Lưu trữ các tùy chỉnh của người dùng
- Tính năng: Người dùng thay đổi thứ tự các mục điều hướng.
- Triển khai: Sử dụng cookie hoặc lưu trữ cục bộ để lưu trữ kết quả tùy chỉnh.
function saveNavigationOrder(newOrder) {
localStorage.setItem('navigationOrder', JSON.stringify(newOrder));
}
c. Ý thức về thứ tự tương đối của điều hướng
Đồng nhất việc sắp xếp các yếu tố cấu trúc trang như header, navigation, footer.
Ví dụ: Đồng nhất cấu trúc trang
<header>
<h1>Tên trang web</h1>
</header>
<nav>
<ul>
<li><a href="/home">Trang chủ</a></li>
<li><a href="/about">Tổng quan công ty</a></li>
</ul>
</nav>
<main>
<p>Nội dung trang sẽ hiển thị ở đây</p>
</main>
<footer>
<p>Thông tin bản quyền</p>
</footer>
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Thứ tự điều hướng khác nhau giữa các trang
Ví dụ thất bại
<!-- Trang chủ -->
<nav>
<ul>
<li><a href="/home">Trang chủ</a></li>
<li><a href="/about">Tổng quan công ty</a></li>
</ul>
</nav>
<!-- Trang dịch vụ -->
<nav>
<ul>
<li><a href="/about">Tổng quan công ty</a></li>
<li><a href="/home">Trang chủ</a></li>
</ul>
</nav>
Vấn đề
- Người dùng có thể bị nhầm lẫn với thứ tự của menu điều hướng.
Biện pháp cải thiện
<!-- Đồng nhất trên tất cả các trang -->
<nav>
<ul>
<li><a href="/home">Trang chủ</a></li>
<li><a href="/about">Tổng quan công ty</a></li>
</ul>
</nav>
b. Thay đổi thứ tự không mong muốn
Ví dụ thất bại
- Thứ tự điều hướng bị thay đổi một cách không mong muốn khi trang web được cập nhật.
Biện pháp cải thiện
- Quản lý thứ tự điều hướng một cách tập trung và đồng nhất trên tất cả các trang.
4. Lợi ích của khả năng truy cập (accessibility)
a. Cải thiện trải nghiệm người dùng
- Khi điều hướng nhất quán, người dùng có thể di chuyển trong website một cách hiệu quả.
b. Tính tương thích với các công nghệ hỗ trợ
- Đối với người dùng sử dụng trình đọc màn hình, điều hướng nhất quán giúp tăng khả năng dự đoán.
c. Dễ dàng học hỏi
- Việc các yếu tố lặp lại có cùng một cách sắp xếp giúp người dùng nhanh chóng nắm bắt cấu trúc của trang web.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- So sánh nhiều trang trong website và kiểm tra xem thứ tự điều hướng có nhất quán hay không.
- Kiểm tra xem các thay đổi trong điều hướng có thể tùy chỉnh đã được lưu trữ và phản ánh đúng cách hay không.
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra xem cấu trúc của các yếu tố điều hướng có được đồng nhất hay không.
Tóm tắt
Tiêu chí “3.2.3 Điều hướng nhất quán” của WCAG 2.2 nhằm đảm bảo rằng các cơ chế điều hướng lặp lại trên website được hiển thị theo một thứ tự có thể dự đoán, giúp người dùng sử dụng trang web một cách thoải mái.
Điểm cần lưu ý khi triển khai
- Đồng nhất thứ tự của các menu điều hướng
- Cố định việc sắp xếp các yếu tố cấu trúc như header và footer
- Lưu trữ và phản ánh đúng cách các tùy chỉnh của người dùng
Đ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.