brak etykiet pól (label)

Brak etykiet pól (label) to usterka formularza pozbawionego opisowych oznaczeń poszczególnych pól wprowadzania danych.

Na czym polega brak etykiet pól formularza

Brak etykiet pól label występuje wtedy, gdy formularz zawiera pola do wpisywania danych, ale nie przekazuje przy nich jednoznacznej informacji o wymaganej treści. Samo pole tekstowe, pole wyboru, lista rozwijana lub przycisk opcji nie powinny pozostawać bez opisowego oznaczenia. Użytkownik musi wiedzieć, czy wpisuje imię, adres poczty elektronicznej, numer telefonu, hasło, nazwę pliku czy inną wartość. Etykieta może być widoczna obok kontrolki albo powiązana z nią w kodzie HTML w sposób odczytywany przez przeglądarkę i technologie asystujące.

W standardowym HTML element <label> wiąże się z kontrolką przez atrybut for, którego wartość odpowiada atrybutowi id pola. Alternatywnie pole może zostać umieszczone wewnątrz elementu <label>. Przykładowo opis „Adres e-mail” powinien być jednoznacznie przypisany do konkretnego pola, a nie pozostawiony jako zwykły tekst znajdujący się przypadkowo nad formularzem. Dobrze powiązana etykieta pozwala także kliknąć jej treść w celu ustawienia fokusu w polu lub zaznaczenia powiązanego pola wyboru.

Skutki dla obsługi formularza i dostępności

Pole bez etykiety jest trudniejsze do użycia dla każdej osoby, która wypełnia formularz bez pełnego kontekstu wizualnego. Problem staje się wyraźniejszy, gdy formularz zawiera kilka pól o podobnym wyglądzie, jest wyświetlany na małym ekranie albo układ strony zmienia się po powiększeniu tekstu. Sam tekst pomocniczy umieszczony w polu jako placeholder nie jest równoważnym zamiennikiem trwałej etykiety. Zwykle znika po rozpoczęciu wpisywania, może mieć zbyt niski kontrast i nie zawsze jest prawidłowo przekazywany jako nazwa kontrolki.

Brak etykiety utrudnia również pracę z czytnikiem ekranu. Osoba poruszająca się po formularzu za pomocą klawiatury lub technologii asystującej może usłyszeć jedynie ogólny typ elementu, na przykład „pole tekstowe”, bez informacji, jakie dane należy w nim podać. W efekcie rośnie ryzyko wpisania wartości w niewłaściwym miejscu, pominięcia obowiązkowego pola albo wielokrotnego odczytywania całego formularza w celu ustalenia jego struktury. Powiązanie etykiety z kontrolką wspiera przekazywanie programowej nazwy pola zgodnie z zasadami dostępności.

Powiązanie label z kontrolką i komunikatami walidacji

Podczas sprawdzania formularza należy zweryfikować nie tylko obecność tekstu obok pola, ale także jego relację w strukturze dokumentu. Każde pole wymagające danych powinno mieć unikalny identyfikator, a odpowiadający mu element <label> powinien wskazywać ten identyfikator przez for. W przypadku grupy pól, takiej jak wybór jednej z kilku opcji, opis grupy może być przekazany przez <fieldset> i <legend>. Elementy te porządkują znaczenie grupy bez zastępowania etykiet poszczególnych opcji.

Osobnej kontroli wymagają pola z błędami walidacji. Komunikat „podaj poprawny adres e-mail” powinien być związany z właściwym polem, na przykład przez mechanizm aria-describedby, natomiast informacja o obowiązkowym charakterze pola powinna być dostępna także dla użytkownika korzystającego z klawiatury lub czytnika ekranu. Atrybut aria-label może nadać nazwę kontrolce, gdy rozwiązanie nie ma widocznej etykiety, ale nie powinien być używany do ukrywania braków w poprawnej strukturze HTML, jeśli widoczny opis jest potrzebny wszystkim użytkownikom. Test obejmuje nawigację klawiszem Tab, sprawdzenie kolejności fokusu, odczyt pól przez czytnik ekranu oraz analizę kodu w narzędziach deweloperskich.

Naprawa formularza w serwisowanym laptopie lub komputerze

Jeżeli brak etykiet wynika z błędu strony internetowej, poprawa zwykle polega na uzupełnieniu struktury HTML, powiązaniu opisów z identyfikatorami kontrolek oraz uporządkowaniu komunikatów walidacyjnych. Gdy problem jest widoczny tylko na jednym laptopie lub komputerze, trzeba dodatkowo sprawdzić przeglądarkę, rozszerzenia, powiększenie strony, ustawienia stylów użytkownika i sposób działania technologii asystujących. Nie każda nieprawidłowość formularza oznacza awarię sprzętu, ale problemy z ekranem, klawiaturą, fokusem lub działaniem przeglądarki mogą utrudniać rozpoznanie rzeczywistej przyczyny.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a w ramach diagnostyki można sprawdzić działanie przeglądarki, klawiatury, ekranu oraz oprogramowania używanego do wypełniania formularzy. W przypadku strony wymagającej zmian w kodzie konieczne jest jednak skorygowanie jej struktury przez osobę odpowiedzialną za witrynę, ponieważ wymiana podzespołu komputera nie usuwa błędnie zdefiniowanych elementów HTML.