Ach te internety…

Charków Ukraina 2 lutego 2022 Thorchain RUNE symbol monety Handel z kryptowalutą cyfrową i wirtualną bankowością mobilną Ręka z ekranem smartfona z zbliżeniem ikony krypto

Skip link – jak dodać pominięcie nawigacji dla dostępności

Wiktor Sadecki 11 min. czytania

Skip link (link pomijający nawigację) to prosty, ale kluczowy element dostępności, który pozwala użytkownikom klawiatury i czytników ekranu natychmiast przejść do głównej treści strony, bez konieczności „przeklikiwania” całego menu.

Skip link (po polsku często: „przejdź do treści”, „pomiń nawigację”) to zwykły odnośnik, który przenosi fokus z klawiatury bezpośrednio do głównej treści strony. Typowo pozwala pominąć długie menu, ale może też prowadzić do innych powtarzalnych sekcji, np. wyszukiwarki czy stopki.

Skip linki są szczególnie przydatne dla:

  • osób, które korzystają wyłącznie z klawiatury (np. z powodu niepełnosprawności ruchowej),
  • użytkowników czytników ekranu, którzy przechodzą po elementach interaktywnych klawiszem Tab,
  • osób z zaburzeniami koncentracji lub zmęczeniem, które chcą szybko „przeskoczyć” powtarzające się bloki treści.

Bez skip linku użytkownik klawiatury musi każdorazowo „przetabować” przez wszystkie elementy menu, co na złożonych serwisach oznacza nawet kilkadziesiąt naciśnięć Tab na każdej podstronie.

Skip link jest bezpośrednio powiązany z kryterium sukcesu WCAG 2.4.1 „Bypass Blocks” (Ominięcie bloków), które wymaga możliwości pomijania powtarzających się sekcji, takich jak nagłówki, menu czy banery.

Choć nagłówki i regiony (landmarks, np. <main>, <nav>) mogą w części przypadków wystarczyć, wielu ekspertów podkreśla, że link pomijający nawigację jest praktycznie niezbędny, aby w pełni zrealizować intencję tego kryterium.

Polskie wytyczne dla administracji publicznej także wymagają umożliwienia pominięcia stałych elementów nawigacyjnych z poziomu klawiatury, a skip link to najprostszy sposób spełnienia tego wymogu.

Z perspektywy użytkownika klawiatury proces wygląda tak:

  1. Po wczytaniu strony użytkownik naciska Tab.
  2. Fokus trafia najpierw na skip link – powinien to być pierwszy element, na jaki natrafia klawiatura.
  3. Po wciśnięciu Enter fokus zostaje przeniesiony do głównej treści (np. nagłówka H1 lub sekcji <main>), z pominięciem menu i innych powtarzalnych bloków.
  4. Użytkownik kontynuuje nawigację od tego miejsca (np. Tabem lub skrótami czytnika ekranu).

Z technicznego punktu widzenia skip link to rozwiązanie oparte na prostych zasadach:

  • zwykły link – element <a> z atrybutem href wskazującym identyfikator (id) elementu docelowego, najczęściej głównej treści;
  • pierwszy w kolejności DOM – umieszczony tak, aby po naciśnięciu Tab był pierwszym elementem fokusowalnym;
  • widoczność przy fokusie – nawet jeśli na co dzień jest schowany wizualnie, przy fokusie musi być wyraźnie widoczny.

Podstawowa implementacja skip linku (HTML)

Najprostszy, poprawny i zgodny ze standardami wzorzec wygląda następująco:

<body>
<a href="#main" class="skip-link">Przejdź do głównej treści</a>

<header>
<!-- logo, menu, itp. -->
</header>

<nav>
<!-- rozwinięte menu -->
</nav>

<main id="main" tabindex="-1">
<h1>Tytuł strony</h1>
<!-- główna treść -->
</main>
</body>

Kluczowe elementy wdrożenia są następujące:

  • <a href="#main" class="skip-link"> – link wskazuje na element o id="main";
  • <main id="main" tabindex="-1"> – sekcja główna ma identyfikator z href oraz tabindex="-1", aby mogła programowo otrzymać fokus;
  • pozycja tuż po otwarciu <body> – dzięki temu jest pierwszym elementem fokusowalnym na stronie.

tabindex="-1" zapewnia, że przeskok skip linku nie tylko przewinie stronę, ale także ustawi fokus na elemencie docelowym – kluczowe dla czytników ekranu i użytkowników klawiatury.

Najczęściej spotykane są dwa podejścia. Po pierwsze: zaraz po otwarciu <body>, aby link był pierwszym elementem fokusowalnym. Po drugie: w obrębie <header>, ale przed nawigacją – wciąż jako pierwszy link w nagłówku.

Najważniejsze zasady dotyczące umiejscowienia:

  • skip link powinien być na każdej podstronie serwisu,
  • powinien być pierwszym elementem przechwytującym fokus klawiatury,
  • jeśli strona ma wspólny szablon nagłówka, dodaj link do tego szablonu, aby pojawiał się automatycznie w całym serwisie.

W systemach CMS i frameworkach (np. Sitecore SXA) często istnieją gotowe komponenty „Skip Link”, które dodaje się w szablonie tuż po <body> lub w sekcji metadanych.

Tekst skip linku powinien być zrozumiały i konkretny. Dobrze sprawdzają się następujące etykiety:

  • „przejdź do treści”,
  • „przejdź do głównej treści”,
  • „pomiń nawigację i przejdź do treści”.

Pamiętaj o kilku zasadach nazewnictwa:

  • unikaj „kliknij tutaj” – tekst linku ma mówić, dokąd prowadzi,
  • jeśli masz więcej niż jeden skip link (np. do wyszukiwarki, do stopki), każdy powinien jasno opisywać cel, np. „przejdź do wyszukiwarki”, „przejdź do stopki”,
  • etykiety muszą być jednoznaczne także poza kontekstem (czytniki ekranu umożliwiają przeglądanie listy linków).

Stylowanie skip linku – ukryty czy zawsze widoczny?

Jest stale wyświetlany u góry strony (np. nad nagłówkiem). To rozwiązanie jest proste w implementacji i natychmiast komunikuje możliwość pominięcia nawigacji.

Ukryty wizualnie, widoczny dopiero przy fokusie

Link pozostaje poza ekranem i „pojawia się” dopiero po otrzymaniu fokusu z klawiatury. Pozwala to zachować estetykę projektu przy pełnej dostępności.

Przykładowe CSS bazujące na rekomendowanych praktykach:

.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden; /* nie używaj display:none ani visibility:hidden */
}

.skip-link:focus {
left: 1rem;
top: 1rem;
width: auto;
height: auto;
padding: 0.5rem 1rem;
background: #000;
color: #fff;
z-index: 1000;
border-radius: 4px;
}

Wersja z wysuwaniem linku z górnej krawędzi ekranu przy fokusie:

.skip-link {
position: absolute;
inset-inline-start: 1rem;
inset-block-start: -3rem; /* link ponad górną krawędzią */
background: #000;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 4px;
z-index: 1000;
transition: inset-block-start 0.15s;
}

.skip-link:focus {
inset-block-start: 1rem; /* link się „wysuwa” */
}

Najważniejsze zasady stylowania to:

  • nie używaj display: none ani visibility: hidden – takie elementy są niewidoczne także dla czytników ekranu,
  • zapewnij widoczność przy fokusie – wizualnie dla użytkowników klawiatury i semantycznie dla czytników,
  • zadbaj o kontrast tekstu do tła zgodny z WCAG (minimum 4.5:1 dla tekstu zwykłego).

Najczęściej skip link prowadzi do jednego z trzech miejsc:

  • elementu <main> zawierającego główną treść strony,
  • nagłówka <h1> strony,
  • innej kluczowej sekcji z treścią (np. kontenera z artykułem, listy wyników wyszukiwania).

Stosuj poniższe zasady, aby zachować pełną dostępność:

  • element docelowy musi mieć unikalny id odpowiadający wartości href skip linku (np. href="#main" → id="main"),
  • jeśli element nie jest natywnie fokusowalny (np. <main>, <div>, <section>), dodaj tabindex="-1",
  • umieść element docelowy tuż przed główną treścią, aby po skipie użytkownik od razu mógł czytać lub dalej tabować.

Przykład z docelowym nagłówkiem:

<a href="#content" class="skip-link">Przejdź do treści</a>

<header>...</header>
<nav>...</nav>

<main>
<h1 id="content" tabindex="-1">Tytuł artykułu</h1>
<p>Pierwszy akapit treści...</p>
</main>

Co najmniej jeden skip link prowadzący do głównej treści to absolutne minimum. Dodatkowe odnośniki (np. do wyszukiwarki, bocznego menu, stopki) warto dodać tylko wtedy, gdy realnie pomagają i nie przeładowują użytkownika.

Oto przykładowe dodatkowe skip linki, które mogą mieć sens w dużych serwisach:

  • „przejdź do wyszukiwarki” (np. formularz w nagłówku),
  • „przejdź do głównych kategorii” (gdy menu jest bardzo rozbudowane i znajduje się niżej),
  • „przejdź do stopki” (jeśli w stopce są ważne skróty: kontakt, dane firmy).

Jeśli nie masz pewności, czy więcej skip linków pomoże, czy zaszkodzi, ogranicz się do jednego, dobrze zaprojektowanego odnośnika do głównej treści.

Skip linki w szablonach, CMS-ach i design systemach

W praktycznych wdrożeniach potraktuj skip link jako element globalny, powiązany z szablonem strony:

  • w CMS dodaj skip link do wspólnego nagłówka lub layoutu – dzięki temu pojawi się na każdej podstronie,
  • w design systemie uczyń skip link obowiązkowym komponentem w szablonach stron,
  • uwzględnij skip link w dokumentacji projektowej i makietach UX (w tym wygląd przy fokusie).

Wiele narzędzi (np. akceleratory lub frameworki CMS-owe) oferuje gotowy komponent „Skip Link”, który można dodać tuż po tagu <body> – warto skorzystać z gotowców zamiast pisać rozwiązanie od zera.

Typowe błędy przy implementacji skip linków

  1. Link nie jest pierwszym elementem fokusowalnym: wcześniejsze linki lub elementy interaktywne zmuszają użytkownika do dodatkowego tabowania, co mija się z celem.
  2. Brak elementu docelowego lub błędne id: np. href="#content", ale brak id="content" albo literówki w atrybutach.
  3. Cel niefokusowalny bez tabindex="-1": strona przewija się, ale fokus pozostaje na skip linku – czytnik ekranu nie zacznie czytać treści.
  4. Ukrycie linku w sposób niedostępny: użycie display:none lub visibility:hidden sprawia, że link znika także dla technologii asystujących.
  5. Za mały kontrast lub obszar klikalny: przy fokusie link jest słabo widoczny, ma niewielki padding lub brak wyraźnej ramki.
  6. Zbyt wiele skip linków bez hierarchii: kilka „przejdź do…” pod rząd dezorientuje użytkownika – ustal priorytet i logiczną kolejność.

Skip linki w aplikacjach SPA i z dużą ilością JavaScript

W aplikacjach jednostronicowych (SPA) obowiązują te same zasady, dochodzi jednak kwestia zarządzania fokusem po zmianie widoku. Zadbaj o następujące aspekty:

  • po zmianie route’u lub przeładowaniu sekcji głównej element docelowy skip linku nadal musi istnieć i mieć właściwe id oraz tabindex="-1",
  • po nawigacji programowo ustaw fokus na <main> lub <h1> – tak samo, jak robi to skip link,
  • unikaj sytuacji, w których dynamiczne komponenty (sticky menu, banery, modale) przechwytują fokus zaraz po aktywacji skip linku.

Jeżeli korzystasz z frameworków z gotowymi layoutami, sprawdź, czy nie zawierają już skip linku lub hooków do zarządzania fokusem.

Testowanie skip linków

Poprawne działanie skip linku jest łatwe do przetestowania – włącz je do stałego przeglądu dostępności.

1. Test klawiaturą

  • odśwież stronę i nie ruszaj myszki,
  • naciśnij Tab – fokus powinien trafić na skip link i link powinien być wyraźnie widoczny,
  • naciśnij Enter – strona przewinie się do głównej treści, a fokus trafi na element docelowy (np. <main> lub <h1>),
  • kontynuuj Tab – kolejne elementy fokusowalne powinny należeć do treści, a nie do pominiętej nawigacji.

2. Test z czytnikiem ekranu

Z użyciem popularnego czytnika wykonaj te kroki:

  • zacznij nawigację klawiszem Tab – czytnik powinien zapowiedzieć skip link (np. „przejdź do treści, link”),
  • aktywuj link – czytnik powinien odczytać tytuł lub początek treści w elemencie docelowym,
  • sprawdź listę linków – skip link powinien mieć jednoznaczną, zrozumiałą etykietę.

3. Proste testy automatyczne

Część narzędzi do analizy dostępności automatycznie sprawdza, czy na stronie jest skip link oraz czy ma prawidłowy cel – to dobry wskaźnik, ale nie zastępuje testów manualnych.

Checklista – wdrożenie skip linku krok po kroku

Poniższa lista przeprowadzi Cię przez cały proces:

  1. Dodaj link w HTML: umieść <a href="#main" class="skip-link">Przejdź do głównej treści</a> tuż po otwarciu <body> lub na początku <header> przed nawigacją.
  2. Oznacz główną treść: dodaj <main id="main" tabindex="-1"> lub ustaw id i tabindex="-1" na <h1> (lub innym kontenerze treści).
  3. Zadbaj o tekst linku: użyj jasnej etykiety, np. „przejdź do głównej treści” – bez ogólników typu „kliknij tutaj”.
  4. Zaimplementuj dostępne stylowanie: nie ukrywaj linku za pomocą display:none ani visibility:hidden; zastosuj technikę off-screen lub wysuwanie przy fokusie; zapewnij odpowiedni kontrast i wyraźną ramkę fokusową.
  5. Zapewnij obecność na każdej podstronie: dodaj skip link do wspólnego szablonu nagłówka/layoutu w CMS-ie lub do wspólnego komponentu aplikacji.
  6. Przetestuj działanie: przejdź stronę tylko z użyciem Tab i Enter, sprawdź z czytnikiem ekranu i upewnij się, że fokus nie jest przechwytywany przez inne elementy.

Dobrze zaprojektowany skip link to kilka linijek kodu, a jednocześnie ogromna różnica w komforcie korzystania ze strony dla osób używających klawiatury i technologii asystujących. W nowoczesnym, profesjonalnym serwisie WWW to element obowiązkowy – ze względu na standardy WCAG, przepisy i zwykłą, zdrową troskę o użytkowników.

Podobne artykuły