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

Rob Dodson

Określanie dostępności witryny lub aplikacji jest to bardzo pracochłonne. Jeśli korzystasz z funkcji ułatwień dostępu po raz pierwszy, zróżnicowanych tematów może sprawić, że będziesz zastanawiać się, od czego zacząć. Ostatecznie, pracy na rzecz osób o zróżnicowanych możliwościach, odpowiednio zróżnicowanych kwestii do rozważenia.

W tym poście omawiamy te problemy w logiczny, krok po kroku, sprawdzanie dostępności witryny pod kątem ułatwień dostępu.

Zacznij od klawiatury

W przypadku użytkowników, którzy nie mogą lub nie chcą używać myszy, nawigacja za pomocą klawiatury jest co przede wszystkim ułatwia dotarcie do wszystkiego, co jest widoczne na ekranie. Ta grupa odbiorców obejmuje użytkowników z niepełnosprawnością ruchową, na przykład skutków powtarzającym się stresem lub skutkami przeciążeń; osób z paraliżem i czytników ekranu.

Aby zapewnić komfort korzystania z klawiatury, postaraj się, aby karty były ułożone logicznie w kolejności wyraźne style ostrości.

  • Zacznij od przeglądania witryny za pomocą klawisza Tab. kolejność, w jakiej elementy są zaznaczone; powinna być zgodna z kolejnością DOM. Jeśli nie masz pewności, które elementy powinny otrzymać zapoznaj się z modułem dotyczącym ułatwień dostępu – informacje. Najlepsze metoda polega na tym, że każdy element sterujący, z którym użytkownik może wchodzić w interakcję lub może podawać dane powinien umożliwiać śledzenie ostrości i zawierać wskaźnik ostrości (np. pierścień ostrości).

  • Niestandardowe interaktywne elementy sterujące powinny mieć możliwość zaznaczenia. Jeśli używasz JavaScript do włączania i wyłączania <div> do zaawansowanego menu, nie zostanie on automatycznie wstawiony w kolejność kart. Aby niestandardowy element sterujący można było zaznaczyć, nadaj mu tabindex="0". Wartości parametru tabindex większe niż 0 zmieniają kolejność kart, co może być mylące w przypadku użytkowników czytników ekranu.

  • Zadbaj o to, aby można było zaznaczyć tylko treści interaktywne. Dodaję tabindex do innych niż interaktywne elementy, takie jak nagłówki, spowalniają pracę użytkowników klawiatury, którzy widzą ekranu i nie jest pomocny dla użytkowników czytników ekranu, ponieważ już wie, by je ogłosić.

  • Jeśli dodasz nową treść do strony, zwróć na nią uwagę użytkownika. aby mogli podjąć działania w tej sprawie. Zobacz Zarządzanie ostrością na poziomie strony .

  • Zaprojektuj witrynę w taki sposób, aby użytkownik mógł zawsze skupić się na następnym elemencie co użytkownik chce. Uważaj na widżety autouzupełniania i inne elementy, które mogą przechwytywać sterowanie za pomocą klawiatury. Możesz tymczasowo zatrzymywać zaznaczenie, gdy chcesz, aby użytkownik korzystają z okna modalnego, a nie pozostałej części strony, umożliwiają wyjście z trybu modalnego przy użyciu klawiatury. Zobacz Moda i pułapki na klawiaturę .

Korzystanie z elementu sterującego ostrością

Jeśli masz niestandardową opcję, pozwól użytkownikom na korzystanie ze wszystkich funkcji przy użyciu samej klawiatury. Odczytano Zarządzanie ostrością komponentów pod kątem metod usprawniania dostępu do klawiatury.

Zarządzanie treściami poza ekranem

Wiele witryn zawiera treści poza ekranem, które znajdują się w modelu DOM, ale są niewidoczne, np. linki w menu elastycznych lub przycisk w oknie modalnym. które nie zostały jeszcze wyświetlone. Pozostawienie tych elementów w modelu DOM może spowodować utworzenie dezorientujące, szczególnie w przypadku czytników ekranu, informować o treści poza ekranem, tak jakby była ona częścią strony.

Patrz Obsługa treści poza ekranem ze wskazówkami, jak radzić sobie z tymi elementami.

Testowanie z użyciem czytnika ekranu

Poprawa ogólnej obsługi klawiatury to podstawa następnego kroku, jest sprawdzenie, czy strona jest poprawnie opisana pod względem etykiet i semantyki oraz czy nie zawiera elementów zakłócających nawigacji przy użyciu czytnika ekranu.

Jeśli nie wiesz, jak znaczniki semantyczne są interpretowane przez funkcję wspomagającą technologii, przeczytaj artykuł Struktura treści.

  • Sprawdź wszystkie obrazy pod kątem prawidłowego tekstu w atrybucie alt. Wyjątkiem jest sytuacja, w której Służą one głównie do celów prezentacji i nie stanowią treści. Aby wskazać, że czytniki ekranu mają pomijać obraz, ustaw parametr na pusty ciąg znaków: alt="".
  • Zaznacz wszystkie elementy sterujące etykietą. W przypadku niestandardowych ustawień może to wymagać parametru użycie funkcji aria-label lub aria-labelledby. Zobacz Etykiety i relacje ARIA .
  • Sprawdź wszystkie niestandardowe elementy sterujące pod kątem odpowiedniej role i wymaganej ARIA które przekazują swój stan. Na przykład niestandardowe pole wyboru musi role="checkbox" i aria-checked="true|false", aby prawidłowo przekazać jego stanu. Informacje ogólne znajdziesz w artykule Wprowadzenie do ARIA. omówienie sposobu ARIA może zapewnić brakującą semantykę niestandardowych elementów sterujących.
  • spraw, aby przepływ informacji na stronie był sensowny; Ponieważ ekran użytkownicy będą poruszać się po stronie w kolejności DOM, zapamiętują wizualne zmienione położenie za pomocą CSS w bezsensownej kolejności. Jeśli potrzebujesz pojawi się na wcześniejszym etapie strony, fizycznie przenieś to wcześniej w DOM.
  • Staraj się umożliwić nawigację przy użyciu czytnika ekranu w przypadku wszystkich treści na stronie. Sprawdź, czy żadne sekcje witryny nie są trwale ukryte ani zablokowane na ekranie z dostępem do odczytu.
    • Czy treść powinna być ukryta dla czytnika ekranu, np. poza ekranem lub tylko w formie prezentacji, ustaw treść na aria-hidden="true". Dokładniejsze informacje znajdziesz tutaj: Ukrywanie treści.

Poznaj czytniki ekranu

Choć nauka obsługi czytnika ekranu może wydawać się trudna, to w rzeczywistości są to świetne jest przyjazna dla użytkownika. Ogólnie rzecz biorąc, większość deweloperów poradzi sobie z wystarczaniem z klawiszy poleceń.

Jeśli używasz komputera Mac, obejrzyj ten film na temat: VoiceOver, z czytnika ekranu w systemie Mac OS. Jeśli używasz komputera, zwróć uwagę na to film o NVDA, czytnik ekranu open source dla systemu Windows obsługiwany przez darowizny.

Funkcja aria-hidden nie blokuje zaznaczenia klawiatury

Pamiętaj, że ARIA może wpływać tylko na semantykę elementu element; Nie ma to wpływu na zachowanie elementu. Możesz zrobić element ukryty dla czytników ekranu za pomocą interfejsu aria-hidden="true", który jednak nie można zmienić wyróżnienie tego elementu. W przypadku treści interaktywnych poza ekranem W przypadku treści interaktywnych poza ekranem użyj atrybutu inert. aby usunąć ją z klawiatury. W starszych przeglądarkach połącz aria-hidden="true" z tabindex="-1".

Elementy interaktywne powinny określać ich przeznaczenie i stan

Dostarczenie wskazówek wizualnych (afordancji) dotyczących działania elementu sterującego pomaga korzystają z niej osoby korzystające z różnych urządzeń i korzystają z niej witrynie.

  • Elementy interaktywne, takie jak linki i przyciski, powinny się odróżniać od nieinteraktywne. Poruszanie się po witrynie lub aplikacji jest trudne, gdy nie potrafią określić, czy dany element jest klikalny. Istnieje wiele prawidłowych sposobów wskazują elementy interaktywne. Częstą praktyką jest podkreślanie linków odróżniać je od otaczającego tekstu.
  • Podobnie jak w przypadku wymogu fokusu, elementy interaktywne, takie jak linki i przyciski, wymagaj stanu hover, aby informować użytkowników myszy, że ich wskaźnik znajduje się na jakimś obiekcie klikalny. Aby jednak udostępnić te elementy innym metodom wprowadzania, muszą być możliwe do rozróżnienia bez użycia stanu hover.

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

Nagłówki i elementy punktów orientacyjnych nadają stronie semantyczną strukturę. znacznie poprawiają efektywność poruszania się użytkowników technologii wspomagających osoby z niepełnosprawnością. Wiele użytkowników czytników ekranu zgłasza, że gdy po raz pierwszy trafią na nieznaną stronę, zwykle starają się nawiguj według nagłówków.

Czytniki ekranu umożliwiają też przechodzenie do ważnych punktów orientacyjnych takie jak <main> i <nav>. Dlatego ważne jest, aby zastanowić się, możesz odpowiednio dostosować strukturę strony.

  • Użyj hierarchii h1-h6. Nagłówki służą do tworzenia konspektów do Twojej strony. Nie polegaj na wbudowanym stylu nagłówków. Zamiast tego traktuj je jak gdyby wszystkie były tej samej wielkości i używały odpowiedniego semantycznego poziomu dotyczące treści podstawowych, drugo- i trzeciorzędnych. Następnie użyj CSS, aby utworzyć pasują do grafiki.
  • Używaj punktów orientacyjnych i ról, aby użytkownicy mogli pominąć powtarzające się treści. Wiele technologie wspomagające osoby z niepełnosprawnością zapewniają skróty umożliwiające przechodzenie do określonych części strony, np. zdefiniowane przez elementy <main> lub <nav>. Te elementy mają niejawne role punktu orientacyjnego. Możesz też użyć atrybutu ARIA role do: bezpośrednio zdefiniuj regiony na stronie, np. <div role="search">. Zobacz Więcej informacji o semantyce i poruszaniu się po treściach przykłady.
  • Unikaj stosowania elementu role="application", chyba że masz doświadczenie w pracy z nim. Rola punktu orientacyjnego application informuje technologię wspomagającą o wyłączeniu i przejść wszystkie naciśnięcia klawiszy na stronie. Oznacza to, że nie działają już czytniki ekranu, których użytkownicy zwykle używają do poruszania się po stronie, i musisz samodzielnie wdrożyć całą obsługę klawiatury.

Sprawdzanie nagłówków i punktów orientacyjnych przy użyciu czytnika ekranu

Czytniki ekranu, takie jak VoiceOver czy NVDA, oferują menu kontekstowe umożliwiające przejście do ważne regiony na stronie. Do testowania ułatwień dostępu możesz użyć opcji za pomocą tych menu, możesz uzyskać ogólny wgląd w stronę i ustalić, czy nagłówek odpowiednie poziomy i używane punkty orientacyjne.

Aby dowiedzieć się więcej, zapoznaj się z tymi filmami instruktażowymi dotyczącymi podstaw: VoiceOver oraz NVDA

Zautomatyzuj proces

Ręczne testowanie ułatwień dostępu w witrynie może być uciążliwe i podatne na błędy. Warto zautomatyzować testowanie, ponieważ jak to tylko możliwe. Możesz korzystać z rozszerzeń przeglądarki i ułatwień dostępu w wierszu poleceń zestawów testów.

  • Czy strona zalicza wszystkie testy aXe lub WAVE rozszerzenia przeglądarki? Dostępne są też inne opcje, ale te rozszerzenia może być przydatnym uzupełnieniem każdego testu ręcznego, ponieważ wykrywają subtelne problemy, takie jak zły współczynnik kontrastu czy brak ARIA. .
    • Jeśli wolisz pracować w wierszu poleceń, axe-cli zapewnia te same funkcje. jako rozszerzenie przeglądarki aXe, ale można je uruchomić z terminala.
  • Aby uniknąć regresji, zwłaszcza w środowisku ciągłej integracji, dołącz bibliotekę, na przykład axe-core do pakietu automatycznych testów. rdzenia osi Axe jest tym samym silnikiem, na którym aXe, ale w narzędziu wiersza poleceń.
  • Jeśli używasz platformy lub biblioteki, czy zapewnia ona własne ułatwienia dostępu? narzędzi? Na przykład parametr protractor-accessibility-plugin w Angular. W miarę możliwości korzystaj z dostępnych narzędzi.

Używanie Lighthouse do testowania aplikacji PWA

Lighthouse to narzędzie, które mierzy wydajność progresywnej aplikacji internetowej (PWA). Wykorzystuje też bibliotekę Axe-core do testowania ułatwień dostępu.

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

Dodatkowe materiały