Testy klawiatury i czytnika ekranu krok po kroku | We.Inc
Ręczny test dowolnej strony krok po kroku: klawiatura, polecenia NVDA i VoiceOver, link pomijania do treści, CSS :focus-visible i lista kontrolna do odhaczania.
Aby przetestować stronę klawiaturą, odłóż mysz i używaj Tab, Shift+Tab, Enter, Space oraz strzałek, żeby dotrzeć do wszystkiego i to obsłużyć, obserwując widoczną ramkę fokusu i sensowną kolejność. Następnie włącz czytnik ekranu, NVDA w Windows lub VoiceOver na Macu, i sprawdź, czy nagłówki, linki, przyciski i pola formularzy są wyraźnie odczytywane.
Kryteria WCAG 2.2 objęte tymi testami
Kryterium
Poziom
Co sprawdzasz
2.1.1 Klawiatura
Wszystko działa bez myszy
2.1.2 Brak pułapki klawiaturowej
Fokus zawsze może się znowu przenieść dalej
2.4.1 Możliwość pominięcia bloków
Sposób na pominięcie powtarzającej się nawigacji
2.4.3 Kolejność fokusu
Kolejność tabulacji odpowiada sensowi strony
2.4.7 Widoczny fokus
AA
Zawsze widzisz, gdzie jest fokus
2.4.11 Niezasłonięty fokus (minimum)
AA
Przyklejone paski nie zasłaniają elementu z fokusem
4.1.2 Nazwa, rola, wartość
Kontrolki ogłaszają, czym są i jaki mają stan
Automatyczne narzędzia wykryją brak tekstu alternatywnego i niski kontrast, ale nie powiedzą, czy menu da się otworzyć klawiszem Enter ani czy użytkownik czytnika ekranu rozumie formularz. Ta strona prowadzi przez ręczny test po kolei, z obszarem ćwiczeniowym pokazującym dokładnie, który element ma fokus, i listą kontrolną, która zapamiętuje, gdzie jesteś.
Otwórz testowaną stronę w innej karcie. Trzymaj tę listę kontrolną obok.
Najpierw przejdź kroki z klawiaturą, odhaczając każdy punkt. Licznik postępu aktualizuje się na bieżąco.
Przećwicz w obszarze ćwiczeniowym: przechodź po nim klawiszem Tab, a wskaźnik fokusu poda nazwę elementu, który ma fokus.
Potem uruchom czytnik ekranu poleceniami z tabel i powtórz tę samą ścieżkę, słuchając.
Skopiuj kod linku pomijania i stylu fokusu, aby naprawić najczęstsze błędy.
Testuj kluczowe ścieżki, nie każdą stronę: menu, wyszukiwanie, główny formularz, zamówienie lub rezerwację oraz każde okno dialogowe.
Podczas tabulacji powiększ widok przeglądarki do 200 procent. Ramki fokusu i przyklejone nagłówki często nachodzą na siebie przy większych rozmiarach.
Jeśli usuwasz domyślny outline, zastąp go w tej samej regule. Nigdy nie zostawiaj samego outline: none.
Używaj prawdziwych elementów button i a. Klikalny div jest pomijany przez Tab i odczytywany jako zwykły tekst.
Zanim cokolwiek zmienisz, przesłuchaj cały formularz czytnikiem ekranu. Brakujące etykiety od razu słychać.
Najczęściej zadawane pytania
Jakim czytnikiem ekranu testować?
W miarę możliwości tym, którego używają Twoi odwiedzający. NVDA jest darmowy dla Windows od NV Access, a VoiceOver jest wbudowany w każdy Mac i iPhone. Jeśli większość ruchu pochodzi z telefonów, dodaj test z VoiceOver na iPhonie lub TalkBack na Androidzie.
Jak włączyć i wyłączyć NVDA oraz VoiceOver?
Po instalacji NVDA uruchamia się skrótem Control+Alt+N, a Insert+Q go zamyka. Na Macu Command+F5 włącza i wyłącza VoiceOver. Samo naciśnięcie Control ucisza NVDA w połowie zdania.
Czym jest link pomijania do treści?
To pierwszy link na stronie, zwykle ukryty, dopóki nie otrzyma fokusu, który przenosi prosto do głównej treści. Dzięki niemu użytkownicy klawiatury nie muszą na każdej stronie przechodzić przez całą nawigację. WCAG wymienia go jako jedną z wystarczających technik dla 2.4.1 Możliwość pominięcia bloków, obok punktów orientacyjnych i nagłówków.
Używać :focus czy :focus-visible?
:focus-visible pozwala przeglądarce zdecydować, kiedy ramka fokusu jest przydatna, więc użytkownicy klawiatury ją widzą, a kliknięcia myszą w przyciski zwykle jej nie rysują. Według MDN ma szerokie wsparcie od marca 2022. Stylizuj :focus-visible i zachowaj widoczną ramkę dla każdego interaktywnego elementu.
Czym jest pułapka klawiaturowa?
To miejsce, do którego fokus wchodzi i nie może z niego wyjść za pomocą klawiatury, na przykład osadzony odtwarzacz albo własne okno dialogowe, które przechwytuje Tab. Okna modalne powinny trzymać fokus w środku, gdy są otwarte, ale Escape lub przycisk zamknięcia musi zawsze pozwolić odwiedzającemu wyjść.
Tryb przeglądania a tryb fokusu
Czytniki ekranu czytają strony w wirtualnym buforze, w którym pojedyncze litery służą do skoków: w NVDA H przenosi do następnego nagłówka, a K do następnego linku. Gdy trafiasz do pola tekstowego, czytnik przełącza się w tryb fokusu, więc litery są wpisywane. NVDA+Space przełącza między trybami ręcznie.
Dlatego własny widżet reagujący tylko na strzałki może wydawać się zepsuty. W trybie przeglądania czytnik może przechwycić te klawisze, zanim usłyszy je Twój skrypt, więc używaj natywnych elementów albo wzorców z ARIA Authoring Practices.
Jak brzmi dobry wynik
Każda kontrolka powinna być odczytana jako nazwa, rola i w razie potrzeby stan: Szukaj, pole edycji; Menu, przycisk, zwinięty; Subskrybuj, pole wyboru, niezaznaczone. Jeśli brakuje któregokolwiek z tych trzech, popraw znaczniki, zanim dodasz ARIA.
Nagłówki powinny tworzyć konspekt, który dałoby się przeczytać jak spis treści. Otwórz listę nagłówków w liście elementów NVDA lub w rotorze VoiceOver i sprawdź, czy ma sens sama w sobie.
Zapisywanie znalezisk
Opisz każdy problem jako stronę, kroki, czego się spodziewałeś i co się stało, plus kryterium, którego nie spełnia. Taki format pozwala programiście odtworzyć błąd bez zgadywania.
Po poprawkach przetestuj ponownie tymi samymi krokami. Szczególnie problemy z fokusem lubią wracać po zmianie stylu nagłówka lub okna modalnego.
Klawisze do testów samą klawiaturą
Standardowe zachowanie klawiatury w przeglądarce
Klawisz
Co powinien robić
Tab / Shift+Tab
Przejść do następnego lub poprzedniego elementu, który może mieć fokus
Enter
Otworzyć link lub nacisnąć przycisk
Space
Nacisnąć przycisk, zaznaczyć pole wyboru, przewinąć stronę, gdy nic nie ma fokusu
Strzałki
Poruszać się w grupach przycisków opcji, listach wyboru, menu i listach kart
Escape
Zamknąć okno dialogowe, menu lub wyskakujące okienko
Polecenia NVDA (Windows, układ desktopowy)
Klawisz NVDA to domyślnie Insert; podręcznik użytkownika dopuszcza też Caps Lock. Klawisze pojedynczych liter działają w trybie przeglądania.
Z podręcznika użytkownika NVDA
Czynność
Klawisze
Uruchom NVDA
Control+Alt+N
Zatrzymaj mowę
Control
Czytaj od tego miejsca (czytaj wszystko)
NVDA+Down Arrow
Przełącz tryb przeglądania i fokusu
NVDA+Space
Lista elementów (linki, nagłówki, punkty orientacyjne)
NVDA+F7
Następny nagłówek / punkt orientacyjny / link
Następne pole formularza / przycisk
Następna tabela / lista
Zamknij NVDA
NVDA+Q
Polecenia VoiceOver (Mac)
VO oznacza modyfikator VoiceOver: Control i Option przytrzymane razem albo sam Caps Lock.
Z podręcznika użytkownika VoiceOver firmy Apple
Czynność
Klawisze
Włącz lub wyłącz VoiceOver
Command+F5
Otwórz rotor
VO+U
Zmień listę rotora (nagłówki, linki i inne)
Strzałka w lewo lub w prawo w rotorze
Poruszaj się po wybranej liście
Strzałka w górę lub w dół w rotorze
Poprawki najczęstszych błędów
Link pomijania do treści
Kliknij wewnątrz wyniku, a potem naciśnij Tab. Link wysuwa się tylko wtedy, gdy ma fokus, a jego celem jest element main.
Ramka fokusu widoczna tylko dla użytkowników klawiatury
Przejdź klawiszem Tab do przycisków w wyniku. Odsunięta ramka nie dotyka krawędzi przycisku, a kliknięcia myszą zwykle zostawiają ją ukrytą.
Elementy z fokusem nie chowają się pod przyklejonym nagłówkiem
scroll-padding-top rezerwuje miejsce u góry, gdy przeglądarka przewija do widoku element z fokusem lub kotwicę.
Tylko klawiatura
Naciśnij Tab raz po załadowaniu strony
Pojawia się link pomijania do treści i działa z Enter
Przejdź klawiszem Tab przez całą stronę
Każdy link, przycisk i pole są osiągalne w kolejności czytania
Obserwuj ramkę fokusu na każdym przystanku
Jest zawsze widoczna i nigdy nie chowa się za przyklejonym nagłówkiem
Otwórz menu i wszystkie listy rozwijane
Enter lub Space je otwiera; Escape zamyka i przywraca fokus
Obsłuż własne widżety
Karty, suwaki i karuzele reagują na oczekiwane klawisze
Otwórz i zamknij okno dialogowe
Fokus wchodzi do środka, zostaje w nim i potem wraca do elementu, który je otworzył
Wypełnij i wyślij główny formularz
Błędy są osiągalne, a fokus trafia w sensowne miejsce
Spróbuj utknąć
Żaden osadzony element ani widżet nie więzi fokusu
Czytnik ekranu
Posłuchaj tytułu strony i pierwszego nagłówka
Mówią, na której stronie jesteś
Otwórz listę nagłówków
Nagłówki tworzą sensowny konspekt z jednym h1
Otwórz listę punktów orientacyjnych
Są obecne regiony banera, nawigacji, treści głównej i stopki
Przejdź przez linki
Tekst każdego linku ma sens poza kontekstem
Odwiedź każde pole formularza
Każde pole ogłasza etykietę, typ i to, czy jest wymagane
Wywołaj komunikat o błędzie i o sukcesie
Oba są odczytywane bez ruszania myszą
Sprawdź obrazy
Obrazy informacyjne mają tekst alternatywny; dekoracyjne milczą
Przełącz przycisk lub pole wyboru
Nowy stan, na przykład rozwinięty lub zaznaczony, jest ogłaszany
Lista kontrolna testów
Resetuj
Odhaczaj każdy krok podczas testu. Twoje zaznaczenia zostają tylko na tej stronie.
Ukończono {n} z {total} kroków
Żaden element strony nie ma fokusu
pole {t}
brak dostępnej nazwy
Przejdź klawiszem Tab do obszaru, aby zacząć
Obszar ćwiczeń z fokusem
Przechodź klawiszem Tab przez te kontrolki. Wskaźnik podaje nazwę elementu, który ma teraz fokus.