Odnośniki wewnętrznie — skip linki
- Serwis nie posiada odnośników umożliwiających bezpośrednie przejście do treści stron (błąd). – Procent wystąpień: 41,1%
- Link do przeskoczenia do treści strony istnieje, ale jest uszkodzony – 9,8%
Dotyczy kryteriów sukcesu WCAG: 2.4.1 Możliwość pominięcia bloków
Kto może poprawić: Administrator strony, Web developer
Opis / zalecane rozwiązanie: Odnośniki pozwalające przechodzić bezpośrednio do treści (skip linki) bardzo przyspieszają obsługę strony przy pomocy klawiatury. Obowiązkowy jest link typu “przeskocz do treści”, ale w przypadku rozbudowanej strony mogą być niezbędne dodatkowe np.: “Przeskocz do menu”. Nie powinny być one domyślnie wyświetlane, natomiast muszą jako pierwsze na stronie przechwytywać focus klawiatury. Koniecznie powinny zostać wyświetlone po uzyskaniu fokusu klawiatury. To ważne dla osób widzących, które nie mogą korzystać z myszy. Umieszczamy je od razu na początku <body> przed obszarem <header> lub na jego początku.
Dodanie skip linków do strony nie wymaga wiele pracy i umiejętności. Tam, gdzie to możliwe zalecamy dopisanie kodu HTML– np. w WordPress umieszczamy go w header.php oraz formatowanie w style.css lub w opcji “Własny CSS” w menu “Dostosuj”. Jeśli to problem, można zastosować wtyczkę WP-Accesibility, pamiętając o poprawnej konfiguracji celu odnośnika. Wiele z tych błędów wynika z niepoprawnej konfiguracji CMS WordPress lub z zastosowania innej niż podana wtyczki “dostępności”.
Przykład poprawnego kodu skip-linku:
HTML:
<a class=”skip-link screen-reader-text” href=”#content”>Skocz do treści</a>
UWAGA: Zakładamy tu, że kontener treści ma id=”content”. Proszę pamiętać o dostosowaniu celu odnośnika do rzeczywistego identyfikatora na stronie!!! Jeśli kontener ze swojej natury nie przejmuje fokusa klawiatury, trzeba to poprawić atrybutem tabindex np. tak:
<div id=”content” tabindex=”-1″> … główna treść … </div>
Tak skonstruowany odnośnik będzie działał poprawnie i będzie przyjazny dla czytników ekranu (screenreaderów).
CSS:
Serwis nie posiada mechanizmu wyszukiwania (problem). – Procent wystąpień: 26%
Dotyczy kryteriów sukcesu WCAG: 2.4.5 Wiele dróg
Kto może poprawić: często Administrator strony, Web developer
Opis / zalecane rozwiązanie: Możliwość wyszukiwania jest niezwykle pomocna w przypadku osób z dysfunkcjami wzroku i funkcji poznawczych. Zapewnia szybszy, nierozproszony dostęp do treści. Większość systemów CMS ma wbudowany mechanizm wyszukiwania. W przypadku stron opartych na WordPressie zalecamy natywną wyszukiwarkę wywoływaną w PHP funkcją get_search_form(). Można poprawić wyniki wyszukiwania używając wtyczki WP Extended Search. Należy bardzo uważać na wtyczki zmieniające formularz wyszukiwania. Funkcjonalność “live search” jest intuicyjna i przyspiesza wyszukiwanie, ale znane wtyczki zawierają błędy dostępności w formularzu i obsłudze podpowiadanych wyników. W przypadku innych systemów można użyć np. Programmable Search Engine firmy Google.
Grafiki i obrazy w serwisie.
- Serwis posiada grafiki będące odnośnikami i nieposiadające opisu w znaczniku ALT lub jest on niewystarczający (błąd). – Procent wystąpień: 24,8%
- Serwis posiada ilustracje bez tekstów alternatywnych (błąd). – Procent wystąpień: 22,4%
- Serwis posiada ilustracje z napisami bez tekstów alternatywnych (błąd). – 7,7%
Dotyczy kryteriów sukcesu WCAG: 1.1.1 Treść nietekstowa
Kto może poprawić: obrazy w treści – Redaktor treści, obrazy zakodowane w strukturze serwisu – Web developer
Opis / zalecane rozwiązanie: Grafiki będące odnośnikami określa się jako funkcjonalne i muszą zawierać atrybut alt jednoznacznie informujący o ich przeznaczeniu lub celu odnośnika. W tym przypadku treść alternatywna obrazka staje się tekstową treścią odnośnika. Nie opisujemy ich zawartości a nazwę strony, treść, sekcję, kategorię itp. do której prowadzą.
Ilustracje przekazujące istotną treść zawsze powinny być opisane w znaczniku alt. Powinien być on dość krótki, ale jednoznacznie określający zawartość obrazka. Przykład: zamiast alt=”studnia” użyjmy raczej alt=”Dziewiętnastowieczny żuraw studzienny”. Brak tego znacznika powoduje, że technologie wspomagające odczytują nic niemówiący adres obrazka. Z kolei obrazki o funkcji ozdobnej lub posiadające rozszerzony opis w treści zawsze oznaczamy <img src=”image.png” alt=””>. Pusty alt spowoduje, że czytniki ekranowe pominą ten obrazek.
Szczególnie ważne jest zapewnienie treści tekstowej w przypadku obrazków z napisami. Jeśli ich treść jest długa, oznaczmy je jako ozdobne i dodajmy tekstową wersję napisów (może być ona ukryta wizualnie). Dobrym pomysłem jest też zastąpienie obrazka z dużą ilością tekstu wersją HTML (np. obrazek w tle a informacje jako tekst — pamiętajmy o kontraście).