Zoekformulier

Zoeken

Filteren

Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is verborgen bij het bekijken van het formulier
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Labels bij een formulierelement op een website

Over labels bij een formulierelement

Labels zijn een belangrijk element voor toegankelijke formulierelementen. Ze vertellen wat er in elk invoerveld moet worden ingevuld. Alle formulierelementen moeten een label hebben dat voor iedereen begrijpelijk is.

Schermlezers, zoals voorleessoftware of een brailleleesregel, gebruiken het label om te vertellen wat er in een invoerveld ingevuld moet worden. Dit is belangrijk voor mensen met een visuele beperking.

Als het label ook is gekoppeld, dan vergroot dit het klikbare gebied waarmee een formulierelement kan worden geselecteerd. Dit is handig voor bijvoorbeeld mensen met een motorische beperking.

Goede labels:

  • zijn beknopt;
  • zijn duidelijk zichtbaar;
  • vertellen precies wat er ingevuld moet worden;
  • zijn in de code gekoppeld aan een formulierelement.

Geef formulierelementen een label dat beschrijft wat er ingevuld moet worden

Zorg dat het label bij een invoerveld of ander formulierelement, zoals selectievakje, keuzerondje of keuzelijst, duidelijk beschrijft wat er ingevuld moet worden.

Labels moeten zichtbaar zijn. Zet het label dichtbij bij het bijbehorende formulierelement.

Let op: Een placeholder is niet hetzelfde als een label. Een invoerveld met een placeholder moet ook een label hebben.

Fout voorbeeld: Label beschrijft niet wat er ingevuld moet worden

Deze labels beschrijven niet duidelijk wat er ingevuld moet worden:

  • <label>Gegevens:</label> (onduidelijk)
  • <label>Meld je aan:</label> (onduidelijk)

Goed voorbeeld: Label beschrijft wat er ingevuld moet worden

Deze labels beschrijven duidelijk wat er ingevuld moet worden:

  • <label>Voornaam:</label>
  • <label>Achternaam:</label>
  • <label>Telefoonnummer:</label>
  • <label>E-mailadres:</label>

Label koppelen aan een <input>-, <select>-, of <textarea>-element

Labels worden in de code gekoppeld aan het bijbehorende formulierelement met de for/id-methode. Benoem in het for-attribuut de waarde van het id-attribuut van het bijbehorende formulierelement.

In de code ziet dat er zo uit:

De for/id-methode is niet de enige manier om een label te koppelen aan een <​​input​>-element. Een andere mogelijkheid is het plaatsen van het <​input>-, <​select>-, of <​textarea>-element in het <​label>-element.

In de code ziet dat er zo uit:

Geef gegroepeerde formulierelementen een groepslabel dat beschrijft wat er ingevuld moet worden

Geef gerelateerde formulierelementen of formulierelementen die bij elkaar horen een groepslabel. Zorg dat dit groepslabel bij gegroepeerde formulierelementen duidelijk beschrijft wat er ingevuld moet worden.

Het groepslabel moet zichtbaar zijn. Zet het label dichtbij bij de bijbehorende formulierelementen.

Groepslabel toevoegen aan een <fieldset>-element

Een groepslabel voor een formulierelementen die zijn gegroepeerd met een <​fieldset>-element wordt gegeven met het legend-element.

Het legend-element moet het eerste onderdeel zijn in het <​fieldset>-element.

In de code ziet dat er zo uit:

Zie ook