Etykiety lub instrukcje

Czego wymaga

Gdy użytkownik jest proszony o podanie danych — pole tekstowe, pole wyboru, przycisk opcji, lista rozwijana, selektor daty, selektor pliku — musi istnieć etykieta lub instrukcja informująca, czego się oczekuje. Etykieta może być widocznym tekstem, elementem <label>, atrybutem aria-label lub aria-labelledby; instrukcje mogą zawierać wymagany format, dozwolone wartości lub przykłady.

Wymagane pola, oczekiwane formaty („DD/MM/RRRR”) i specjalne ograniczenia („minimum 8 znaków, wielkie i małe litery”) — wszystkie podlegają temu kryterium.

Jak spełnić kryterium

• Połącz każde <input>, <textarea> i <select> z <label for="…">, gdzie atrybut for pasuje do id pola.
• Nigdy nie używaj tekstu zastępczego (placeholder) jako jedynej etykiety — placeholder znika po ustawieniu fokusu i ma słaby kontrast.
• Oznaczaj wymagane pola w sposób widoczny (gwiazdka, słowo „wymagane” lub aria-required="true") i wyjaśnij konwencję w górnej części formularza.
• Podawaj oczekiwany format z góry, a nie dopiero po popełnieniu błędu: „Data (DD/MM/RRRR)” lub „Numer telefonu, np. 555-123-4567”.
• Dla grup pól wyboru lub przycisków opcji używaj <fieldset> i <legend> do oznaczenia grupy.
• Dla pól wyłącznie z ikoną lub pól na pasku filtrów używaj aria-label, aby nadać im znaczącą nazwę.

Typowe błędy

• Formularze, w których tekst zastępczy jest jedyną etykietą — znika w chwili, gdy użytkownik zaczyna pisać.
• Wymagane pola oznaczone tylko czerwonymi gwiazdkami bez powiązania programowego.
• Pola daty urodzenia oczekujące określonego formatu, o którym użytkownik dowiaduje się dopiero po nieudanej walidacji.
• Pola wyszukiwania oznaczone ikonką lupy bez dostępnej nazwy.
• Formularze logowania, w których pola nazwy użytkownika i hasła są wizualnie umieszczone obok etykiet, ale bez powiązania programowego.

Dlaczego to jest ważne

Formularze to miejsce, w którym większość użytkowników dokonuje transakcji z serwisem — rejestracja, zakup, kontakt, wsparcie, rezerwacja. Pola bez etykiet lub z niewystarczającymi etykietami całkowicie wykluczają użytkowników czytników ekranu, bo nie wiedzą oni, jakiego rodzaju danych chce każde pole. Zawodzą też użytkowników z dysleksją, którzy tracą kontekst w chwili zniknięcia placeholdera, oraz użytkowników z niepełnosprawnościami poznawczymi, którym wskazówki dotyczące formatu przydają się z góry.

Etykiety mają też kluczowe znaczenie dla menedżerów haseł, autouzupełniania i oprogramowania sterowania głosem — wszystkie te narzędzia dopasowują pola na podstawie tekstu etykiet. Dobrze oznakowany formularz jest korzystny dla wszystkich.