Poniżej znajduje się kod HTML, CSS oraz JavaScript, który umożliwi utworzenie na stronie internetowej skiplinków.
Skiplinki są interaktywnymi elementami w witrynach internetowych, które umożliwiają osobom korzystającym z czytników ekranowych szybkie pominięcie powtarzalnych elementów i przechodzenie bezpośrednio do głównej zawartości strony.
Ich celem jest ułatwienie nawigacji dla użytkowników z niepełnosprawnościami, zwłaszcza dla osób korzystających z czytników ekranowych. Skiplinki są ukryte dla większości użytkowników, ale są dostępne dla czytników ekranowych, które prezentują je jako opcje nawigacyjne. Po ich aktywacji użytkownik może przeskoczyć na wyznaczone obszary strony, takie jak menu, nagłówek, treść główna itp., bez konieczności przechodzenia przez wszystkie elementy nawigacyjne na każdej stronie.
Skiplinki są ważnym elementem projektowania dostępnych stron internetowych, ponieważ pomagają w osiągnięciu łatwości korzystania i równego dostępu dla wszystkich użytkowników, niezależnie od ich umiejętności czy narzędzi, które wykorzystują do przeglądania strony.
HTML
W poniższym kodzie należy zmienić wartość #main-section oraz #footer-section na indywidualne wartości, które znajdują się na Twojej stronie internetowej.
Skip linki można dostosować do swoich potrzeb – dodać kolejne lub usunąć niepotrzebne.
<body>
<a id="skiplink-main" href="#main-section" class="skip-link">Przejdź do głównej sekcji strony</a>
<a id="skiplink-footer" href="#footer-section" class="skip-link">Przejdź do stopki strony</a>
<header>
<!-- Twój kod nagłówka -->
</header>
<main id="main-section">
<!-- Twój kod głównej sekcji -->
</main>
<footer id="footer-section">
<!-- Twój kod stopki -->
</footer>
</body>
CSS
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 10px;
z-index: 100;
transition: top 0.3s;
}
.skip-link:focus {
top: 0;
}
JavaScript
document.addEventListener('DOMContentLoaded', (event) => {
window.addEventListener('keydown', function (e) {
if (e.shiftKey && e.keyCode == 9) { // Shift + Tab
document.getElementById('skiplink-main').focus();
}
});
});
Przykład działania
Ekspert ds. dostępności cyfrowej z 5-letnim doświadczeniem, mający na koncie ponad 500 audytów stron i aplikacji mobilnych. Jest absolwentem Akademii Morskiej w Gdyni. Poza pracą profesjonalną, jest pasjonatem sportu i psychologii, co przekłada się na jego funkcję prezesa Stowarzyszenia Aktywne Kosakowo. Jego zrozumienie technicznych i ludzkich aspektów dostępności pochodzi z połączenia wiedzy zawodowej z zainteresowaniami osobistymi.
