Przejdź do treści
Mężczyzna lecący w dół.Zdjęcie Joseph Frank z serwisu Unsplash

Jednym z kluczowych aspektów zasady dostępności określonych w Web Content Accessibility Guidelines (WCAG) 2.4.1 są linki „Skip to” (Linki do przeskakiwania treści). Są one niezwykle istotne dla ułatwienia korzystania z treści internetowych dla osób korzystających z czytników ekranu oraz dla tych, którzy mają trudności z poruszaniem się za pomocą myszy. Chociaż linki „Skip to” nie są zawsze wymagane, ich obecność zdecydowanie podnosi komfort użytkowania strony.

Ilość linków „Skip to” na stronie nie jest ściśle określona przez WCAG. Liczba tych linków zależy od ilości powtarzalnych elementów oraz od tego, w jaki sposób chcemy ułatwić użytkownikowi nawigację po stronie. W procesie tworzenia linków „Skip to” powinni brać udział zarówno projektant/-ka strony, jak i osoba odpowiedzialna za dostępność cyfrową. Przy modyfikacji istniejącej już strony, pomocne mogą okazać się również statystyki korzystania z serwisu.

Tworzenie linków „Skip to” to istotna część procesu tworzenia dostępnych stron internetowych. Pomaga to zapewnić, że wszyscy użytkownicy, niezależnie od swoich umiejętności, mogą korzystać z treści internetowych bez przeszkód. Warto zatem poświęcić temu elementowi odpowiednią uwagę podczas projektowania i implementacji strony internetowej.

 

Czym jest link „Skip to”?

 

„Skip to” to link umieszczony na stronie internetowej, zwykle niewidoczny dla większości użytkowników, ale dostępny dla czytników ekranu oraz dla tych, którzy poruszają się po stronie za pomocą klawiatury. Kliknięcie tego linku pozwala użytkownikowi pominąć nawigację lub inne powtarzające się elementy strony i przejść bezpośrednio do głównej treści. Jest to szczególnie ważne dla osób korzystających m.in. z klawiatury, które inaczej musiałyby przedzierać się przez powtarzalne treści na stronie internetowej. Jak go wykryć, zacznij korzystać z klawiatury za pomocą przycisków TAB (przejdź do kolejnego aktywnego elementu na stronie) oraz Shift + TAB ( jeden krok do tyłu)

Przyjrzymy się różnym implementacjom:

LinkedIn posiada dwa „skip to” – jeden do wyszukiwarki, drugi do głównej treści, czyli feedu z postami, plus przycisk zamknięcia.

 

Zrzut ekranu serwisu Linkedin, prezentujący dwa "skip to"

 

Google posiada trzy „skip to” – jeden do pierwszego wyniku wyszukiwania, drugi i trzeci odnoszą się do pomocy i zgłaszania uwag pod kątem dostępności cyfrowej.

Zrzut ekranu z serwisu Google, prezentujący wynik wyszukiwania dla frazy Kinaole, oraz z lewej strony Skip to main content

 

PFRON posiada dwa „skip to” – jeden do treści, a drugi umieszczony przed wiadomościami z Twittera (oszczędza nam około 20 kliknięć z poziomu klawiatury).

Zrzut ekranu z serwisu PFRON, prezentujący przeskok z sekcji Twitter na sekcje youtube.

 

BNP Paribas posiada od dwóch do trzech „skip to” w zależności od wersji językowej. Najciekawsze jest to, że pierwsza opcja to „przejdź do zaloguj”, ponieważ większość użytkowników pojawiająca się na stronie chce zalogować się do serwisu, a nie przejść do głównej treści strony.

 

zrzut ekranu z serwisu BNP Paribas, pokazujący przeskok do przycisku Zaloguj.

 

ZUS PUE ma aż 11 linków „skip to”. Czy to dobrze, czy źle? Jeżeli „skip to” działają, to dlaczego nie. Należy pamiętać, że „skip to” są zależne od struktury strony, w tym od tzw. landmarków strony. Czy 11 linków „skip to” to nadgorliwość, to zależy od opinii użytkowników i nie tylko. Zapewne, ktoś z doświadczeniem w zakresie dostępności doradza dla ZUS, w jaki sposób to zrealizować. Na górze strony wyświetla się 11 elementów skip to content, gdzie na głównej stronie 70 klikalnych elementów. Jeżeli te 11 linków może pomóc nie idealnej strukturze dzisiejszej odsłony serwisu ZUS PUE, to to rozwiązanie powinno być ocenianie na in-plus. Oczywiście patrząc na dostępność i użyteczność obecnego serwisu ZUS, trzeba zadać sobie pytanie, czy to rozwiązanie jest tymczasowe czy trwałe, w kontekście osiągnięcia lepszego jutra dla wszystkich.

zrzut ekranu ZUS PUE, z widocznym elementem Przejdź do panelu kontaktowego

 

Gov.pl ma 3 „skip to” i  ma bardzo fajny mechanizm zamykania otwartego okno, który wywodzi się z „skip to”. Kiedy korzystając z klawiatury, dotrzemy do ostatniego elementu, doświadczamy elementu, która nazywa się „zamknij menu GOV.pl”, które nie jest widoczny na warstwie wizualnej. Bardzo fajny mechanizm

 

Zrzut ekranu menu Gov.pl z ostatnią opcja Zamknij menu gov.pl

Dlaczego linki „Skip to” są ważne?

Najważniejszym aspektem dostępności jest zapewnienie, że wszyscy użytkownicy, niezależnie od swoich zdolności, mogą korzystać z treści internetowych bez przeszkód. Linki „Skip to” są ważnym elementem tego celu, jeżeli jest wymagany.  Bez nich osoby korzystające z technologii asystującej, takiej jak czytniki ekranu, musiałyby przewijać przez całą nawigację lub inne powtarzające się elementy na każdej stronie, zanim dotarłyby do treści, które faktycznie chcą przeczytać. To nie tylko frustrujące, ale także nieefektywne. Pamiętajmy również, że niektóre strony internetowe, nie potrzebują „skip to” ponieważ nie ma żadnych elementów powtarzalnych.

 

Jak implementować linki „Skip to”?

Przykładowa implementacja linku „Skip to” jest stosunkowo prosta i wymaga tylko kilku kroków:

  1. Utwórz linku w struktury HTML na swojej stronie.
  2. Ustaw atrybut „href” linku na identyfikator (ID) sekcji, do której użytkownik powinien skierować swoją uwagę. Na przykład, jeśli chcesz, aby użytkownicy przeskakiwali do głównej treści, atrybut „href” może wyglądać tak: href=”#maincontent”.
  3. Nadaj sekcji, do której prowadzi link, odpowiedni identyfikator. Upewnij się, że pasuje on do wartości atrybutu „href” w linku „Skip to”.
  4. Na koniec, pamiętaj, że link powinien być widoczny dla osób korzystających z klawiatury. Najprostszym sposobem na to jest wykorzystanie pseudoklasy CSS „:focus”, która zmienia wygląd linku, gdy jest on zaznaczony.

Oczywiście, powyższa implementacja nie zamyka drogi do innych form wdrożenia tego elementu. Należy pamiętać, że dostępność nie jest binarna, a linki „Skip to” są niezbędnym elementem dostępnej strony internetowej i odgrywają kluczową rolę w dostępności treści cyfrowych. Kiedy są prawidłowo zaimplementowane, mogą znacznie poprawić doświadczenie użytkowników, którzy z różnych powodów korzystają z nawigacji za pomocą klawiatury lub technologii asystujących. Implementacja takich linków jest prosta, a korzyści są ogromne.