Co się psuje w obsłudze wyłącznie za pomocą klawiatury
Najczęstsza pomyłka w obsłudze wyłącznie za pomocą klawiatury polega na tym, że interaktywne elementy są widoczne, ale niedostępne za pomocą klawisza Tab. Pomyśl o menu, które otwiera się tylko po kliknięciu myszką, przycisku, który nie otrzymuje fokusu, lub oknie dialogowym, które nie można zamknąć bez myszy. Dla osób, które z powodu ograniczeń ruchowych nie mogą używać myszy, lub dla osób obsługujących czytnik ekranu oparty na nawigacji za pomocą klawiatury, oznacza to, że część witryny jest po prostu niemożliwa w użyciu.
Przyczyna prawie zawsze tkwi w elementach niestandardowych: programista tworzy eleganckie menu rozwijane, niestandardowy selektor daty lub rozwijane filtry z własnym kodem HTML i JavaScript, ale zapomina o obsłudze klawiatury, którą standardowy przycisk HTML lub link otrzymuje za darmo. Element wygląda dobrze i działa z myszką, dlatego podczas testowania nikt nie zauważa, że klawisz Tab po prostu nad nim przeskakuje.
Dlaczego to często wymyka się uwadze
Ten błąd jest uporczywy, ponieważ nie widać go gołym okiem. Ktoś, kto przechodzi przez sklep internetowy za pomocą myszy, nigdzie nie widzi problemu. Dopiero gdy pomyślimy bez myszy i poruszamy się po stronie tylko za pomocą klawisza Tab, Shift+Tab, Enter i klawiszy strzałek, staje się widoczne, gdzie nawigacja się zawiesza. Ponieważ takie testy rzadko są standardową częścią procesu oddania projektu, problem często pozostaje niezauważony przez wiele lat — aż do czasu, gdy użytkownik lub organ nadzoru napotka go osobiście.
Druga przyczyna polega na tym, że wiele tych wad pojawia się właśnie w miejscach, które są najbardziej widoczne podczas użytkowania: krok zakupu, ekran logowania, filtr wyszukiwania. To są dokładnie te elementy, które są często tworzone niezależnie od reszty witryny, z własnymi komponentami, które nie zawsze otrzymują taką samą staranność co główna nawigacja.
Jak to rozpoznać samodzielnie
Prosty początkowy test to porzucenie myszy i przejście przez przepływ strony wyłącznie za pomocą klawiatury. Zwróć uwagę na trzy rzeczy: czy każdy element, na który można kliknąć, jest dostępny za pomocą klawisza Tab, czy w każdym momencie jest jasne, który element ma fokus, oraz czy każdy element, który się otwiera — menu, filtr, okno dialogowe — można również zamknąć bez myszy. Jeśli fokus zawiesza się w oknie dialogowym, przeskakuje na nieoczekiwane miejsce lub całkowicie znika z widoku, to sygnał, że trzeba coś zrobić.
Zautomatyzowana analiza może wykryć część tych problemów, na przykład brakujące wskaźniki fokusu lub elementy bez dostępu do klawiatury, które są technicznie rozpoznawalne w kodzie źródłowym. Jednak to, czy menu rozwijane można również obsługiwać w logiczny i przewidywalny sposób, to coś, czego analiza nie może w pełni ocenić — w istocie pozostaje to oceną człowieka. To zresztą dotyczy wielu wymagań WCAG, co zawsze wymieniamy w raporcie. uruchom darmową szybką analizę Twoich najważniejszych stron aby zobaczyć, jaka część tego rodzaju problemów jest już automatycznie wykrywana.
Jak to zapobiec
Rozwiązanie zwykle nie leży w dodatkowej technologii umieszczonej na witrynie, ale w prawidłowym użyciu istniejących elementów. Standardowy przycisk HTML lub link jest naturalnie dostępny za pomocą klawisza Tab i można go obsługiwać za pomocą klawisza Enter; jeśli ktoś zamiast tego udostępni tekst lub obraz za pomocą JavaScript, musi sam dodać obsługę klawiatury. W przypadku komponentów niestandardowych, takich jak menu, filtry i okna dialogowe, powinna istnieć jasna umowa z programistą: każdy element musi być otwieralny, obsługiwalny i zamykalny za pomocą klawiatury, a fokus musi pozostać widoczny i przewidywalny.
To, co nie pomaga, to widget dostępności, który twierdzi, że naprawia tego rodzaju braki za pomocą oddzielnego skryptu. Taki overlay nie zmienia kodu źródłowego i dlatego nie zmienia rzeczywistej funkcjonalności; prawo wymaga dostępnej witryny, a nie warstwy nałożonej na wierzch. Celowo nie sprzedajemy tego typu widgetów.
Chcesz wiedzieć, które części Twojej witryny lub aplikacji zawierają tego rodzaju problemy strukturalne i jaką wagę mają na liście priorytetów Twojego planu poprawy? W bazie wiedzy pogrupowanej podle tematów przeczytasz dla każdego typu braku, co się dzieje, a jak przebiegają nasze testy dokładnie zobaczysz, która część jest testowana automatycznie i która wymaga ręcznej uwagi.
Masz jeszcze pytania na temat tego, co wchodzi w zakres tego wymogu, a co nie, lub dotyczące reszty ram testowania? Odpowiedzi na najczęściej zadawane pytania dają już odpowiedź na większość z nich.
Bezpłatne szybkie skanowanie axessia.eu daje od razu wskazanie, czy tego rodzaju problemy z klawiaturą występują na Twojej witrynie, bez konieczności posiadania konta.