Etykieta <label> daje kontrolce formularza dostępną nazwę i większy obszar klikawalny. Istnieją dwa sposoby ich powiązania, a zrobienie tego jest niezbędne dla dostępności.
Metoda 1: for + id (jawna)
<label for="email">Email address</label>
<input id="email" type="email" />
Atrybut for etykiety odpowiada atrybutowi id wejścia. Działa to nawet wtedy, gdy nie są obok siebie w znaczniku.
Metoda 2: zawijanie (niejawna)
<label>
Email address
<input type="email" />
</label>
Wejście jest zagnieżdżone w etykiecie — nie jest potrzebny id.
Dlaczego to ważne: Znaczenie powiązania
- Czytniki ekranu ogłaszają etykietę, gdy użytkownik skupi się na wejściu ("Adres e-mail, edytuj tekst"). Bez prawdziwej etykiety słyszą "edytuj tekst" bez wskazówki, do czego to służy.
- Większy obszar klikawalny — kliknięcie tekstu etykiety skupia/przełącza kontrolkę. Jest to szczególnie cenne dla małych pól wyboru i przycisków radiowych.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
Placeholdery NIUE są etykietami
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Atrybut placeholder znika, gdy użytkownik pisze i nie jest niezawodnie ogłaszany — nigdy nie używaj go jako jedynej etykiety.
Gdy nie możesz pokazać widocznej etykiety
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Używaj aria-label (lub aria-labelledby) tylko wtedy, gdy widoczna etykieta jest naprawdę niemożliwa.
Dlaczego to ważne
Prawidłowo powiązane etykiety to jedna z najbardziej wpływowych praktyk dostępności dla formularzy — dają każdej kontrolce nazwę dla technologii wspomagających i powiększają obszary klikawalności dla wszystkich.
Udaj pierwszeństwo rzeczywistej etykiecie <label>; powraca do aria-label tylko w razie potrzeby i nigdy nie polegaj na placeholder jako etykieta.