Nadszedł czas na kolejny odcinek Wpadek i wypadków. Dzisiaj krótko i treściwie o pomijaniu bloków treści.
W standardzie WCAG 2.x znajduje się kryterium sukcesu 2.4.1 Możliwość pominięcia bloków:
Istnieje mechanizm, który umożliwia pominięcie bloków treści powtarzanych na wielu stronach internetowych.
WCAG podaje przy tym kilka technik, które pozwalają stworzyć rozwiązanie spełniające wymagania:
- dodanie nagłówków do poszczególnych sekcji,
- użycie punktów orientacyjnych do oznaczania najważniejszych elementów strony,
- dodanie „pomijających” linków (skip links).
I choć dla zgodności ze standardem starczy tak naprawdę wykorzystać tylko jedną z powyższych technik, najlepiej skorzystać ze wszystkich trzech naraz. Każda z nich bowiem poprawia nieco inny obszar dostępności.
Dodanie nagłówków
O nagłówkach pisałem już drzewiej. W wielkim skrócie: każda sekcja w dokumencie HTML powinna mieć swój własny nagłówek. jeżeli jakaś sekcja nie ma nagłówka, warto się zastanowić, czy na pewno jest sekcją. Dlatego osobiście raczej stosuję odwrotne podejście: najpierw dodaję nagłówki, a dopiero potem myślę, gdzie by można dodać sekcje. Dzięki temu każda z nich ma nagłówek.
No dobrze, ale po co w ogóle dodawać nagłówki? W swojej najbardziej podstawowej formie strony WWW to po prostu tekstowe dokumenty. Tak jak w Wordzie korzystamy z odpowiedniego formatowania (Nagłówek 1), zamiast powiększać rozmiar fonta, tak samo warto robić w przypadku stron WWW. Jest wiele powodów (polepsza się SEO, ułatwia się stylowanie, HTML jest piękny…), ale najważniejszym jest polepszenie dostępności. Nagłówki są pokazywane w drzewku dostępności. Dzięki temu technologie asystujące, takie jak czytniki ekranu, mogą poinformować osobę odwiedzającą stronę, iż czytany akurat tekst to nagłówek. A iż dobrze dobrane nagłówki są ściśle powiązane z poszczególnymi sekcjami strony, to… można je wykorzystać do nawigacji. jeżeli ktoś czyta bardzo długi artykuł o świnkach morskich, ale interesują go tylko te długowłose, to może przeskoczyć od razu do nagłówka Długowłose przychlasty. Czytniki ekranowe tego typu nawigację umożliwiają. Co więcej, to najczęściej używany typ nawigacji wśród osób korzystających z czytników ekranu. Niestety, przeglądarki nie udostępniają podobnej rzeczy osobom bez czytników ekranu. Niemniej można to dość niskim nakładem środków rozwiązać.
Warto też zauważyć, iż nagłówki przydają się też do „ręcznej” nawigacji po stronie, przy pomocy narzędzi takich jak wyszukiwanie. Wystarczy nacisnąć Ctrl/Cmd + F, a następnie wpisać szukane słowo kluczowe. Przy dobrze wykorzystanych nagłówkach powinien zostać on znaleziony.
Użycie punktów nawigacyjnych
W gruncie rzeczy punkty nawigacyjne (landmarks) pełnią podobną rolę co nagłówki. Niemniej są zdecydowanie bardziej ukryte i widoczne głównie dla technologii asystującej. W przypadku większości stron WWW dodanie takich punktów sprowadza się do używania elementów HTML zgodnie z ich przeznaczeniem. Tabela poniżej pokazuje przykładowe punkty nawigacyjne:
| main | Główna treść strony |
| navigation | Nawigacja strony |
| banner | Element zawierający nagłówek witryny (rzeczy powtarzające się na każdej stronie witryny) |
| region | Sekcja zawierające ważne informacje, które warto oznaczyć. Wymaga dostępnej nazwy. |
Dla części elementów punkty nawigacyjne pokrywają się z nagłówkami (np. element main jest równoważny nagłówkowi h1). Niektóre jednak nie (np. rola navigation nie jest powiązana bezpośrednio z żadnym nagłówkiem). Czytniki ekranu pozwalają przeskakiwać pomiędzy punktami nawigacyjnymi podobnie jak między nagłówkami. Tym samym nagłówki i landmarki uzupełniają się nawzajem.
„Pomijające” linki
Obydwie opisane wyżej techniki są najbardziej pomocne dla osób korzystających z czytników ekranu i podobnych technologii asystujących. Istnieje jednak pewna technika skierowana też (a może przede wszystkim) do osób korzystających z klawiatury, ale niekoniecznie z czytników ekranu. Mowa o „pomijających” linkach (skip links). W dużym skrócie: to linki umieszczone na początku strony, które pozwalają przeskoczyć bezpośrednio do głównej treści. Dzięki temu omija się np. menu nawigacyjne. Dodatkowo, takie linki często są też ukryte wizualnie i pokazują się dopiero, gdy zostaną sfocusowane:
<a href="#tresc">Przejdź do głównej treści</a> <header>nagłówek strony</header> <nav>nawigacja</nav> <main id="tresc" tabindex="-1">główna treść strony</main>„Pomijające” linki używają kotwic. Elementem, do którego w większości przypadków będziemy przeskakiwać, jest main. Warto zwrócić uwagę, iż ma on atrybut [tabindex=-1]. Wymusza on na przeglądarce przeniesienie focusu w odpowiednie miejsce. Dzięki temu kolejne naciśnięcie klawisza Tab przejdzie do pierwszego interaktywnego elementu w main, zamiast np. do nawigacji.
Czasami warto użyć „pomijających” linków także w innych miejscach strony, np. wokół wielkiej tabeli, pełnej interaktywnych elementów. Dzięki temu będzie można przeskoczyć przed nią lub za nią. Inaczej osoba korzystająca z klawiatury do nawigacji będzie zmuszona przetabować przez wszystkie elementy w tabeli.
Połączenie wszystkich trzech opisanych wyżej technik zapewnia najlepszy efekt dla różnych grup osób odwiedzających stronę WWW. Co najlepsze, dwie z tych technik są tak naprawdę darmowe. jeżeli dbamy o semantykę HTML-a, zarówno nagłówki, jak i landmarki, powinny być na swoich miejscach. A „pomijające” linki też są dość nisko wiszącym owocem. Warto po niego sięgnąć i zjeść poprawić kolejny kafelek dostępności.