Stworzenie skiplinków na stronę internetową.
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...
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.
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
