Hướng dẫn WCAG 2.2 ‘2.4.8 Vị trí’ Cấp AAA
Mở đầu
Trong “2.4.8 Vị trí” của WCAG 2.2, yêu cầu cung cấp thông tin giúp người dùng nhận biết vị trí hiện tại của trang trong toàn bộ website. Tiêu chí này nhằm mục đích ngăn ngừa người dùng bị lạc trong trang web và làm cho việc điều hướng đến các trang cụ thể trở nên dễ dàng hơn.
1. Khái quát tiêu chí
Yêu cầu
- Cung cấp thông tin giúp người dùng xác định vị trí hiện tại trên website.
- Thông tin này được hiển thị trên thanh điều hướng, danh sách breadcrumb, hoặc sơ đồ trang web.
2. Phương pháp triển khai
a. Cung cấp danh sách breadcrumb
Danh sách breadcrumb là một trong những phương pháp phổ biến nhất giúp người dùng xác định vị trí hiện tại.
Ví dụ về danh sách breadcrumb
HTML
<nav aria-label="Danh sách breadcrumb">
<ol>
<li><a href="/">Trang chủ</a></li>
<li><a href="/products">Danh sách sản phẩm</a></li>
<li>Chi tiết sản phẩm</li>
</ol>
</nav>
- Bằng cách cung cấp danh sách breadcrumb, người dùng có thể dễ dàng nhận biết vị trí của trang hiện tại trong toàn bộ trang web.
b. Nhấn mạnh vị trí hiện tại trên thanh điều hướng
Trong menu điều hướng, làm nổi bật trang hiện tại đang hiển thị một cách rõ rệt.
Ví dụ về thanh điều hướng nhấn mạnh vị trí hiện tại
HTML
<nav>
<ul>
<li><a href="/" class="nav-item">Trang chủ</a></li>
<li><a href="/about" class="nav-item">Tổng quan công ty</a></li>
<li><a href="/products" class="nav-item current">Danh sách sản phẩm</a></li>
<li><a href="/contact" class="nav-item">Liên hệ</a></li>
</ul>
</nav>
CSS
.nav-item.current {
font-weight: bold;
color: #007BFF;
text-decoration: underline;
}
- Nhờ vào sự nhấn mạnh về mặt thị giác, người dùng sẽ dễ dàng nhận diện vị trí hiện tại.
c. Cung cấp sơ đồ trang web
Ví dụ về sơ đồ trang web
HTML
<section>
<h2>Sơ đồ trang web</h2>
<ul>
<li><a href="/">Trang chủ</a></li>
<li>
<a href="/products">Danh sách sản phẩm</a>
<ul>
<li><a href="/products/product1">Sản phẩm 1</a></li>
<li><a href="/products/product2">Sản phẩm 2</a></li>
</ul>
</li>
<li><a href="/about">Tổng quan công ty</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</section>
- Bằng cách làm rõ cấu trúc tổng thể của trang web, người dùng có thể nhận biết vị trí hiện tại một cách chính xác hơn.
d. Chỉ ra vị trí hiện tại thông qua tiêu đề trang và các tiêu đề con.
Ghi rõ tên của trang hiện tại trong tiêu đề trang và tiêu đề đầu tiên.
Ví dụ về tiêu đề trang
HTML
<head>
<title>Chi tiết sản phẩm - Danh sách sản phẩm - Trang chủ</title>
</head>
Ví dụ về tiêu đề
HTML
<main>
<h1>Chi tiết sản phẩm</h1>
</main>
- Giúp người dùng dễ dàng nhận biết trang hiện tại mà họ đang xem.
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Không có thông tin về vị trí hiện tại
Ví dụ thất bại
- Không có dấu hiệu nào trong menu điều hướng để chỉ ra trang hiện tại.
- Không có danh sách breadcrumb hay sơ đồ trang web được cung cấp.
Biện pháp cải thiện
- Triển khai danh sách breadcrumb và thanh điều hướng được nhấn mạnh về mặt thị giác.
b. Vị trí hiện tại không rõ ràng
Ví dụ thất bại
- Tiêu đề trang và các tiêu đề con thiếu tính cụ thể, khiến vị trí hiện tại không được rõ ràng.
Biện pháp cải thiện
- Ghi rõ nội dung của trang trong tiêu đề trang và các tiêu đề con.
<h1>Chi tiết sản phẩm - Sản phẩm A</h1>
4. Lợi ích của khả năng truy cập (accessibility)
a. Ngăn ngừa người dùng bị lạc trong trang web
- Bằng cách chỉ ra rõ ràng vị trí hiện tại, người dùng sẽ không bị lạc và có thể dễ dàng đến được trang mục tiêu trên website.
b. Cải thiện tính tiện dụng của trình đọc màn hình
- Khi cung cấp danh sách breadcrumb và tiêu đề một cách phù hợp, người dùng trình đọc màn hình sẽ dễ dàng nắm bắt cấu trúc của trang web.
c. Cải thiện trải nghiệm người dùng
- Khi vị trí hiện tại được hiển thị một cách rõ ràng về mặt thị giác, trang web sẽ trở nên dễ sử dụng đối với tất cả người dùng.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem vị trí hiện tại có được chỉ rõ trong trang hay không
- Kiểm tra xem menu điều hướng và danh sách breadcrumb có hoạt động chính xác hay không
b. Kiểm tra với trình đọc màn hình
- Kiểm tra xem trình đọc màn hình có đọc chính xác danh sách breadcrumb và trang hiện tại hay không.
c. Công cụ kiểm tra tự động
- Sử dụng các công cụ như Axe hoặc WAVE để kiểm tra tính phù hợp của các yếu tố điều hướng.
Tóm tắt
2.4.8 Vị trí" của WCAG 2.2 có mục đích là cung cấp thông tin giúp người dùng nhận biết vị trí của trang hiện tại trong toàn bộ trang web, từ đó giúp tất cả người dùng có thể điều hướng trang web một cách hiệu quả.
Điểm cần lưu ý khi triển khai
- Cung cấp danh sách breadcrumb để làm rõ cấu trúc phân cấp của trang web.
- Nhấn mạnh vị trí hiện tại một cách rõ ràng về mặt thị giác trên thanh điều hướng.
- Chỉ ra vị trí hiện tại trong tiêu đề trang và các tiêu đề con.
Đ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.