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)
html
Email address
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.
for + id (jawna)Email address
Atrybut for etykiety odpowiada atrybutowi id wejścia. Działa to nawet wtedy, gdy nie są obok siebie w znaczniku.
<label>
Email address
<input type="email" />
</label>
Wejście jest zagnieżdżone w etykiecie — nie jest potrzebny id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<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.
<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.
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.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj