Łącze pomijające

Łącze pomijające to skrót klawiaturowy umieszczony na samym początku każdej strony, który pozwala użytkownikom pominąć powtarzającą się nawigację i przejść bezpośrednio do treści głównej. Spełnia wymagania WCAG 2.4.1 Bypass Blocks (poziom A) i jest jednym z najtańszych do wdrożenia usprawnień dostępności.

Dlaczego istnieje

Wyobraźmy sobie typowy serwis z treściami. Nagłówek ma sześć linków nawigacji głównej, przełącznik języka i przełącznik motywu. Stopka — kolejne dwanaście. Na każdej stronie te elementy się powtarzają. Użytkownik korzystający z klawiatury lub czytnika ekranu, który trafia na artykuł i chce go przeczytać, musi przejść przez Tab przez mniej więcej trzydzieści interaktywnych elementów, zanim dotrze do treści. Pomnożone przez każde przejście między stronami — jest to wyczerpujące.

Łącze pomijające to pojedynczy element <a href="#main-content">Przejdź do treści</a> umieszczony jako pierwszy element, który może otrzymać fokus w dokumencie. Użytkownik naciska Tab raz po załadowaniu strony, widzi „Przejdź do treści”, naciska Enter i fokus przenosi się do treści artykułu.

Implementacja

Wzorzec jest prosty, ale ma kilka dobrze znanych pułapek:

<a class="skip-link" href="#main-content">Przejdź do treści</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Trzy szczegóły, które mają znaczenie:

1. Łącze musi być widoczne po otrzymaniu fokusa. Łącze pomijające trwale ukryte przez display: none jest niewidoczne dla widzących użytkowników klawiatury, którzy nie wiedzą o jego istnieniu. Należy je ukryć poza ekranem za pomocą pozycjonowania, a nie przez display: none lub visibility: hidden.

2. Element docelowy musi przyjmować fokus. Samo <main> domyślnie nie przyjmuje fokusa klawiaturowego. Dodanie tabindex="-1" sprawia, że element staje się programowo fokusowalny, dzięki czemu przeglądarka faktycznie przenosi fokus po kliknięciu łącza. Bez tego hash URL zmienia się, ale fokus pozostaje w miejscu, a kolejne naciśnięcie Tab restartuje nawigację od początku strony — co całkowicie niweczy sens łącza pomijającego.

3. Musi być pierwszym fokusowalnym elementem. Nie „wśród pierwszych 100 elementów” — pierwszym. Jeśli cokolwiek je poprzedza (łącze do logo, ikona wyszukiwania), użytkownik musi przez to przejść zanim dotrze do łącza pomijającego, co niweczy jego cel.

Wiele łączy pomijających

Długie strony z wieloma powtarzającymi się regionami mogą korzystać z krótkiego menu pomijania zamiast jednego łącza:

• Przejdź do treści głównej
• Przejdź do nawigacji
• Przejdź do stopki

Krótka lista trzech lub czterech miejsc docelowych, widoczna po otrzymaniu fokusa, jest odpowiednia. Długa, automatycznie generowana tabela treści na początku każdej strony — nie.

Czego nie zastępuje

Łącze pomijające to zabezpieczenie spełniające wymaganie Bypass Blocks. Nie zastępuje właściwych landmarków (<nav>, <main>, <aside>, <footer>), właściwej struktury nagłówków (jeden <h1> na stronę, hierarchiczne <h2>) ani aria-label na zdublowanych landmarkach. Użytkownicy czytników ekranu poruszają się między regionami i nagłówkami za pomocą skrótów klawiaturowych zależnych od tych struktur; łącze pomijające jest przeznaczone dla widzących użytkowników korzystających wyłącznie z klawiatury.