Trên một trang có menu hoặc thanh điều hướng lặp lại, người dùng bàn phím có thể phải nhấn phím Tab nhiều lần trước khi đến được nội dung chính. Liên kết bỏ qua (skip link) tạo một lối tắt ở đầu trang: khi liên kết nhận tiêu điểm, người dùng có thể kích hoạt nó để chuyển thẳng đến phần nội dung cần đọc.
Liên kết bỏ qua là gì?
Liên kết bỏ qua là một liên kết trong trang, thường trỏ đến phần tử <main>. Nó giúp bỏ qua các khối xuất hiện lặp lại trên nhiều trang, chẳng hạn như tiêu đề trang, menu chính hoặc thanh điều hướng.
Cơ chế này đặc biệt hữu ích với người điều hướng web bằng bàn phím. Nó cũng giúp người dùng trình đọc màn hình tránh phải đi qua cùng một nhóm liên kết điều hướng mỗi khi mở trang mới.
Ai được hưởng lợi?
- Người dùng bàn phím: Có thể đi đến nội dung chính mà không phải lần lượt di chuyển qua mọi liên kết trong menu.
- Người dùng trình đọc màn hình: Có thêm lựa chọn bỏ qua phần điều hướng lặp lại và bắt đầu đọc phần chính của trang.
- Người gặp khó khăn khi sử dụng chuột: Giảm số thao tác bàn phím cần thiết trước khi tiếp cận nội dung.
Liên kết bỏ qua không thay thế cho cấu trúc HTML rõ ràng hoặc thứ tự tiêu điểm hợp lý. Nó bổ sung một đường đi ngắn hơn khi trang có nhiều thành phần lặp lại.
Cách triển khai liên kết bỏ qua
1. Tạo liên kết và đích đến trong HTML
Đặt liên kết gần đầu mã HTML và cho thuộc tính href trỏ đến id của phần nội dung chính.
<a href="#main-content" class="skip-link">Đi thẳng đến nội dung chính</a>
<header>
<!-- Nội dung tiêu đề -->
</header>
<nav>
<!-- Thanh điều hướng -->
</nav>
<main id="main-content">
<!-- Nội dung chính -->
</main>Trong ví dụ này, href="#main-content" và id="main-content" phải trùng nhau. Khi người dùng kích hoạt liên kết, trang sẽ chuyển đến phần <main>.
2. Chỉ ẩn liên kết khi chưa nhận tiêu điểm
Liên kết có thể được đặt ngoài vùng nhìn thấy trong trạng thái bình thường, nhưng cần xuất hiện rõ ràng khi người dùng nhấn Tab đến nó.
.skip-link {
position: absolute;
top: -100px;
left: 0;
background-color: #000;
color: #fff;
padding: 8px 12px;
z-index: 100;
}
.skip-link:focus {
top: 10px;
outline: 3px solid #005fcc;
outline-offset: 2px;
}Trạng thái :focus đưa liên kết trở lại vùng nhìn thấy và giữ dấu hiệu tiêu điểm rõ ràng. Màu sắc có thể được điều chỉnh theo giao diện của trang, miễn là liên kết vẫn dễ nhận biết trên nền xung quanh.
Cách dùng liên kết bỏ qua hiệu quả
Đặt nhãn mô tả đúng đích đến
Nhãn như “Đi thẳng đến nội dung chính” cho biết điều gì sẽ xảy ra khi liên kết được kích hoạt. Tránh nhãn chung chung như “Nhấp vào đây”, vì người dùng không thể biết trước đích đến.
Đặt liên kết sớm trong thứ tự Tab
Liên kết bỏ qua cần là một trong những phần tử đầu tiên nhận tiêu điểm. Nếu người dùng vẫn phải đi qua toàn bộ menu trước khi gặp liên kết, lối tắt không còn giải quyết được vấn đề ban đầu.
Chỉ thêm nhiều đích khi thực sự cần
Một trang phức tạp có thể có thêm liên kết đến thanh bên hoặc chân trang. Tuy nhiên, mỗi liên kết cần có đích đến rõ ràng; quá nhiều lựa chọn ở đầu trang lại làm tăng số thao tác trước khi người dùng đến nội dung chính.
Kiểm tra bằng bàn phím
- Tải lại trang và bắt đầu từ đầu trang.
- Nhấn phím Tab, sau đó xác nhận liên kết bỏ qua xuất hiện rõ ràng.
- Nhấn Enter để kích hoạt liên kết.
- Kiểm tra xem trang đã chuyển đến nội dung chính hay chưa.
- Nhấn Tab thêm một lần và xác nhận người dùng có thể tiếp tục thao tác trong phần nội dung theo thứ tự hợp lý.
Nên lặp lại kiểm tra trên các loại trang có cấu trúc khác nhau. Một liên kết hoạt động trên trang bài viết chưa chắc đã được đặt đúng đích trên trang có bố cục khác.
Tóm tắt triển khai
- Đặt liên kết bỏ qua gần đầu trang.
- Cho
hreftrỏ đúng đếnidcủa nội dung chính. - Hiển thị liên kết và dấu hiệu tiêu điểm rõ ràng khi người dùng nhấn Tab.
- Dùng nhãn mô tả cụ thể và kiểm tra toàn bộ luồng thao tác bằng bàn phím.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ hỗ trợ triển khai khả năng truy cập web. Nếu đang xem xét cách cải thiện trang web, bạn có thể tham khảo thêm thông tin về công cụ này.