Khả năng truy cập Bỏ qua liên kết
Tại sao
Những người sử dụng bàn phím, trình đọc màn hình, điều khiển chuyển đổi và các công nghệ hỗ trợ khác sử dụng liên kết bỏ qua để truy cập nội dung chính hoặc các phần quan trọng khác dễ dàng và nhanh hơn.
Cái gì
Liên kết bỏ qua phổ biến nhất là thành phần tương tác đầu tiên trên một trang. Nó đưa người dùng đến nội dung chính, vượt qua các yếu tố chung như logo, tìm kiếm và điều hướng. Nó hầu như luôn bị ẩn cho đến khi nhận được tiêu điểm.
Làm sao
Hãy tự mình thử
- Mở trang web WebAIM trên máy tính để bàn hoặc máy tính xách tay của bạn.
- Nhấn phím tab .
- Nhấn enter để theo liên kết.
HTML
HTML của liên kết bỏ qua là phần dễ dàng.
Giả sử rằng bạn đã sử dụng <header> và <main> trong trang web của mình, như bạn đã tìm hiểu trong Landmarks . Liên kết bỏ qua là một phần tử toàn cục, vì vậy bạn nên đưa nó vào <header> . Bạn cũng cần phải có ID trên <main> để có thể liên kết với nó bằng một neo.
<header>
<a href="#main" class="skip">Skip to main content</a>
…
</header>
…
<main id="main">Đó là nó. Không có JavaScript. Một liên kết và một ID.
CSS
Như bạn có thể nhận thấy trong HTML, liên kết có lớp bỏ qua để chúng tôi có thể ẩn nó.
.skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
} Mã này di chuyển đường liên kết ra bên ngoài trình duyệt. Nếu bạn không quen với định vị tuyệt đối, hãy đọc về thuộc tính vị trí CSS . Kích thước 1px và overflow: hidden; dành cho những trường hợp đặc biệt khi người dùng đã tắt tính năng định vị tuyệt đối.
Khi liên kết được tập trung, nó phải được hiển thị. Điều này cũng được thực hiện với CSS:
.skip:focus {
position: static;
width: auto;
height: auto;
}Phương pháp này rất hữu ích và quan trọng đối với những người dùng dựa vào bàn phím và phương thức nhập tương tự. Nếu bạn có một trang web phức tạp, bạn có thể muốn thêm nhiều liên kết bỏ qua hơn, không chỉ vào nội dung chính. Chúng tôi sẽ đề cập đến điều đó sau.
