Sprawdzanie pod kątem ułatwień dostępu

Rob Dodson

Ustalenie, czy dostęp do witryny lub aplikacji jest możliwy, może wydawać się przytłaczające. Jeśli pierwszy raz zajmujesz się ułatwieniami dostępu, złożoność tematu sprawia, że zastanawiasz się, od czego zacząć. W końcu dbanie o uwzględnienie różnorodnych umiejętności oznacza konieczność rozważania odpowiednio zróżnicowanych problemów.

W tym poście opisane są te problemy w ramach logicznego, szczegółowego procesu sprawdzania istniejącej witryny pod kątem dostępności.

Zacznij od klawiatury

W przypadku użytkowników, którzy nie mogą używać myszy lub nie chcą jej używać, nawigacja za pomocą klawiatury jest podstawowym sposobem na dotarcie do wszystkich elementów widocznych na ekranie. Ta grupa odbiorców obejmuje użytkowników z niepełnosprawnością ruchową, np. urazami po powtarzalnym przeciążeniu (RSI) lub paraliż, a także osoby korzystające z czytników ekranu.

Żeby wygodnie korzystać z klawiatury, zadbaj o logiczną kolejność kart i wyraźnie widoczne style zaznaczenia.

  • Zacznij od przejścia klawiszem Tab w witrynie. Kolejność elementów powinien być zgodna z kolejnością DOM. Jeśli nie masz pewności, na których elementach należy skupić się, zajrzyj do Podstaw koncentracji. Sprawdzona metoda jest taka, że wszystkie elementy sterujące, z którymi użytkownik może korzystać lub które mogą wprowadzać, powinny być dostępne do zaznaczenia i mieć wskaźnik fokusu (np. pierścień ostrości).

  • Niestandardowe interaktywne elementy sterujące powinny być możliwe do zaznaczenia. Jeśli za pomocą JavaScriptu zmienisz element <div> w formalne menu, nie zostanie on automatycznie wstawiony do kolejności kart. Aby niestandardowy element sterujący można było zaznaczyć, nadaj mu tabindex="0". Wartości tabindex większe niż 0 powodują zmianę kolejności kart, co może być mylące dla użytkowników czytników ekranu.

  • Umożliwiają zaznaczenie tylko treści interaktywnych. Dodanie atrybutu tabindex do elementów nieinteraktywnych, takich jak nagłówki, spowalnia działanie klawiatury, która widzi ekran, i nie pomaga użytkownikom czytników ekranu, bo czytnik ekranu już wie, jak je wypowiadać.

  • Jeśli dodasz do strony nowe treści, najpierw skup się na nich, aby użytkownik mógł podjąć odpowiednie działania. Przykłady znajdziesz w sekcji Zarządzanie aktywnością na poziomie strony.

  • Zaprojektuj witrynę w taki sposób, aby użytkownik zawsze mógł w dowolnym momencie skupić się na następnym elemencie. Uważaj na widżety z autouzupełnianiem i inne konteksty, które mogą zapchać klawiaturę. Możesz tymczasowo zablokować fokus, gdy chcesz, aby użytkownik wchodził w interakcję z elementem modalnym, a nie z resztą strony, ale zawsze zadbaj o możliwość opuszczenia okna modalnego przy użyciu klawiatury. Przykład znajdziesz w sekcji Modas i pułapki na klawiaturę.

Spraw, by można było łatwo korzystać z elementu sterującego koncentracją

Jeśli korzystasz z opcji niestandardowych, pozwól użytkownikom korzystać ze wszystkich funkcji za pomocą samej klawiatury. Przeczytaj artykuł Zarządzanie komponentami, aby dowiedzieć się, jak poprawić dostęp do klawiatury.

Zarządzanie treściami poza ekranem

Wiele witryn zawiera treści spoza ekranu, które są obecne w DOM, ale nie są widoczne. Są to na przykład linki w elastycznym menu panelu lub przycisk w oknie modalnym, które nie zostało jeszcze wyświetlone. Pozostawienie tych elementów w modelu DOM może utrudnić korzystanie z klawiatury, zwłaszcza w przypadku czytników ekranu, które rozpoznają treści poza ekranem tak, jakby były częścią strony.

Wskazówki dotyczące tych elementów znajdziesz w sekcji Postępowanie z treściami poza ekranem.

Testowanie za pomocą czytnika ekranu

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 artykuł Struktura treści.

  • Sprawdź, czy na wszystkich obrazach znajduje się prawidłowy tekst w języku: alt. Wyjątkiem jest sytuacja, gdy obrazy służą głównie do celów prezentacji i nie są niezbędnymi materiałami. Aby wskazać, że czytniki ekranu mają pomijać obraz, ustaw pusty ciąg znaków: 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ź, czy we wszystkich niestandardowych elementach sterujących znajduje się odpowiedni role i wszystkie wymagane atrybuty ARIA, które informują o ich stanie. Na przykład niestandardowe pole wyboru wymaga właściwości role="checkbox" i aria-checked="true|false", aby poprawnie przekazać jego stan. W artykule Wprowadzenie do ARIA znajdziesz ogólny opis tego, jak ARIA może dostarczać brakującej semantykę na potrzeby niestandardowych ustawień.
  • Spraw, aby przepływ informacji na stronie był sensowny. Czytniki ekranu poruszają się po stronie w kolejności DOM, więc wypowiadają wszystkie elementy, które wizualnie przesunięto za pomocą CSS w niesensownej kolejności. Jeśli chcesz, aby jakiś element pojawił się wcześniej na stronie, przenieś to wcześniej w DOM.
  • Staraj się obsługiwać nawigację za pomocą czytnika ekranu w przypadku całej treści strony. Upewnij się, że żadna sekcja witryny nie jest trwale ukryta ani nie ma dostępu dla czytnika ekranu.
    • Jeśli treść powinna być ukryta przed czytnikiem ekranu, np. poza ekranem lub tylko prezentacją, ustaw ją na aria-hidden="true". Dokładniejsze wyjaśnienia znajdziesz w sekcji Ukrywanie treści.

Poznaj czytniki ekranu

Choć nauka obsługi czytnika ekranu może wydawać się trudna, w rzeczywistości jest on bardzo prosty w obsłudze. Większość programistów da sobie radę wystarczyć kilka prostych poleceń.

Jeśli używasz komputera Mac, obejrzyj ten film o VoiceOver – czytniku ekranu zainstalowanym w systemie Mac OS. Jeśli korzystasz z komputera, obejrzyj ten film o NVDA – czytniku ekranu open source z obsługą darowizn dostępnym w systemie Windows.

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ą polecenia aria-hidden="true" możesz ukryć element przed czytnikami ekranu, ale nie zmieni to jego aktywności. W przypadku treści interaktywnych poza ekranem używaj atrybutu inert, aby mieć pewność, że zostanie całkowicie usunięta z klawiatury. W starszych przeglądarkach dodaj kombinację aria-hidden="true" i tabindex="-1".

Elementy interaktywne powinny określać ich przeznaczenie i stan

Dostarczenie wizualnych wskazówek (asortymentów) dotyczących działania elementu sterującego ułatwia wielu osobom korzystającym z różnych urządzeń obsługę Twojej witryny i poruszanie się po niej.

  • 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ąć. Istnieje wiele prawidłowych sposobów oznaczania elementów interaktywnych. Jedną z praktycznych 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ą stanu hover, który informuje użytkowników, że kursor myszy znajduje się na elemencie, który można kliknąć. Aby jednak te elementy były dostępne dla innych metod wprowadzania, muszą się one odróżniać bez stanu hover.

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

Nagłówki i punkty orientacyjne nadają stronie 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>. Z tego względu warto zastanowić się, jak można wykorzystać strukturę strony do kształtowania wygody użytkowników.

  • Użyj hierarchii h1-h6. Nagłówki to narzędzia do tworzenia konspektu strony. Nie polegaj na wbudowanym stylu nagłówków. Zamiast tego traktuj je jak wszystkie materiały w tym samym rozmiarze i stosuj odpowiednie pod względem semantycznym poziom w przypadku treści podstawowych, drugorzędnych i trzeciorzędnych. Następnie użyj CSS, by dopasować nagłówki do swojego 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 dokładnie definiować regiony na stronie, tak jak w przypadku atrybutu <div role="search">. Więcej przykładów znajdziesz w sekcji Semantyki i poruszanie się po treści.
  • Unikaj stosowania role="application", chyba że masz doświadczenie w pracy z nim. Rola punktu orientacyjnego application informuje technologię wspomagającą, aby wyłączył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.

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 testowania ułatwień dostępu możesz skorzystać z tych menu, aby przejrzeć przegląd strony i sprawdzić, czy poziomy nagłówków są odpowiednie i które punkty orientacyjne są używane.

Aby dowiedzieć się więcej, zapoznaj się z filmami instruktażowymi o podstawach działania VoiceOver i NVDA.

Zautomatyzuj proces

Ręczne testowanie witryny pod kątem ułatwień dostępu może być uciążliwe i podatne na błędy. Automatyczne testowanie pomaga w miarę możliwości. Możesz używać rozszerzeń do przeglądarki i pakietów testowych ułatwień dostępu w wierszu poleceń.

  • Czy strona przejdzie wszystkie testy rozszerzenia przeglądarki aXe lub WAVE? Dostępne są też inne opcje, ale te rozszerzenia mogą być przydatne w przypadku każdego testu ręcznego, ponieważ mogą wykryć drobne problemy, takie jak nieprawidłowe współczynniki kontrastu czy brakujące atrybuty ARIA.
    • Jeśli wolisz pracować z poziomu wiersza poleceń, pamiętaj, że axe-cli oferuje te same funkcje co rozszerzenie do przeglądarki aXe, ale możesz je 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 także narzędzie wiersza poleceń.
  • Jeśli używasz platformy lub biblioteki, czy udostępnia ona własne narzędzia ułatwień dostępu? Może to być na przykład protractor-accessibility-plugin w Angular. W miarę możliwości korzystaj z dostępnych narzędzi.

Testowanie PWA za pomocą Lighthouse

Lighthouse to narzędzie do pomiaru wydajności progresywnej aplikacji internetowej (PWA). Wykorzystuje też bibliotekę axe-core do testowania ułatwień dostępu.

Jeśli korzystasz już z Lighthouse, poszukaj w raporcie niepowodzeń testów ułatwień dostępu. Popraw błędy, aby poprawić ogólne wrażenia użytkowników witryny.

Dodatkowe materiały