Nhấn Tab trên hầu hết các trang thương mại điện tử và đếm xem. Một, hai, ba… bạn vẫn còn trong header. Mười, mười lăm, hai mươi… bạn đã vượt qua menu điều hướng. Hai mươi lăm lần Tab sau, bạn cuối cùng mới đến được nội dung chính.
Đối với ai sử dụng chuột, header đó là overhead vô hình. Đối với những người dùng bàn phím, nó là một bức tường họ phải leo lên mỗi lần tải trang—hoặc quay lại một trang đã truy cập trước đó. Trên cửa hàng có mega menu với 30 mục, bức tường đó có thể mất hơn một phút để duyệt qua.
Skip navigation link giải quyết vấn đề này trong hai giây. Nhấn Tab một lần, nhấn Enter, và bạn đã ở tại nội dung. Đó là tính năng accessibility đơn giản nhất trong phát triển web, nhưng hầu hết các cửa hàng Shopify không có—và nhiều cửa hàng có cũng triển khai sai.
- WCAG 2.4.1 (Level A) yêu cầu một cơ chế để bỏ qua các khối nội dung lặp lại—skip link là giải pháp chuẩn
- Header thương mại điện tử trung bình buộc người dùng bàn phím phải đi qua 20-40 tab stop trước khi đến nội dung chính
- Skip link giảm overhead điều hướng từ 30+ giây xuống dưới 2 giây cho mỗi trang
- Chỉ 32% trong số 1 triệu trang web hàng đầu có skip link hoạt động (WebAIM 2024)
- GitHub, Amazon, và Google đều sử dụng skip link—chúng là thực tiễn tiêu chuẩn, không phải trường hợp đặc biệt
Tại Sao Skip Link Tồn Tại
Mỗi trang web đều có các khối nội dung lặp lại: logo, menu điều hướng chính, thanh tìm kiếm, banner quảng cáo, có thể là thanh tiện ích với liên kết đăng nhập/giỏ hàng. Người dùng chuột bỏ qua những thứ này ngay lập tức—mắt họ nhảy tới nội dung và con trỏ theo sau.
Người dùng bàn phím không có may mắn đó. Thứ tự Tab là tuyến tính. Mỗi phần tử tương tác trong header được truy cập theo thứ tự: liên kết logo, mỗi mục nav, nút tìm kiếm, biểu tượng giỏ hàng, liên kết tài khoản. Nếu mega menu của bạn có thể mở rộng, mỗi mục submenu sẽ bổ sung vào số lượng.
WCAG Success Criterion 2.4.1 (Bypass Blocks) tồn tại cụ thể để giải quyết vấn đề này. Ở Level A—mức tuân thủ tối thiểu—nó yêu cầu “một cơ chế để bỏ qua các khối nội dung được lặp lại trên nhiều trang Web.”
Skip navigation link là giải pháp được chấp nhận phổ biến. W3C Web Accessibility Initiative liệt kê chúng là kỹ thuật ưa thích để thỏa mãn 2.4.1.
Vấn Đề Có Thể Tệ Đến Mức Nào Nếu Không Có Skip Link?
Để định lượng vấn đề, hãy xem xét header cửa hàng Shopify điển hình:
| Phần tử | Tab Stop |
|---|---|
| Logo (link) | 1 |
| Mục điều hướng chính (6 danh mục) | 6 |
| Liên kết mega menu trên danh mục (trung bình 8) | 48 |
| Nút tìm kiếm | 1 |
| Tài khoản/đăng nhập | 1 |
| Biểu tượng giỏ hàng | 1 |
| Liên kết banner quảng cáo | 1 |
| Bộ chọn ngôn ngữ/tiền tệ | 2 |
| Tổng cộng | 61 |
Với khoảng 0,5 giây cho mỗi lần Tab, đó là 30 giây overhead trước khi đạt nội dung chính. Trên mỗi trang. Nếu người dùng truy cập 5 trang trong một phiên, đó là 2,5 phút Tab qua cùng một điều hướng.
Người dùng screen reader trải nghiệm điều này thậm chí còn sâu sắc hơn. Mỗi tab stop không chỉ là một bước nhảy trực quan—screen reader thông báo phần tử: “Link, Women’s Clothing. Link, Men’s Clothing. Link, Kids. Link, Sale…” Mỗi thông báo mất 1-2 giây audio.
Một skip link hoạt động loại bỏ tất cả những điều đó.
Skip Link Hoạt Động Như Thế Nào
Skip link là một anchor link nhắm tới khu vực nội dung chính. Đó là phần tử tập trung đầu tiên trên trang—có nghĩa là phần tử đầu tiên xuất hiện khi người dùng nhấn Tab.
Triển Khai Cơ Bản
HTML rất tối thiểu:
<!-- Phần tử đầu tiên bên trong <body> -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- ...header, navigation, etc... -->
<!-- Khu vực nội dung chính -->
<main id="main-content" tabindex="-1">
<!-- Nội dung trang ở đây -->
</main>
tabindex="-1" trên phần tử <main> rất quan trọng. Nếu không có nó, một số trình duyệt sẽ không di chuyển focus tới mục tiêu khi skip link được kích hoạt. Phần tử cần phải có thể lấy focus theo chương trình mặc dù nó không nên xuất hiện trong thứ tự tab bình thường.
CSS: Hiển Thị Khi Focused, Ẩn Ngược Lại
Skip link thường ẩn cho đến khi người dùng nhấn Tab. Điều này giữ chúng ẩn cho người dùng chuột trong khi làm cho chúng là điều đầu tiên mà người dùng bàn phím gặp phải:
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 9999;
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
width: auto;
height: auto;
padding: 12px 24px;
background: #000000;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 100000;
}
Khi skip link nhận focus (người dùng nhấn Tab), nó trượt vào chế độ xem ở góc trên cùng bên trái. Nó lớn, có độ tương phản cao, và dễ nhận thấy. Khi focus di chuyển qua nó, nó biến mất một lần nữa.
Tại Sao display: none Không Hoạt Động
Một lỗi thường gặp là ẩn skip link với display: none hoặc visibility: hidden:
/* KHÔNG làm điều này */
.skip-link {
display: none;
}
.skip-link:focus {
display: block;
}
Các phần tử với display: none bị loại bỏ khỏi thứ tự tab hoàn toàn. Skip link trở thành không thể lấy focus—nó cũng có thể không tồn tại.
Kỹ thuật chính xác sử dụng định vị ngoài màn hình. Phần tử vẫn còn trong DOM và trong thứ tự tab; nó chỉ được định vị về mặt trực quan ở nơi không ai có thể nhìn thấy cho đến khi được focus.
Triển Khai Skip Link Trên Shopify
Thêm skip link vào cửa hàng Shopify yêu cầu chỉnh sửa tệp bố cục của theme. Đây là quy trình từng bước.
Bước 1: Chỉnh Sửa theme.liquid
Mở trình chỉnh sửa theme Shopify và điều hướng tới Layout > theme.liquid. Tìm thẻ mở <body> và thêm skip link ngay sau nó:
<body>
<a href="#MainContent" class="skip-link">Skip to content</a>
<!-- phần còn lại của theme của bạn... -->
Bước 2: Thêm ID Mục Tiêu
Tìm nơi nội dung chính của bạn bắt đầu. Trong hầu hết các theme Shopify, đây là thẻ <main> hoặc <div> có lớp cụ thể. Thêm ID mục tiêu:
<main id="MainContent" role="main" tabindex="-1">
Nhiều theme Shopify đã có một phần tử với id="MainContent". Kiểm tra theme của bạn trước khi thêm một bản sao.
Bước 3: Thêm CSS
Thêm kiểu skip link vào tệp CSS của theme. Sử dụng kiểu từ phần trước đó, điều chỉnh màu sắc để phù hợp với thương hiệu của bạn.
Bước 4: Kiểm Tra
Nhấn Tab trên trang chủ cửa hàng của bạn. Skip link sẽ xuất hiện ở góc trên cùng bên trái. Nhấn Enter. Focus sẽ chuyển đến khu vực nội dung chính, bỏ qua toàn bộ header.
Kiểm tra trên nhiều trang—trang sản phẩm, trang bộ sưu tập, giỏ hàng, và thanh toán—để xác minh skip link hoạt động nhất quán.
Nhiều Skip Link
Một số trang được hưởng lợi từ nhiều hơn một skip link. Nếu trang của bạn có nhiều khu vực nội dung (bộ lọc thanh bên, lưới sản phẩm, điều hướng footer), bạn có thể cung cấp các phím tắt tới mỗi khu vực:
<div class="skip-links">
<a href="#MainContent" class="skip-link">Skip to content</a>
<a href="#ProductGrid" class="skip-link">Skip to products</a>
<a href="#SearchBar" class="skip-link">Skip to search</a>
</div>
Mỗi skip link bổ sung xuất hiện khi người dùng Tab qua cái trước đó. Tab đầu tiên hiển thị “Skip to content,” Tab thứ hai hiển thị “Skip to products,” Tab thứ ba hiển thị “Skip to search.”
Sử dụng mô hình này một cách thận trọng. Hai hoặc ba skip link là hữu ích. Mười skip link đánh bại mục đích—bạn chỉ là tạo một khối khác để bỏ qua.
Các Trang Hàng Đầu Xử Lý Điều Này Như Thế Nào
- GitHub: Hai skip link—”Skip to content” và “Skip to footer navigation”
- Amazon: Một skip link—”Skip to main content”
- Google: Một skip link—”Skip to main content” (xuất hiện trên kết quả tìm kiếm)
- BBC: Ba skip link—”Skip to content,” “Accessibility Help,” và “Skip to Live Chat”
Sự đồng thuận ngành là một hoặc hai skip link bao gồm 95% các trường hợp sử dụng.
Lỗi Triển Khai Phổ Biến
Mặc dù là một trong những tính năng accessibility đơn giản nhất, skip link thất bại một cách đáng ngạc nhiên. Báo cáo WebAIM 2024 Million Home Pages phát hiện ra rằng chỉ 32,4% trong số một triệu trang web hàng đầu có skip link hoạt động.
Đây là các lỗi phổ biến nhất:
Lỗi 1: Skip Link Không Đi Đến Đâu
Skip link tồn tại, nhưng ID mục tiêu không khớp:
<!-- Link nhắm tới #main -->
<a href="#main" class="skip-link">Skip to content</a>
<!-- Nhưng nội dung có ID khác -->
<main id="MainContent">
Nhấn Enter trên skip link không làm gì cả. Người dùng bối rối.
Sửa: Xác minh rằng giá trị href khớp với id trên phần tử mục tiêu. Kiểm tra bằng cách nhấp vào skip link và kiểm tra xem focus có di chuyển hay không.
Lỗi 2: Mục Tiêu Không Thể Lấy Focus
Nếu không có tabindex="-1", một số trình duyệt sẽ không di chuyển focus tới mục tiêu:
<!-- Thiếu tabindex -->
<main id="MainContent">
Hash URL thay đổi (bạn thấy #MainContent trong thanh địa chỉ), nhưng focus ở lại nơi nó đã ở. Người dùng nhấn Tab và nhận phần tử header tiếp theo thay vì phần tử nội dung đầu tiên.
Sửa: Thêm tabindex="-1" vào phần tử mục tiêu.
Lỗi 3: Skip Link Không Bao Giờ Hiển Thị
Một số triển khai giữ skip link ẩn vĩnh viễn:
.skip-link {
display: none !important;
}
Điều này vi phạm WCAG. Skip link phải hiển thị khi được focus. Chúng có thể ngoài màn hình theo mặc định, nhưng chúng phải xuất hiện khi focus.
Sửa: Sử dụng kỹ thuật định vị ngoài màn hình mô tả ở trên, không phải display: none.
Lỗi 4: Skip Link Xuất Hiện Sau Các Phần Tử Khác
Nếu skip link không phải là phần tử có thể lấy focus đầu tiên, nó đánh bại mục đích của nó. Người dùng Tab qua các phần tử khác trước khi đạt nó:
<body>
<div class="promo-bar">
<a href="/sale">Summer Sale - 20% Off</a>
</div>
<a href="#MainContent" class="skip-link">Skip to content</a>
Ở đây, liên kết banner quảng cáo nhận focus trước. Skip link là thứ hai.
Sửa: Đặt skip link là con đầu tiên rất của <body>, trước bất kỳ banner, header, hoặc nội dung khác.
Skip Link và Screen Reader
Skip link mang lợi ích cho tất cả người dùng bàn phím, nhưng chúng đặc biệt quan trọng đối với người dùng screen reader.
Khi screen reader gặp một trang, nó đọc các phần tử theo thứ tự DOM. Nếu không có skip link, người dùng sẽ nghe toàn bộ header trên mỗi trang: “Banner, link, Navi Plus. Navigation, list, 6 items. Link, Women’s Clothing. Link, Men’s Clothing…” Điều này mất 30-60 giây cho mỗi trang.
Với skip link, screen reader thông báo: “Link, Skip to content.” Người dùng nhấn Enter và ngay lập tức nghe tiêu đề trang hoặc đoạn đầu tiên.
Screen reader hiện đại cũng có điều hướng landmark tích hợp (nhấn H để nhảy tới tiêu đề, nhấn 1-6 cho các mức tiêu đề, nhấn D cho landmark). Nhưng skip link là phương án dự phòng phổ quát hoạt động ngay cả khi HTML ngữ nghĩa không hoàn hảo.
Kiểm tra theme ShopifyNếu bạn đang sử dụng theme dựa trên Shopify Dawn (2.0+), skip link đã được tích hợp sẵn. Tìm kiếm theme.liquid của bạn cho "skip" để xác minh. Nếu bạn đang sử dụng theme cũ hơn hoặc theme tùy chỉnh, bạn có thể sẽ cần thêm một cách thủ công.
Lập Luận Tốc Độ Cho Skip Link
Skip link không chỉ về tuân thủ accessibility. Chúng là tính năng năng suất.
Hãy xem xét một người mua B2B đặt hàng hàng tuần. Họ truy cập cửa hàng của bạn, đi trực tiếp tới trang bộ sưu tập qua bookmark, và bắt đầu thêm sản phẩm. Nếu họ đang sử dụng điều hướng bàn phím (nhiều chuyên gia nhập liệu làm như vậy), mỗi lần tải lại trang sẽ buộc họ phải qua header một lần nữa.
Nếu không có skip link: 30 giây tab header cho mỗi trang, 20 trang cho mỗi phiên = 10 phút lãng phí trên điều hướng lặp lại.
Với skip link: 2 giây cho mỗi trang, 20 trang cho mỗi phiên = 40 giây tổng cộng.
Đó là giảm 93% overhead điều hướng. Đối với một người mua thường xuyên, đây là sự khác biệt giữa “chịu đựng được” và “hiệu quả.” Đó là loại chi tiết biến một khách hàng một lần thành một khách hàng thường xuyên.
Các công cụ như Navi+ Menu Builder có thể giúp bằng cách tạo ra các cấu trúc điều hướng hoạt động tốt với skip link và điều hướng bàn phím ngay từ đầu—có nghĩa là bạn không phải cải tạo những mô hình này thành một theme không được thiết kế cho chúng.
Danh Sách Kiểm Tra Kiểm Tra
Trước khi coi triển khai skip link của bạn là hoàn chỉnh, hãy xác minh từng điều này:
- Nhấn Tab trên tải trang mới. Skip link xuất hiện về mặt trực quan ở đầu viewport.
- Nhấn Enter trên skip link. Focus di chuyển tới nội dung chính (xác minh bằng Tab—phần tử được focus tiếp theo phải bên trong nội dung chính, không ở trong header).
- Skip link có độ tương phản đủ (4.5:1 cho văn bản, vì đó là văn bản kích thước bình thường).
- Skip link hoạt động trên mọi loại trang: trang chủ, bộ sưu tập, sản phẩm, giỏ hàng, kết quả tìm kiếm, blog.
- Trên mobile (kiểm tra trong công cụ dev trình duyệt), skip link vẫn xuất hiện và hoạt động chính xác.
- Skip link là phần tử có thể lấy focus đầu tiên trên trang—không có gì khác nhận focus trước nó.
- Sau khi sử dụng skip link, nhấn Shift+Tab di chuyển focus trở lại header (không quay lại skip link một lần nữa).
Nếu tất cả bảy thành công, triển khai skip link của bạn là vững chắc. Nó mất 15 phút để xây dựng và sẽ tiết kiệm cho người dùng bàn phím hàng giờ thất vọng tích lũy.
This article is part of the larger guide on Keyboard navigation: why it matters beyond accessibility.