blog na temat dostępności stron internetowych

Przejdź do głównej treści

Skip linki – czym są i do czego służą

Dla osób widzących posługujących się myszą przejście do głównej treści przeglądanej strony internetowej i interakcja z jej zawartością są zazwyczaj banalnie proste: wystarczy zignorować całą pozostałą treść i przenieść kursor myszy nad wybrany element. Dla osób niewidomych bądź z pewnymi niepełnosprawnościami motorycznymi może być to jednak znacznie trudniejsze zadanie. Aby dostać się do głównego obszaru strony użytkownicy ci muszą najpierw przejść przez całą zawartość główki serwisu; z reguły w jej skład wchodzą logo, formularz wyszukiwania, linki nawigacji głównej, a czasem też dodatkowe elementy, np. odnośniki do mediów społecznościowych. Dla kogoś, kto korzysta z klawiatury (lub alternatywnego urządzenia wejścia działającego na podobnej zasadzie), może być to dość czasochłonne i wymagające wysiłku zadanie. Na szczęście istnieje prosty sposób na pominięcie treści zamieszczonej przed sekcją główną strony.

“Przejdź do głównej treści”

Skip links” (bo o nich mowa) są to odnośniki, których zadaniem jest przeniesienie fokusu klawiatury w inny obszar danej strony, poprzez “przeskoczenie” (ang. “skip“) treści pomiędzy linkiem a miejscem docelowym. Najczęściej spotykanym tego typu odnośnikiem jest link do głównej treści strony, zamieszczony na początku serwisu internetowego jako jeden z pierwszych elementów otrzymujących fokus. Odnośnik ten jest często niewidoczny i pojawia się na ekranie dopiero gdy otrzymuje fokus (tak jest na przykład na tym blogu).

Implementacja

Skip link powininen być stworzony przy pomocy elementu <a>, którego atrybut “href” musi odpowiadać wartości atrybutu “id” elementu zawierającego główną treść strony, np.

<header>
  <!-- logo strony -->
  <img [...] />
  <!-- skip link -->
  <a href="#tresc-glowna" class="skip-link">Przejdź do treści głównej</a>
  <!-- formularz wyszukiwania -->
  <form [...]>
    ...
  </form>
  <!-- główna nawigacja strony -->
  <nav>
    ...
  </nav>
</header>
<main id="tresc-glowna">
  Tu znajduje się główna treść danej strony internetowej.
</main>

Jak wspomniałam wcześniej, link ten może być niewidoczny na ekranie, ale należy pamiętać, że musi on stać się widoczny, gdy otrzyma fokus, np:

.skip-link {
  position: absolute;
  left: -999em; 
}
.skip-link:focus {
  position: absolute;
  left: 0;
}

Inne rodzaje skip linków

Opisana powyżej technika pomijania bloków treści może też mieć też inne zastosowania. Na przykład, jeśli formularz wyszukiwania nie znajduje się na samym początku strony, pomocne może być dodanie do główki strony odnośnika przenoszącego fokus klawiatury w pole wyszukiwania tegoż formularza. Innym przykładem może być sytuacja, w której na stronie zamieszczony jest element Flash (np. wideo), stanowiący tzw. pułapkę na klawiaturę (jest możliwe przeniesienie fokusu z treści HTML do Flash, ale nie jest możliwy powrót do treści HTML). Jeśli nie da się rozwiązać tego problemu, można przynakmniej zamieścić bezpośrednio przed odtwarzaczem wideo link “pomiń wideo”, który przeniesie fokus do treści znajdującej się za odtwarzaczem.

Nadużywanie skip linków

Choć odnośniki te są zazwyczaj bardzo przydatne dla osób niewidomych i użytkowników z niepełnosprawnościami ruchowymi, niewłaściwie użyte mogą zmienić się w niepotrzebne utrudnienie. Zdarza się, że web deweloperzy, chcąc zbudować możliwie dostępny serwis internetowy, popadają w przesadę zamieszczając w główce strony całą listę skip linków, np:

<header>
  <a class="logo">....</a>
  <-- skip linki -->
  <ul>
    <li><a href="#tresc-glowna" class="skip-link">Przejdź do głównej treści</a></li>
    <li><a href="#nawigacja" class="skip-link">Przejdź do głównej nawigacji</a></li>
    <li><a href="#nawigacja-d" class="skip-link">Przejdź do drugorzędnej nawigacji</a></li>
    <li><a href="#szukaj" class="skip-link">Przejdź do wyszukiwarki</a></li>
    <li><a href="#stopka" class="skip-link">Przejdź do stopki strony</a></li>
  </ul>
  <form [...]>
    ...
  </form>
  <!-- główna nawigacja strony -->
  <nav>
    ...
  </nav>
</header>

W powyższym przykładzie, aby przejść do formularza wyszukiwania osoba korzystająca z klawiatury musi nacisnąć klawisz Tab cztery razy. Gdyby na stronie tej nie było żadnych skip linków, przejście do wyszukiwarki wymagałoby jedynie pojedynczego naciśnięcia klawisza Tab.
Dlatego zawsze należy rozważyć, czy zamieszczenie więcej niż jednego skip linku (“przejdź do głównej treści”) jest właściwym rozwiązaniem. Będzie to zależeć od struktury danego serwisu internetowego; czasem zamieszczenie dodatkowego linku przenoszącego fokus w inny obszar strony może być pomocne, zaś w innych wypadkach całkowicie zbędne.

Czy skip linki są naprawdę potrzebne?

Niektóre osoby poddają w wątpliwość potrzebę stosowania skip linków, argumentując to tym, że osoby niewidome mogą przejść do głównej treści stosując inne metody – posługując się nagłówkami, bądź też rejonami zdefiniowanymi przy użyciu ARIA. Nie należy jednak zapominać, że skip linki są nie tylko tworzone z myślą o osobach niewidomych, ale także z myślą o widzących użytkownikach nie korzystających z myszy.

Istnieje wiele serwisów internetowych, które posiadają bardzo rozbudowaną główkę strony. Zdarzyło mi się kiedyś przeprowadzić audyt sklepu internetowego, który zawierał tak dużą ilość elementów interaktywnych na początku każdej strony, że aby przejść do treści głównej za pomocą klawiatury konieczne było naciśnięcie klawisza Tab ponad 200(!) razy. Serwis ten nie posiadał odnośnika pozwalającego na bezpośrednie przejście do treści głównej.
Wyobraźmy sobie teraz osobę niepełnosprawną motorycznie, która aby wybrać produkt i dokonać zakupu musi otworzyć i przejrzeć przynajmniej kilka stron serwisu. Za każdym razem gdy otwiera się nowa strona, osoba ta musi ponownie przebrnąć przez olbrzymią ilość linków, zanim będzie w stanie dotrzeć do właściwej treści. Aby zakupić produkt osoby, które nie mogą korzystać z myszy, musiałyby nacisnąć klawisz Tab ponad 1000 razy. Poważnie wątpię w to, że którakolwiek z tych osób podjęłaby się takiego wysiłku.
Oczywiście można tu poddać w wątpliwość potrzebę posiadania tak bardzo rozbudowanego menu nawigacji i przeanalizować sposób jego wykonania – być może należałoby rozważyć jego przebudowę. Tym niemniej tak prosty środek zaradczy jakim jest zamieszczenie linku “przejdź do treści głównej” na górze każdej strony tego serwisu, diametralnie ułatwiłby korzystanie z niego osobom niewidomym i użytkownikom klawiatury, oraz byłby znacznie szybszym rozwiązaniem niż przebudowa struktury nawigacji całego serwisu.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>