R-pd.13.1

Labels associëren met formuliervelden

In formulieren gaan invoervelden regelmatig vergezeld van ‘labels’: tekstuele verklaringen van wat voor soort informatie voor een specifiek invoerveld van de bezoeker wordt verwacht.

Dit gaat ook op voor andere elementen in een formulier, zoals selectiemenu's, checkboxes, grote tekstvelden, enzovoort. Voor het gemak worden deze hier allemaal invoervelden genoemd.

Uitleg van deze richtlijn

Sommige schermleesprogramma’s en brailleleesregels hebben moeite met het associëren van aangrenzende teksten met invoervelden. Deze teksten worden door webontwikkelaars namelijk niet expliciet in verband gebracht met invoervelden in de markup: de bezoeker moet dat zelf visueel doen.

Deze schermleesprogramma’s dragen de teksten weliswaar voor in een lineaire volgorde, gevolgd door de invoervelden, maar de gebruiker zal ernaar moeten raden welk veld voor welke soort invoer staat. Het navigeren tussen deze velden in een niet-lineaire volgorde maakt begrip van het formulier soms zelfs onmogelijk.

Voor deze situatie is het label element bedacht. Dankzij deze markup kan de webontwikkelaar in een formulier een tekst (of afbeelding) expliciet met een invoerveld associëren.

Voorbeelden

Het expliciet associëren van een tekst met een invoerveld kan op twee manieren:

Het invoerveld binnen de label-markup (HTML)

Het invoerveld en de label-markup van elkaar gescheiden (HTML)

Deze laatste manier is erg praktisch wanneer de inhoud van het formulier in een tabel is geplaatst en de label-tekst en het invoerveld in aparte cellen voorkomen.

De webontwikkelaar moet erop letten dat het tekstlabel alleen met het invoerveld geassocieerd kan worden door het gebruik van het for attribuut op de <label> tag. Op het invoerveld gebruikt de webontwikkelaar dan een id attribuut met een unieke waarde (elk id attribuut in de broncode van een pagina moet een unieke waarde hebben).

Voordelen van het gebruik van het label element

Door het expliciet associëren van teksten met formuliervelden kunnen bezoekers met schermleesprogramma’s en brailleleesregels (gemakkelijk) door het formulier navigeren.

Label-teksten zijn klikbaar

Bovendien maakt het gebruik van label markup de linktekst in een aantal moderne browsers de linktekst klikbaar. Zodra een bezoeker op de linktekst klikt, wordt de cursor op het geassocieerde invoerveld geplaatst. Bezoekers hoeven hierdoor minder precies te ‘richten’ met hun muispijl.

Deze functionaliteit werkt net als het eigen besturingssysteem: ook daar kan op label-tekst geklikt worden om de cursor in invoervelden te plaatsen of check-boxes af te vinken.

Gerelateerde richtlijnen

• R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG  1.0) van het W3C.
• R-pd.13.2: Gebruik het tabindex attribuut om van de standaard tab-volgorde op formuliervelden af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van het formulier door toetsenbordgebruikers.
• R-pd.13.3: Breng groepering van invoervelden aan door middel van het fieldset element.
• R-pd.13.4: Vermijd automatische doorverwijzing bij interactie met formulieren.
• R-pd.13.5: Gebruik geen client-side script of formulieren als de enige manier om informatie op de site te bereiken.
• R-pd.13.6: Confronteer een bezoeker niet met een onwerkzaam formulier als optionele technologieën - zoals CSS of client-side script - niet door de browser ondersteund worden.
• R-pd.13.7: Wees terughoudend met het gebruik van CSS voor invoervelden en formulierknoppen.

Bijbehorende ijkpunten normdocument

• IJkpunt 12.4: Associeer labels expliciet met hun besturingsmechanismen.