labelelementen

labelElementen is de term voor HTML-label-elementen die teksten koppelen aan formulier- of controlelementen. Het doel hiervan is om duidelijk beschrijvende labels te geven zodat gebruikers begrijpen wat invoeren betreft en om de toegankelijkheid voor schermlezers te verbeteren.

Koppeling van labels aan controls gebeurt op twee manieren. Ten eerste via het for-attribuut van het label, waarbij de waarde overeenkomt met het id van het invoerelement (bijvoorbeeld label for="email" en input id="email"). Ten tweede kan een label een invoerelement omvatten, waardoor de associatie implicit wordt; bij deze methode verschijnt de labeltekst dichtbij het invoerelement en wordt klikken op het label ook influisterend actief.

Voordelen van labelElementen zijn onder meer verbeterde toegankelijkheid, grotere klikdoorgang en duidelijkere formuliervondst. Een correcte label-implementatie vereist unieke id’s voor elk invoerelement en een duidelijke, beknopte labeltekst. Het label moet direct bij het bijbehorende invoerelement staan; gebruik for wanneer het label los van het element staat en wrap-label wanneer het element binnen het label moet staan. Vermijd het hebben van meerdere invoerelementen per label, tenzij expliciet noodzakelijk.

Voorbeelden:

- <label for="email">E-mailadres</label>

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

- <label>Wachtwoord<input id="pwd" type="password"></label>

Verwant aan labelElementen zijn veldsets met een legend, die een groep gerelateerde controles beschrijven. Bij complexere interfaces kan aria-labelledby een alternatief zijn. LabelElementen zijn breed ondersteund en essentieel voor toegankelijke formulierontwerpen.