Element <label> daje kontroli obrazca dostopno ime in večje območje za klik. Obstajata dva načina za njihovo povezavo, in to je bistvenega pomena za dostopnost.
Metoda 1: for + id (eksplicitna)
html
Email address
Element <label> daje kontroli obrazca dostopno ime in večje območje za klik. Obstajata dva načina za njihovo povezavo, in to je bistvenega pomena za dostopnost.
for + id (eksplicitna)Email address
Aribut for oznake se ujema z atributom id vhoda. To deluje tudi, če niso sosednji v označbi.
<label>
Email address
<input type="email" />
</label>
Vhod je ugnezden znotraj oznake — id ni potreben.
<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 -->
Element placeholder izgine, ko uporabnik tipka, in ni zanesljivo najavljen — nikoli ga ne uporabljajte kot edino oznako.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Uporabite aria-label (ali aria-labelledby) le, kadar vidna oznaka res ni mogoča.
Spremenljive povezane oznake so ena izmed najbolj vplivnih praks dostopnosti za obrazce — omogočajo vsaki kontroli ime za tehnologijo za invalide in povečajo območja za klik za vse.
Prednostno izberite pravo <label>; se vrnite na aria-label le v primeru potrebe in nikoli se ne zanašajte na placeholder kot na oznako.