Tutorial
Kako ispravno označiti polja obrasca
Ukratko
Svako polje treba vidljivu <label> povezanu s id-om polja preko for atributa. Placeholder nije zamjena: nestaje pri unosu i ne najavljuje se pouzdano kao naziv. Obaveznost i napomene također idu u tekst te se povezuju atributima required i aria-describedby.
Ukratko po koracima
Poveži labelu s poljem
Daj svakom polju id i poveži <label> s njim preko for atributa.
Ne koristi placeholder kao labelu
Placeholder smije prikazati samo primjer, nikad biti jedina oznaka.
Označi obavezna polja
Navedi obaveznost u vidljivoj labeli i dodatno postavi atribut required.
Poveži napomene
Poveži tekst o formatu ili pomoći s poljem pomoću aria-describedby.
Nedostajuće ili nepovezane labele jedan su od najčešćih nalaza u automatskim skeniranjima jer krše više kriterija odjednom. Čitač zaslona polje bez labele čita samo kao "tekstualno polje": korisnik ne zna što treba unijeti.
Problem: placeholder umjesto labele
<!-- Placeholder statt Label: verschwindet beim Tippen, oft zu kontrastarm,
kein zuverlaessiger Name fuer Screenreader -->
<input type="email" placeholder="E-Mail-Adresse" />
<!-- Sichtbarer Text, aber nicht mit dem Feld verbunden -->
<span>Telefon</span>
<input type="tel" />- Placeholder nestaje čim počneš tipkati: oznaka je nestala.
- Tekst placeholdera često ima preslab kontrast (vidi 1.4.3 Kontrast).
- Vidljivi tekst pokraj polja bez for/id veze ne najavljuje se kao naziv (1.3.1 / 4.1.2).
- Klik na tekst ne fokusira polje.
Rješenje: prava labela uz povezivanje
For atribut labele pokazuje na id polja. Time je odnos programski određen (1.3.1), polje dobiva naziv (4.1.2), a klik na labelu fokusira polje. Vidljivi tekst labele treba biti dio pristupačnog naziva (2.5.3 Label in Name), što ova tehnika daje automatski.
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" name="email" autocomplete="email" />
<!-- Pflichtfeld sichtbar UND programmatisch kennzeichnen -->
<label for="phone">Telefon (Pflichtfeld)</label>
<input id="phone" type="tel" name="phone" autocomplete="tel" required />
<!-- Zusatzhinweis mit aria-describedby anbinden -->
<label for="pw">Passwort</label>
<input id="pw" type="password" aria-describedby="pw-hint" />
<p id="pw-hint">Mindestens 12 Zeichen.</p>Obavezna polja i napomene
- Obaveznost: navedi je u vidljivoj labeli (ne samo bojom zvjezdice) i postavi required kako bi i softver znao (3.3.2).
- Napomene o formatu: poveži ih s aria-describedby da ih čitač zaslona pročita zajedno s poljem.
- Autocomplete: postavi ispravne autocomplete vrijednosti (email, tel, name): pomaže svima i ispunjava 1.3.5 Identify Input Purpose.
Samo vizualno označeno obavezno polje (crvena zvjezdica) nije dovoljno: informacija mora biti i u tekstu i u kodu. Isto vrijedi za pogreške, vidi naš zaseban pristup identifikaciji pogrešaka (3.3.1).
Povezani WCAG kriteriji
Česta pitanja
- Je li aria-label dovoljan umjesto vidljive labele?
- Samo kad vidljiva labela stvarno nije moguća (npr. polje za pretragu s ikonom povećala). Vidljive labele pomažu svima, ne samo korisnicima čitača zaslona. Kad vidljiva labela postoji, njezin tekst mora biti dio pristupačnog naziva (2.5.3).
- Jesu li placeholderi zabranjeni?
- Ne. Placeholder može poslužiti kao dodatni primjer (npr. "ime@tvrtka.hr"), ali nikad kao jedina oznaka. Labela i placeholder se nadopunjuju.
- Kako pristupačno označiti obavezno polje?
- Napiši obaveznost u tekst labele (npr. "(obavezno)") i postavi atribut required. Ne oslanjaj se samo na boju ili neobjašnjenu zvjezdicu.
Zatražite besplatno skeniranje
Recite nam svoju domenu — provodimo besplatno početno skeniranje i pokazujemo najvažnije prepreke.