<label> antaa lomakesäätimelle saavutettavan nimen ja suuremman klikkausalueen. On kaksi tapaa yhdistää ne ja sen tekeminen on olennaista saavutettavuudelle.
Tapa 1: for + id (eksplisiittinen)
html
Email address
<label> antaa lomakesäätimelle saavutettavan nimen ja suuremman klikkausalueen. On kaksi tapaa yhdistää ne ja sen tekeminen on olennaista saavutettavuudelle.
for + id (eksplisiittinen)Email address
Nimiön for vastaa syötteen id:tä. Tämä toimii vaikka ne eivät olisivat vierekkäin merkinnässä.
<label>
Email address
<input type="email" />
</label>
Syöte on sisäkkäin nimiön sisällä — id ei ole tarpeellinen.
<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 katoaa, kun käyttäjä kirjoittaa, eikä sitä ilmoiteta luotettavasti — älä koskaan käytä sitä ainoana nimiönä.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Käytä aria-label (tai aria-labelledby) vain silloin, kun näkyvä nimiö ei ole todella mahdollinen.
Oikein yhdistetyt nimiöt ovat yksi vaikuttavimmista saavutettavuuskäytännöistä lomakkeille — ne antavat jokaiselle säätimelle nimen apuvälineille ja suurentavat klikkausalueita kaikille.
Suosi todellista <label>:ia; siirry aria-label:iin vain tarvittaessa ja älä koskaan luota placeholder:iin nimiönä.