A <label> daje kontroli obrasca pristupačno ime i veću površinu za klik. Postoje dva načina da ih povežete, a učiniti to je neophodno za pristupačnost.
Method 1: for + id (explicit)
html
Email address
A <label> daje kontroli obrasca pristupačno ime i veću površinu za klik. Postoje dva načina da ih povežete, a učiniti to je neophodno za pristupačnost.
for + id (explicit)Email address
Atribut for oznake odgovara id unosa. To funkcionira čak i ako nisu susjedni u markiranju.
<label>
Email address
<input type="email" />
</label>
Unos je ugniježđen unutar oznake — id nije potreban.
<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 -->
Oznaka placeholder nestaje kada korisnik piše i nije pouzdano najavljena — nikada je ne koristite kao jedinu oznaku.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Koristite aria-label (ili aria-labelledby) samo kada vidljiva oznaka zaista nije moguća.
Pravilno povezane oznake su jedan od najutjecajnijih pristupačnih načela za obrasce — daju svakoj kontroli ime za pomoćnu tehnologiju i povećavaju površinu klikanja za sve.
Dajte prednost pravoj <label>; vratite se na aria-label samo ako je potrebno, i nikada se ne oslanjajte na placeholder kao oznaku.