Obsługa przy użyciu klawiatury
- Elementy rozwijalne menu głównego nie są dostępne za pomocą klawiatury (błąd). – Procent wystąpień: 40,3%
- Strona zawiera elementy klikalne, które nie są obsługiwane przy użyciu klawiatury (błąd) – Procent wystąpień: 25,4%
- Elementy menu głównego nie są dostępne z poziomu klawiatury (błąd) – Procent wystąpień: 20,9%
- Serwis posiada elementy klikalne, które nie są dostępne przy użyciu klawiatury (błąd) – Procent wystąpień: 12,7%
Dotyczy kryteriów sukcesu WCAG: 2.1.1 Klawiatura
Kto może poprawić: Web developer
Opis / zalecane rozwiązanie: Budowa menu musi zapewniać dostęp do wszystkich jego elementów przy pomocy klawiatury. Każdy kolejny link w menu musi być dostępny, gdy naciskamy klawisz Tab.
Elementy rozwijalne należy zawsze oznaczać atrybutami ARIA: aria-haspopup=”true”, oraz ich stan przy pomocy aria-expanded=”false/true”. Należy też tak budować obsługę rozwijania, aby reagowała ona na klawisz Enter i zmieniała wartość aria-expanded. Element rozwijalny nie powinien zawierać linku, bo zamiast rozwinąć podmenu, przejedzie do celu odnośnika. Dzięki temu nawigujący klawiaturą mają możliwość szybkiego dotarcia do potrzebnego menu i dostępu do jego podmenu. Są również uprzedzani, czy Tab przeniesie ich do kolejnego głównego elementu menu, czy do rozwiniętej listy. Pamiętajmy o prawidłowej kolejności list rozwijanych, by wyjście z nich prowadziło do kolejnego elementu głównego menu i nie pomijało go (prawidłowy tabindex).
Należy się upewnić, że każdy aktywny element serwisu, wyszukiwarki i funkcji sterujących działaniem strony otrzymuje focus klawiatury i że kolejność tabindex jest logiczna. Każdy przycisk, ikona, którą można kliknąć, muszą być obsłużone klawiaturą i poprawnie zgłaszać swój stan czytnikom ekranu. Dobrą praktyką jest budowanie menu w oparciu o strukturę listy z linkami. W przypadku skomplikowanych rozwiązań np.: megamenu należy w razie potrzeby opatrzyć jego elementy atrybutem tabindex ze stosowną wartością. Należy także pamiętać o poprawnym sposobie opuszczenia elementu i przejścia do dalszej części strony przy pomocy klawiatury.
Serwis może posiadać odnośniki do dokumentów, które nie są dostępne (problem). – Procent wystąpień: 42,7%
Dotyczy kryteriów sukcesu WCAG: wiele kryteriów – osadzane i linkowane dokumenty same powinny być zgodne z WCAG.
Kto może poprawić: Redaktor treści
Opis / zalecane rozwiązanie: Należy sprawdzić, czy dokumenty umieszczone na stronach są w formatach umożliwiających ich odczytanie przy pomocy technologii wspomagających. Unikamy formatu pdf (chyba że mamy pewność, że pdf został przygotowany z myślą o dostępności. Najbezpieczniej zwykle umieszczać dokumenty w formacie MS Word – docx. Najbardziej porządane jest umieszczanie dokumentów w kilku formatach do wyboru.
Serwis posiada odnośniki wyróżnione tylko kolorem. – Procent wystąpień: 42,1%
Dotyczy kryteriów sukcesu WCAG: 1.4.1 Użycie koloru
Kto może poprawić: Administrator strony, Web developer
Opis / zalecane rozwiązanie: Odnośniki (oraz inne istotne elementy aktywne i informacyjne) powinny być wyróżniane również inną cechą oprócz koloru. Może być to problemem dla osób z zaburzeniami widzenia, a szczególnie z nierozróżnianiem kolorów. Dlatego właśnie warto dodać w CSS deklarację a {text-decoration: underline;}. Podobnie z komunikatami np. o poprawności wypełnienia pola formularza — samo wyróżnienie ich kolorem czerwonym, czy zielonym może być niewystarczające. Warto dodać również graficzną ikonę albo napisy (OK, Błąd!) obok takiego pola.
Kontrast koloru treści z tłem
- Serwis posiada elementy niespełniające wymogów kontrastu (problem). – Procent wystąpień: 40,3%
- Serwis posiada odnośniki, które nie spełniają wymogów kontrastu (błąd). – Procent wystąpień: 14,3%
- Serwis posiada teksty umieszczane na ilustracjach, które mogą nie spełniać wymogów kontrastu – Procent wystąpień: 9,9%
Dotyczy kryteriów sukcesu WCAG: 1.4.3 Kontrast (minimum)
Kto może poprawić: gdy system pozwala – Administrator strony, Web developer
Opis / zalecane rozwiązanie: Elementy tekstowe, w tym odnośniki muszą mieć kolor zapewniający odpowiedni kontrast z tłem. Zapewni to prawidłowy odczyt i obsługę przez osoby z dysfunkcjami wzroku. Dotyczy to podstawowej wersji strony — dodatkowe wersje o wysokim kontraście mogą być nieobowiązkową, uzupełniającą funkcją. Wyjątkiem są sytuacje, gdy użyte kolory są np. częścią identyfikacji wizualnej. Wówczas należy zadbać o łatwy dostęp do specjalnej, kontrastowej wersji. W przypadku odnośników trzeba również pamiętać o prawidłowych kolorach dla wszystkich stanów (pseudoklasy CSS – : visited, :focus, :hover, :active). W przypadku tekstów na tle obrazków w uzyskaniu kontrastu możne pomóc umieszczenie ich na ramce z przyciemniającym tłem (nawet półprzezroczystym, np.: background-color: rgba(0, 0, 0, 0.5)). Polecanym narzędziem do badania kontrastu jest Colour Contrast Analyser (CCA) firmy TPGi.