Pole formularza bez prawidłowo powiązanej etykiety to najczęstszy błąd, który napotykamy na formularzach kontaktowych, procesach zamówień i ekranach logowania. Etykieta jest często widoczna – starannie umieszczona powyżej lub obok pola wejścia – ale w kodzie źródłowym nie jest połączona z tym polem. Czytnik ekranu wówczas odczytuje pole jako "edycja, puste" bez wyjaśnienia, do czego to pole służy.
Problem zwykle powstaje, ponieważ etykieta i pole wejścia wyglądają wizualnie razem, ale programista (lub system budowania) nie ustanowił między nimi relacji technicznej. Dla użytkownika widzącego to nie stanowi problemu: po prostu widzi etykietę. Dla osoby korzystającej z czytnika ekranu ta bliskość wizualna nie istnieje. Liczy się powiązanie w kodzie, a brakuje go częściej, niż byś się spodziewał, nawet na witrynach, które wyglądają starannie.
Trzy warianty tego samego błędu
Najczęstszą formą jest etykieta, która pojawia się na ekranie, ale funkcjonuje niezależnie od pola w kodzie, bez powiązania technicznego. Druga forma to użycie tekstu zastępczego (placeholder) w samym polu jako jedynego wyjaśnienia: gdy użytkownik zaczyna pisać, tekst znika, a czytnik ekranu zwykle nie traktuje placeholdera jako w pełni wartościowej etykiety. Trzecią formę najczęściej widzisz przy ikonach: polu wyszukiwania tylko z ikoną lupy lub przycisku tylko z piktogramem, bez tekstu, który czytnik ekranu mógłby odczytać.
Wszystkie te warianty mają wspólne to, że błąd zwykle nie jest zamierzony. Nikt nie buduje formularza po to, aby był niedostępny. Dzieje się tak, ponieważ etykieta wygląda wizualnie poprawnie, a konstruktor zakłada, że to wystarczy, podczas gdy powiązanie techniczne to osobny krok, który łatwo się pomija, szczególnie pod presją czasu lub w przypadku szablonu pierwotnie zbudowanego bez myśli o dostępności.
Dlaczego to ma większe znaczenie, niż się wydaje
Formularz jest często punktem, w którym odwiedzający chce coś faktycznie załatwić: sfinalizować zamówienie, założyć konto, nawiązać kontakt. Jeśli etykieta brakuje dokładnie w tym momencie, proces zatrzymuje się dla części twoich odwiedzających, podczas gdy reszta witryny działa doskonale. Organy nadzoru i audytorzy zwracają więc szczególną uwagę na tego rodzaju wąskie gardła w formularzach, ponieważ mają bezpośredni wpływ na to, czy ktoś może skorzystać z usługi.
Ponadto ten błąd łatwo się rozprzestrzenia. Etykieta bez powiązania w jednym szablonie dla pola adresu pojawia się zwykle na dziesiątkach stron jednocześnie, ponieważ ten sam komponent jest ponownie używany wszędzie. Jedno pominięte powiązanie w bazie dotyka więc całego procesu zamówienia lub całego ekranu logowania.
Jak to przetestować i gdzie automatyczne skanowanie napotyka swoje granice
Skanowanie automatyczne dobrze rozpoznaje część tych błędów: widzi, czy etykieta jest technicznie powiązana z polem i czy pole wejścia w ogóle ma nazwę. Co skanowanie ocenia trudniej, to czy etykieta merytoryczne jest poprawna, czy placeholder jako jedyne wyjaśnienie jest wystarczająco jasny i czy kolejność odczytu dla czytnika ekranu brzmi logicznie. To dokładnie dlatego w każdym raporcie wskazujemy, co automatyczne testowanie obejmuje, a czego nie; dzięki temu wiesz, co musi być jeszcze sprawdzane ręcznie.
Jeśli chcesz sam zrobić pierwsze wrażenie, najprostszym testem jest przejście formularza tylko za pomocą klawiatury i sprawdzenie, czy każde pole otrzymuje jasną nazwę, gdy na niego przejdziesz. Aby uzyskać bardziej kompletny obraz, w tym proces zamówienia i przepływ logowania, pomaga pełne skanowanie, które patrzy dalej niż strona główna aby zobaczyć, gdzie brakuje etykiet lub są oderwane od pól.
Co widget nakładki tutaj nie rozwiąże
Widget dostępności, który nakłada się na witrynę, nie może naprawić brakującego powiązania między etykietą a polem; to powiązanie znajduje się w samym kodzie źródłowym i tam musi być naprawione. To jeden z powodów, dla których nie sprzedajemy nakładek: ukrywają tego rodzaju błędy dla oka, ale czytnik ekranu nie zauważa żadnej różnicy.
Rozwiązanie samo w sobie zwykle ma ograniczony zakres: developer łączy etykietę z polem, zastępuje placeholder-jako-etykietę rzeczywistą etykietą lub dodaje niewidoczny tekst do przycisku z ikoną. To nie jest duża przebudowa, ale praca, która musi być wykonana celowo, dla każdego formularza i każdego szablonu. W bazie wiedzy z wyjaśnieniami dla każdego tematu dowiesz się, jak te i podobne błędy odnoszą się do wymagań EN 301 549.
Po naprawie: dokumentowanie i monitorowanie
Etykieta, którą teraz naprawiasz, może zniknąć przy następnej modyfikacji szablonu, na przykład gdy projektant zmieni styl formularza bez ponownego sprawdzenia powiązania. Dlatego poprawka powinna być nie tylko rozwiązana technicznie, ale także uwzględniona w planie poprawy, aby było jasne, kto jest odpowiedzialny i kiedy zostanie ponownie sprawdzony. Jak organizujemy tę kontrolę i powtórzenie, wyjaśniono na stronie wyjaśniającej, jak dokonuje się oceny.
Jeśli zastanawiasz się, czy Twoje własne formularze zawierają ten błąd, można to często zauważyć za pomocą nawigacji klawiaturą w kilka minut. Jeśli chcesz podejście ustrukturyzowane z priorytetową listą, zacznij od bezpłatnego szybkiego skanowania lub najpierw zobacz najczęściej zadawane pytania na temat tego, co skan sprawdza, a czego nie.