Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce. Zamknij

Pamiętajmy o Skip Linkach! - Aktualności - Polska Akademia Dostępności

Wiedza Narzędzia Rozwiązania

Projekt realizowany
przez:

Fundacja Widzialni Ministerstwo Administracji i Cyfryzacji
Niedziela, 18 listopada 2018

Wyszukiwarka

Formularz wyszukiwania

Zaloguj się aby pobierać wzorce www i wziąć udział w forum.

Dostosuj wygląd

Czcionka:

  • Domyślna wielkość czcionki
  • Czcionka średnia
  • Czcionka duża

Kontrast

Pamiętajmy o Skip Linkach!

17 kwietnia 2015

Choć już wiele razy mówiono na ten temat, to należy do niego powrócić. Podczas prac audytorskich nad dostępnością stron www, Eksperci Fundacji Widzialni niejednokrotnie natknęli się na brak mechanizmu pomijania jakim są skip linki.

A ich użycie w serwisie jest bardzo ważne i przede wszystkim wymagane przez odpowiednie kryterium WCAG 2.0. Skip linki, nazywane także mechanizmem pomijania, służą do pominięcia pewnych sekcji w serwisie dzięki zastosowaniu odpowiednich kotwic na stronie. Ten rodzaj pomocy nie służy jedynie osobom niewidomym. Także osoby słabowidzące, osoby z dysfunkcjami motorycznymi a nawet każdy z nas w pewnych sytuacjach może potrzebować takiego wsparcia.

Jak wiadomo, to co jest wyświetlane na stronach może wyglądać zupełnie inaczej. Dopiero po wyłączeniu styli  wyświetlanej strony możemy podejrzeć to co jest w rzeczywistości ukryte „pod spodem”.

Zastosowanie skip linków nie wymaga zbyt wielkiego nakładu pracy oraz ingerencji w obecny wygląd strony. Mechanizm pomijania nie tylko pozwala spełnić kryterium sukcesu ale także wpływa na użyteczność serwisu, która jest integralną częścią zasad związanych z dostępnością.

Widok mechanizmu pomijania w momencie uzyskania punktu uwagi

Należy pamiętać by nie przesadzić z tymi udogodnieniami. Najlepszym i najczęściej stosowanym rozwiązaniem jest dołożenie trzech, czterech linków , które przekierują nas na odpowiednie miejsce. Skocz do - menu główne, menu dodatkowe treść, wyszukiwarka są najczęściej stosowanym rozwiązaniem i w zupełności wystarczającym.

Przeskok do menu głównego, menu dodatkowego na początku pozwala często pominąć pewne grafiki, logo, ikony społecznościowe itp. Skocz do treści pozwala na bezpośredni przeskok do artykułu, wyników wyszukiwania, pola formularza na stronie kontaktu itd. Skocz do wyszukiwarki pozwala na szybkie dotarcie do elementu odpowiedzialnego za odnalezienie informacji na stronach serwisu.

Nie należy stosować więcej elementów, gdyż wtedy staną się one uciążliwe. Pamiętajmy nie musimy stosować  koniecznie wszystkich przedstawionych skip linków. Może się zdarzyć, że nasz serwis wymaga jedynie jednego - skocz do treści. Wszystko należy wyważyć.

Widok strony portal PAD z wyłączonymi stylami

Mechanizm nie musi być widoczny dla użytkowników korzystających w tradycyjny sposób z internetu, ale powinien jednak pojawić się w chwili osiągnięcia punktu uwagi – fokusa. Poniżej prezentujemy na przykładzie serwisu pad.widzialni.org oraz szablonów udostępnionych w PAD.

Przykład portalu PAD:

Przykład szablonu z PAD:

Przykładowe rozwiązanie zastosowane w stylach CSS:

#skipLinks a { 
display: inline;
left: -9000em
;
padding: 7px 10px;
position: absolute
;
text-align: center;
text-decoration: none;
width: 150px;
z-index: 200;
}

Najistotniejszymi właściwościami są:

  • „position: absolute” - powoduje, że miejsce zajmowane przez skip linki zostaje zwolnione i nie przeszkadza w rozmieszczeniu pozostałych informacji.
  • „left:-9000em „ – powoduje wysunięcie skip linków -9000 jednostek poza lewą krawędź przeglądarki. Pozwoli to na ukrycie elementu przed użytkownikami, którzy nie potrzebują takiego wsparcia.
#skipLinks a:hover, 
#skipLinks a:focus,
#skipLinks a:active { background: #231f20; color: #fff; left: 0; position: absolute; top: 0; }

Podczas nawigacji za pomocą klawiatury (klawisz Tab) w momencie, kiedy użytkownik znajdzie się na jednym ze skip linków, zadziała zdefiniowana w CSS pseudo klasa :focus, która spowoduje, że wysunięty wcześniej odnośnik wróci na swoje miejsce „left:0” oraz będzie wyróżniony odpowiednim tłem i kolorem „background: #231f20; color: #fff”


Galeria zdjęć

Powiększ zdjęcie: Skip linki - strony www