Elemento <label> suteikia formos valdikliui pasiekiamą pavadinimą ir didesnę spustelėjimų zoną. Yra du jų susieti būdai, ir tai padaryti yra būtina pasiekiamumui.
Metodas 1: for + id (aiškus)
html
Email address
Elemento <label> suteikia formos valdikliui pasiekiamą pavadinimą ir didesnę spustelėjimų zoną. Yra du jų susieti būdai, ir tai padaryti yra būtina pasiekiamumui.
for + id (aiškus)Email address
Žymos for atitinka įvesties id. Tai veikia net jei jie nėra vienas šalia kito žymėjime.
<label>
Email address
<input type="email" />
</label>
Įvestis yra įdėta žymos viduje — id nereikalingas.
<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 -->
placeholder išnyksta, kai vartotojas rašo, ir ne patikimai yra paskelbiamas — niekada jo nenaudokite kaip vienintelę žymą.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Naudokite aria-label (arba aria-labelledby) tik tada, kai matoma žyma tikrai nėra įmanoma.
Tinkamai susietos žymos yra viena iš labiausiai perkalinamų formas pasiekiamumo praktikų — jos suteikia kiekvienam valdikliui pavadinimą pagalbinei technologijai ir padidina spustelėjimų zonas visiems.
Palankiai traktuokite tikrą <label> elementą; grįžkite prie aria-label tik kai būtina, ir niekada nesitikėkite placeholder kaip žymos.