Skip link
26 maja 2026·1 min czytania
Aby ułatwić użytkownikom używającym klawiatury poruszenie się po stronie, stosuje się mechanizm skip link. Poniżej znajdziesz najprostszą implementację. Nie uwzględnia ona warstwy wizualnej. Te kwestię zostawiam Tobie.
W dwóch zdaniach - chodzi o wyświetlenie odnośnika, którego wybór spowoduje przejście do głównej części strony, z pominięciem na przykład nawigacji. Gdy po wejściu na stronę wciśnięto przycisk TAB, jest to pierwszy odnośnik który wejdzie w stan 'focus'.
1. Umieść poniższy kod html jako pierwszy tag w body
<body>
<a class="skip-link" href="#main-content">Przejdź do treści</a>2. Dodaj style
.skip-link {
position: absolute;
top: -9999px;
left: 0;
z-index: 9999;
}
.skip-link:focus {
top: 0;
}3. Oznacz główny kontener
<main id="main-content" tabindex="-1">
<!-- treść strony -->
</main>Czy skip linków może być więcej niż jeden na stronie? Oczywiście. Jest to szczególnie przydatne przy naprawdę rozbudowanych strukturach. Przykład jest widoczny na stronie np. https://www.bankmillennium.pl
Newsletter
Nowe artykuły o dostępności (jakości) prosto na Twoją skrzynkę. Bez spamu. Polityka prywatności.