Khi sử dụng trang web, việc người dùng có thể nắm bắt được “vị trí hiện tại” của mình là rất quan trọng để điều hướng một cách thoải mái và không căng thẳng. Bằng cách hiển thị đúng vị trí hiện tại, người dùng sẽ không bị lạc trong trang web và có thể dễ dàng tìm ra đường đi tiếp theo hoặc thông tin mình cần. Đặc biệt, đối với người khiếm thị hoặc người có vấn đề về nhận thức, việc hiển thị rõ vị trí hiện tại sẽ trực tiếp góp phần nâng cao khả năng tiếp cận.
Trong bài viết này, chúng tôi sẽ giải thích chi tiết về tầm quan trọng của “vị trí hiện tại” trong khả năng tiếp cận web và phương pháp triển khai cụ thể của nó.
Lý do vị trí hiện tại quan trọng
Khi người dùng duyệt trang web, việc họ có thể nắm bắt được mình đang ở phần nào của trang web hay đang ở trang nào có liên quan trực tiếp đến trải nghiệm người dùng thoải mái. Nếu vị trí hiện tại không rõ ràng, đặc biệt là với những người dùng sau đây, việc sử dụng trang web sẽ trở nên khó khăn.
- Người dùng khiếm thị: Người dùng sử dụng trình đọc màn hình không có manh mối trực quan, do đó họ cần phải biết qua âm thanh về việc mình đang ở trang nào hoặc ở tầng cấp nào của trang web.
- Người dùng có khuyết tật về nhận thức: Khi việc sắp xếp và hiểu thông tin trở nên khó khăn, việc biết mình đang ở đâu có thể giúp tránh nhầm lẫn và điều hướng trang web một cách ít căng thẳng hơn.
- Người dùng lần đầu truy cập trang web: Đối với những người dùng chưa quen với cấu trúc của trang web, việc hiển thị vị trí hiện tại sẽ giúp họ hiểu rõ cấu trúc tổng thể của trang.
Phương pháp thực tiễn để hiển thị rõ vị trí hiện tại
Có một số điểm quan trọng để truyền đạt rõ ràng vị trí hiện tại cho người dùng. Dưới đây, chúng tôi sẽ giải thích về các phương pháp hiển thị vị trí hiện tại một cách hiệu quả để tạo ra một trang web dễ truy cập.
1. Sử dụng Breadcrumbs (đường dẫn phân cấp)
Breadcrumbs là manh mối trực quan cho thấy trang hiện tại nằm ở tầng nào trong toàn bộ cấu trúc trang web. Điều này giúp người dùng dễ dàng nắm bắt vị trí của mình, đồng thời có thể dễ dàng quay lại các tầng khác hoặc trang trước. Đặc biệt, với các trang web có nhiều tầng cấp, breadcrumbs là một yếu tố không thể thiếu.
Ví dụ tốt:
html
<nav aria-label="Breadcrumbs">
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/category">Danh mục</a></li>
<li>Trang hiện tại</li>
</ul>
</nav>
Như vậy, bằng cách cung cấp điều hướng có sẵn cả về mặt trực quan và cho trình đọc màn hình, người dùng có thể dễ dàng nắm bắt vị trí của mình.
2. Rõ ràng hóa tiêu đề trang
Tiêu đề trang là phương tiện cơ bản để người dùng hiểu mình đang ở trang nào. Không chỉ cần đưa tiêu đề trang vào thẻ <title> trong HTML, mà còn cần hiển thị một cách rõ ràng về mặt trực quan. Hơn nữa, tiêu đề cũng là thông tin đầu tiên mà trình đọc màn hình sẽ đọc, vì vậy cần thiết lập tiêu đề phù hợp và dễ hiểu.
Ví dụ tốt:
html
<title>Thông tin sản phẩm - Trang web về khả năng tiếp cận</title>
<h1>Thông tin sản phẩm</h1>
Tiêu đề trang phải đơn giản nhưng cũng cần phải cho người dùng biết nội dung của trang đó ngay từ cái nhìn đầu tiên.
3. Nhấn mạnh menu điều hướng
Trong menu điều hướng của trang web, việc nhấn mạnh trực quan trang hoặc danh mục mà người dùng đang truy cập hiện tại là rất hiệu quả. Điều này giúp người dùng dễ dàng nắm bắt được họ đang ở phần nào và dễ dàng quyết định hành động tiếp theo.
Ví dụ tốt:
css
.current-page {
font-weight: bold;
text-decoration: underline;
}
Bằng cách áp dụng phong cách phân biệt trực quan cho trang hoặc phần hiện tại, người dùng có thể hiểu vị trí của mình một cách trực quan.
4. Cài đặt chỉ báo tiêu điểm một cách thích hợp
Đối với những người dùng sử dụng thao tác bằng bàn phím, việc có thể xác nhận một cách trực quan vị trí của chỉ báo tiêu điểm trên các yếu tố là rất quan trọng. Đặc biệt, khi tiêu điểm trên liên kết hoặc nút được hiển thị rõ ràng, người dùng sẽ dễ dàng nắm bắt được đối tượng thao tác hiện tại và hướng di chuyển của mình.
Ví dụ tốt:
css
a:focus, button:focus {
outline: 2px solid #005fcc;
}
Chỉ báo tiêu điểm đóng vai trò chỉ rõ vị trí hiện tại mà người dùng đang thao tác cũng như điểm tiếp theo mà họ nên tiến tới.
Công cụ để kiểm tra hiển thị vị trí hiện tại
Để kiểm tra xem vị trí hiện tại có được hiển thị một cách phù hợp hay không, việc sử dụng một số công cụ kiểm tra khả năng tiếp cận là rất hiệu quả. Bằng cách sử dụng những công cụ này, chúng ta có thể xác minh xem người dùng có thể nhận biết chính xác vị trí của mình trên trang web hay không.
- WAVE（Web Accessibility Evaluation Tool）: Nó phát hiện các vấn đề liên quan đến khả năng tiếp cận trong việc hiển thị vị trí hiện tại và đề xuất các điểm cần sửa chữa.
- Axe: Axe là công cụ có thể tự động hóa kiểm tra khả năng tiếp cận trên toàn bộ trang web, giúp xác định các vấn đề liên quan đến breadcrumbs và điều hướng.
- Keyboard Accessibility Checker: Đây là công cụ để kiểm tra thao tác chỉ bằng bàn phím và xác minh xem người dùng có thể nắm bắt vị trí hiện tại một cách chính xác hay không. Hãy sử dụng những công cụ này để kiểm tra xem vị trí hiện tại có rõ ràng đối với tất cả người dùng hay không, và thực hiện những cải tiến cần thiết.
Hướng dẫn khả năng tiếp cận liên quan đến vị trí hiện tại
Trong WCAG (Web Content Accessibility Guidelines) 2.1, có các tiêu chuẩn liên quan đến việc hiển thị “vị trí hiện tại”. Đặc biệt, tiêu chuẩn “2.4.8 Vị trí hiện tại” yêu cầu cung cấp thông tin để người dùng có thể nắm bắt vị trí của mình. Bằng cách tuân theo tiêu chuẩn này, thông tin trên trang web sẽ được tổ chức một cách hợp lý, tạo ra một trang web dễ sử dụng cho mọi người.
Hơn nữa, trong tiêu chuẩn “1.3.1 Thông tin và mối quan hệ”, yêu cầu truyền đạt chính xác cấu trúc và mối quan hệ trong trang, và việc làm rõ vị trí hiện tại cũng là một phần của tiêu chuẩn này.
Kết luận
Để cải thiện khả năng tiếp cận web, việc giúp người dùng có thể nắm bắt chính xác “vị trí hiện tại” của mình là điều thiết yếu. Bằng cách làm rõ vị trí hiện tại thông qua nhiều phương pháp như sử dụng breadcrumbs, nhấn mạnh menu điều hướng, thiết lập tiêu đề trang một cách phù hợp, và triển khai chỉ báo tiêu điểm, tất cả người dùng sẽ có thể sử dụng trang web một cách thoải mái mà không gặp căng thẳng.
Theo các tiêu chuẩn về khả năng tiếp cận, việc thiết kế sao cho người dùng không bị lạc trên trang web là một bước quan trọng để cung cấp một môi trường web thân thiện cho tất cả mọi người. Hãy tận dụng những phương pháp này để tạo ra một trang web dễ sử dụng và dễ tiếp cận.
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.