Dostępność formularzy HTML: etykiety, for i aria-labelledby
Formularz HTML bez poprawnie powiązanej etykiety to bariera nie do przejścia dla osób korzystających z czytników ekranu. Sam tekst obok pola nic nie daje, jeśli nie jest programowo przypisany do konkretnego elementu. Najprostszym i najskuteczniejszym rozwiązaniem jest użycie znacznika label z atrybutem for, który wskazuje identyfikator pola. Dzięki temu kliknięcie w etykietę przenosi fokus do pola, a czytnik odczytuje jej treść jako nazwę kontrolki. Warto pamiętać, że w przypadku pól typu checkbox czy radio takie powiązanie zwiększa też obszar klikalny, co jest wygodne na urządzeniach dotykowych. Jeśli chcesz zgłębić szczegóły techniczne, sprawdź, jak działa label powiązany z polem i jakie ma to konsekwencje dla nawigacji klawiaturą.
Atrybut for wymaga, aby pole miało unikalny identyfikator id. To klasyczne podejście sprawdza się w większości przypadków, ale nie zawsze jest możliwe. Gdy etykieta jest już użyta w innym miejscu albo gdy chcemy opisać pole dodatkowym kontekstem, sięgamy po aria-labelledby. Ten atrybut przyjmuje identyfikatory jednego lub kilku elementów, których treść ma zostać odczytana jako nazwa dostępna. W przeciwieństwie do for, aria-labelledby nie tworzy fizycznego powiązania – nie powoduje przeniesienia fokusu po kliknięciu. To czysto semantyczna wskazówka dla technologii asystujących.
Różnica między for a aria-labelledby sprowadza się więc do zakresu działania. for łączy etykietę z polem na poziomie dokumentu i wpływa na interakcję, podczas gdy aria-labelledby buduje opis dla czytników ekranu, ale nie modyfikuje zachowania przeglądarki. W praktyce często stosuje się oba mechanizmy równocześnie: for dla wygody użytkowników myszy i klawiatury, a aria-labelledby dla precyzyjnego nazewnictwa, zwłaszcza gdy etykieta jest ukryta wizualnie. Należy przy tym uważać, aby nie tworzyć sprzecznych informacji – jeśli for wskazuje na jeden element, a aria-labelledby na inny, czytnik może odczytać nazwę niezgodną z widocznym opisem.
Podsumowując, poprawna dostępność formularzy opiera się na świadomym wyborze narzędzia. W prostych przypadkach wystarczy label z for i unikalne id. W bardziej złożonych układach, gdzie etykieta pełni rolę opisu lub gdy pole ma wiele źródeł nazwy, sięgamy po aria-labelledby. Warto testować formularze z czytnikiem ekranu i nawigacją klawiaturą, aby upewnić się, że każda kontrolka ma zrozumiałą etykietę i logiczną kolejność. Dobre praktyki w tym zakresie przekładają się na realną dostępność, a nie tylko na spełnienie formalnych wytycznych.