Jak sprawdzić ułatwienia dostępu

Jak sprawdzić, czy w witrynie nie występują problemy z ułatwieniami dostępu.

Ustalenie, czy witryna lub aplikacja jest dostępna, może wydawać się przytłaczającym zadaniem. Jeśli zwracasz się po raz pierwszy do ułatwień dostępu, szeroki zakres zagadnień, które Ci w tym pomogą, może skłonić Cię do zastanowienia.

W tym poście podzielę te problemy na logiczny, krok po kroku proces sprawdzania istniejącej witryny pod kątem dostępności.

Zacznij od klawiatury

Ikona klawiatury.

W przypadku użytkowników, którzy nie mogą lub nie chcą używać myszy, główną metodą dotarcia do wszystkich elementów na ekranie jest nawigacja przy użyciu klawiatury. Ta grupa odbiorców obejmuje użytkowników z niepełnosprawnością ruchową, np. urazami spowodowanymi stresem powtarzającym się (RSI) lub paraliżem, a także osoby korzystające z czytników ekranu. Aby korzystanie z klawiatury było wygodniejsze, powinna mieć logiczną kolejność kart i łatwo rozpoznawalne style zaznaczenia.

Najważniejsze kwestie

  • Zacznij od przejścia klawiszem Tab w witrynie. Kolejność wskazywania elementów powinna być zgodna z kolejnością DOM. Jeśli nie masz pewności, na których elementach należy skupić się, zajrzyj do sekcji Skupienie na podstawach. Ogólna zasada jest taka, że wszystkie elementy sterujące, z którymi użytkownik może wchodzić w interakcje lub w których mają trafiać dane wejściowe, powinny umożliwiać skupienie i wyświetlać wskaźnik skupienia (np. pierścień ostrości). Częstą praktyką jest wyłączanie stylów skupienia bez podawania metody alternatywnej przez użycie elementu outline: none w CSS, ale jest to rozwiązanie antywzorowe. Jeśli użytkownik klawiatury nie widzi zaznaczonego elementu, nie ma możliwości interakcji ze stroną. Jeśli przy tworzeniu stylu potrzebujesz rozróżniania między myszką i klawiaturą, możesz dodać bibliotekę, np. what-input.

  • Niestandardowe interaktywne elementy sterujące powinny być łatwe do zaznaczenia. Jeśli za pomocą JavaScriptu zmienisz element <div> w zaawansowane menu, nie zostanie on automatycznie wstawiony do kolejności kart. Aby niestandardowy element sterujący można było zaznaczyć, nadaj mu tabindex="0".

  • Unikaj ustawień z wartością tabindex > 0. Elementy te przeskakują wszystkie pozostałe w kolejności kart, niezależnie od swojego położenia w DOM. Może to być mylące dla użytkowników czytników ekranu, ponieważ poruszają się po interfejsie DOM w liniowy sposób.

  • Treści nieinteraktywne (np. nagłówki) nie powinny być zaznaczone. Czasami deweloperzy dodają do nagłówków element tabindex, ponieważ uważa, że są one ważne. Jest to również efekt antywzorowy, który zmniejsza wydajność użytkowników klawiatury, które widzą ekran. Użytkownicy czytników ekranu będą już informowani o tych nagłówkach, więc nie trzeba ich zaznaczać.

  • Jeśli do strony dodawane są nowe treści, upewnij się, że użytkownik jest na niej kierowany, aby mógł podjąć odpowiednie działania. Przykłady znajdziesz w sekcji Zarządzanie aktywnością na poziomie strony.

  • Uważaj, żeby nie stracić skupienie w dowolnym momencie. Uważaj na widżety autouzupełniania, w których zaznaczenie może zablokować się na klawiaturze. Skupienie może być tymczasowo uwięzione w określonych sytuacjach, np. w przypadku wyświetlenia okna modalnego, gdy nie chcesz, aby użytkownik miał interakcję z resztą strony. Postaraj się jednak zapewnić dostępną z klawiatury metodę ucieczki z widoku modalnego. Przykład znajdziesz w przewodniku dotyczącym Modas i pułapek na klawiaturę.

To, że coś można zaznaczyć, nie znaczy, że można go użyć

Jeśli masz własny element sterujący, postaraj się, aby użytkownik miał dostęp do wszystkich jego funkcji za pomocą samej klawiatury. Informacje o sposobach zwiększania dostępu do klawiatury znajdziesz w artykule Zarządzanie aktywnymi komponentami.

Nie zapomnij o treściach poza ekranem

Wiele witryn zawiera treści spoza ekranu, które są dostępne w DOM, ale nie są widoczne. Dotyczy to na przykład linków w elastycznym menu panelu lub przycisku w oknie modalnym, które nie zostało jeszcze wyświetlone. Pozostawienie tych elementów w DOM może utrudniać korzystanie z klawiatury, zwłaszcza w przypadku czytników ekranu, które będą odczytywać treści poza ekranem tak, jakby były częścią strony. Wskazówki, jak sobie z nimi radzić, znajdziesz w sekcji Postępowanie z treściami nieekranowymi.

Korzystanie z czytnika ekranu

ikona notatek

Usprawnienie ogólnej obsługi klawiatury wymaga od Ciebie wykonania kolejnego kroku, czyli sprawdzenia, czy strona ma właściwe etykiety i semantykę oraz czy nie występują na niej utrudnienia w nawigacji przy użyciu czytnika ekranu. Jeśli nie wiesz, jak znaczniki semantyczne są interpretowane przez technologie wspomagające, przeczytaj wprowadzenie do semantyków.

Najważniejsze kwestie

  • Sprawdź, czy na wszystkich obrazach znajduje się prawidłowy tekst w języku: alt. Wyjątkiem jest sytuacja, w której obrazy służą głównie do celów prezentacji, a nie jako niezbędne materiały. Aby zasygnalizować, że czytnik ekranu ma pominąć obraz, ustaw w atrybucie alt pusty ciąg znaków, np. alt="".

  • Zaznacz wszystkie elementy sterujące etykiety. W przypadku ustawień niestandardowych może to wymagać użycia właściwości aria-label lub aria-labelledby. Przykłady znajdziesz w sekcji Etykiety i relacje ARIA.

  • Sprawdź wszystkie niestandardowe elementy sterujące pod kątem odpowiedniego elementu role i wszystkich wymaganych atrybutów ARIA, które określają ich stan. Na przykład do prawidłowego przekazywania stanu niestandardowego pola wyboru wymagane są parametry role="checkbox" i aria-checked="true|false". Ogólne informacje o tym, jak ARIA może dostarczać brakującej semantykę na potrzeby ustawień niestandardowych, znajdziesz we wprowadzeniu do ARIA.

  • Przepływ informacji powinien być sensowny. Czytniki ekranu poruszają się po stronie w kolejności DOM. Jeśli do wizualnego zmiany położenia elementów używasz CSS, informacje te mogą być wypowiadane w sekwencji bez sensu. Jeśli chcesz, by coś pojawiło się wcześniej na stronie, spróbuj przenieść je wcześniej w DOM.

  • Staraj się umożliwić czytnikowi ekranu poruszanie się po całej treści strony. Nie dopuszczaj do trwałego ukrywania żadnych sekcji witryny ani blokowania dostępu czytnikom ekranu.

  • Jeśli treść powinna być ukryta przed czytnikiem ekranu – np. poza ekranem lub tylko prezentacją, ustaw wartość aria-hidden="true". Dokładniejsze wyjaśnienia znajdziesz w przewodniku Ukrywanie treści.

Znajomość używania nawet jednego czytnika ekranu jest bardzo przydatna

Choć nauka obsługi czytnika ekranu może wydawać się trudna do opanowania, Większość programistów da sobie radę wystarczyć kilka prostych poleceń.

Jeśli używasz komputera Mac, obejrzyj ten film na temat korzystania z VoiceOver – czytnika ekranu zainstalowanego w systemie Mac OS. Jeśli korzystasz z komputera, obejrzyj ten film o korzystaniu z NVDA – czytnika ekranu typu open source w systemie Windows, który obsługuje darowizny.

aria-hidden nie wyłącza zaznaczenia klawiatury

Pamiętaj, że ARIA może wpływać tylko na semantykę elementu, a nie na jego działanie. Za pomocą aria-hidden="true" możesz ukryć element przed czytnikami ekranu, ale nie zmieni to jego aktywności. W przypadku treści interaktywnych poza ekranem często trzeba łączyć ze sobą funkcje aria-hidden="true" i tabindex="-1", aby mieć pewność, że znikną one z klawiatury. Proponowany atrybut obojętny ma to ułatwić dzięki połączeniu działania obu atrybutów.

Dostarczenie wizualnych wskazówek dotyczących działania elementu sterującego ułatwia użytkownikom obsługę witryny i poruszanie się po niej. Wskazówki te nazywamy afordancjami. Dzięki temu użytkownicy mogą korzystać z witryny na różnych urządzeniach.

Najważniejsze kwestie

  • Elementy interaktywne, takie jak linki i przyciski, powinny się odróżniać od elementów nieinteraktywnych. Trudno jest użytkownikom poruszać się po witrynie lub aplikacji, gdy nie są w stanie określić, czy element można kliknąć. Można osiągnąć ten cel na wiele sposobów. Jedną z częstych metod jest podkreślanie linków, aby odróżnić je od otaczającego je tekstu.

  • Podobnie jak w przypadku wymogu zaznaczenia elementy interaktywne, takie jak linki i przyciski, wymagają, aby użytkownik najechał kursorem myszy na element, który można kliknąć. Nadal jednak musi on być łatwo rozpoznawalny. Samo wskazywanie klikalnych elementów nie pomaga urządzeniom z ekranem dotykowym.

Korzystanie z nagłówków i punktów orientacyjnych

map icon

Nagłówki i punkty orientacyjne wypełniają stronę semantyczną strukturą i znacznie zwiększają efektywność poruszania się użytkowników technologii wspomagających. Wielu użytkowników czytników ekranu zgłasza, że gdy po raz pierwszy trafiają na nieznaną stronę, zwykle próbują nawigować według nagłówków. Czytniki ekranu pozwalają też przechodzić do ważnych punktów orientacyjnych, takich jak <main> i <nav>. Dlatego warto zastanowić się, jak można wykorzystać strukturę strony do kształtowania wygody użytkowników.

Najważniejsze kwestie

  • Prawidłowo wykorzystaj hierarchię h1-h6. Nagłówki to narzędzia do tworzenia konspektu strony. Nie polegaj na wbudowanym stylu nagłówków; zamiast tego traktuj wszystkie nagłówki tak, jakby miały ten sam rozmiar, i stosuj odpowiednie pod względem semantycznym poziom dla treści głównych, drugorzędnych i trzeciorzędnych. Następnie użyj CSS, aby dopasować nagłówki do projektu.

  • Używaj elementów punktów orientacyjnych i ról, aby użytkownicy mogli pomijać powtarzające się treści. Wiele technologii pomocniczych udostępnia skróty, które umożliwiają przechodzenie do konkretnych części strony, np. tych zdefiniowanych przez elementy <main> lub <nav>. Te elementy mają określone role punktów orientacyjnych. Możesz też użyć atrybutu ARIA role, aby wyraźnie określić regiony na stronie, np. <div role="search">. Więcej przykładów znajdziesz w przewodniku po nagłówkach i elementach wyróżniających.

  • Unikaj języka role="application", chyba że masz doświadczenie w pracy z nim. Rola punktu orientacyjnego application będzie informować technologię wspomagającą osoby z niepełnosprawnością, aby wyłączała skróty i przekazywała wszystkie naciśnięcia klawiszy na stronie. Oznacza to, że klawisze, których zwykle używają użytkownicy czytników ekranu do poruszania się po stronie, przestaną działać i trzeba będzie zaimplementować całą obsługę klawiatury.

Szybko sprawdzaj nagłówki i punkty orientacyjne za pomocą czytnika ekranu

Czytniki ekranu, takie jak VoiceOver i NVDA, udostępniają menu kontekstowe umożliwiające przechodzenie do ważnych obszarów strony. Podczas sprawdzania dostępności możesz skorzystać z tych menu, aby szybko przejrzeć stronę i sprawdzić, czy poziomy nagłówków są odpowiednie i które punkty orientacyjne są używane. Zapoznaj się z filmami instruktażowymi o podstawach korzystania z VoiceOver i NVDA.

Zautomatyzuj proces

ikona klucza

Ręczne testowanie witryny pod kątem ułatwień dostępu może być uciążliwe i podatne na błędy. W przyszłości zechcesz jak najbardziej zautomatyzować ten proces. Możesz w tym celu użyć rozszerzeń przeglądarki lub pakietów testowych ułatwień dostępu w wierszu poleceń.

Najważniejsze kwestie

  • Czy strona przejdzie wszystkie testy rozszerzenia przeglądarki aXe lub WAVE? To tylko dwie dostępne opcje, które mogą być przydatnym uzupełnieniem każdego testu ręcznego, ponieważ pozwalają szybko rozpoznać drobne problemy, takie jak nieprawidłowe współczynniki kontrastu czy brakujące atrybuty ARIA. Jeśli wolisz wykonywać działania z poziomu wiersza poleceń, axe-cli oferuje te same funkcje co rozszerzenie do przeglądarki aXe, ale możesz je łatwo uruchomić z terminala.

  • Aby uniknąć regresji, zwłaszcza w środowisku ciągłej integracji, dodaj bibliotekę taką jak axe-core do zautomatyzowanego zestawu testów. Axe-core to ten sam mechanizm, który obsługuje rozszerzenie aXe do Chrome, a jednocześnie proste w obsłudze narzędzie wiersza poleceń.

  • Jeśli używasz platformy lub biblioteki, czy udostępnia ona własne narzędzia ułatwień dostępu? Oto kilka przykładów: protractor-accessibility-plugin (wtyczka Angular) i a11ysuite dla komponentów Polymer i Web Komponenty. W miarę możliwości korzystaj z dostępnych narzędzi, aby nie wymyślać nowego koła na nowo.

Jeśli tworzysz progresywną aplikację internetową, możesz wypróbować Lighthouse

Logo Lighthouse.

Lighthouse to narzędzie do mierzenia wydajności progresywnej aplikacji internetowej. Wykorzystuje też bibliotekę axe-core do testowania ułatwień dostępu. Jeśli korzystasz już z Lighthouse, zwróć uwagę na testy ułatwień dostępu, które zakończyły się niepowodzeniem. Naprawienie ich poprawi ogólną wygodę użytkowników witryny.

Podsumowanie

Regularne przeprowadzanie kontroli ułatwień dostępu w procesie zespołu oraz częste i wczesne przeprowadzanie kontroli ułatwień dostępu, może poprawić ogólny komfort korzystania z witryny. Pamiętaj, że dobra dostępność to dobre wrażenia użytkowników.

Dodatkowe materiały