Skip links là gì và tại sao cần?

Skip link là link ẩn cho tới khi được Tab tới, đặt đầu trang, cho phép nhảy thẳng xuống nội dung chính.

<body>
  <a class="skip-link" href="#main">Bỏ qua điều hướng</a>
  <header><nav>… 30 link …</nav></header>
  <main id="main" tabindex="-1">…</main>
</body>

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;                 /* đẩy khỏi màn hình */
  transition: top 0.14s ease;
}
.skip-link:focus { top: 8px; }   /* hiện ra khi Tab tới */

Vấn đề nó giải: người dùng bàn phím phải Tab qua toàn bộ menu ở mọi trang trước khi chạm được nội dung. Với menu 30 link và 5 trang, đó là 150 lần nhấn Tab thừa. WCAG 2.4.1 (Bypass Blocks) yêu cầu có cơ chế này.

Lưu ý: đừng dùng display: none để ẩn skip link — element display: none không focus được, nên link không bao giờ hiện ra. Phải đẩy ra ngoài màn hình bằng position/clip.

Kiểm tra: tải trang, nhấn Tab một lần. Link phải hiện ra và Enter phải nhảy đúng xuống <main>.