labelelementillä

Labelelementti, HTML:n label-elementti, on lomakekenttien kuvauksia ja käytettävyyttä parantava elementti. Sen tehtävänä on tarjota kuvaus niille hallintalaitteille, kuten tekstikentille, valikoille ja valintaruuduille, sekä helpottaa niiden käyttämistä sekä näytöllä että apuvälineillä.

Sovittaminen kohdistuu kahdella tavalla: <label for="id">-attribuutin avulla ja kirjoittamalla hallintalaitteen labelin sisään. Kun labelin for-attribuutti viittaa lomakehallintalaitteen id-arvoon, käyttäjän klikkaus label-tekstin alueelle siirtää fokuksen kyseiseen hallintalaitteeseen. Toisaalta, label voi sisältää hallintalaitteen sen sisälle upotettuna, jolloin yhteys muodostuu automaattisesti ilman for-attribuuttia.

Labelin käyttö parantaa saavutettavuutta erityisesti näkörajoitteisille ja näppäimistöä käyttäville: apuvälineet lukevat labelin tekstin ja yhdistävät sen vastaavaan hallintalaitteeseen, jolloin kieli- ja visuaalinen konteksti säilyvät. Lisäksi label-tiivistää tekstin ja ohjauksen nimeämisen hallintalaitteille.

Parhaat käytännöt: tarjoa selkeä, lyhyt ja kuvaava label-kääre sille, mitä käyttäjä tekee (esim. "Sähköpostiosoite"). Varmista, että kaikkien hallintalaitteiden on oma label, tai että upotettu label kattaa ne. Muista käyttää uniikkeja id-arvoja ja välttää useiden hallintalaitteiden saman labelin tarkoitusta.

Esimerkkejä:

<label for="email">Sähköpostiosoite</label>

<input id="email" type="email" name="email">

<label><input type="checkbox" name="agree" /> Hyväksyn ehdot</label>