Ga naar hoofdinhoud

Form Field Label

Community

Toont een tekstlabel dat informeert over de in te vullen informatie.

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Filter acceptatiecriteria voor:

7 van de 7 items zijn nu zichtbaar.

  • Het Form Field label is gekoppeld aan het bijbehorende element voor formulierinvoer.

    Koppel het label-element met de attributen for en id aan het bijbehorende input-element.

    <label for="voorbeeld">Ik ben een Text Input</label> <input type="text" id="voorbeeld" />

    Op die manier is het Form Field Label expliciet gekoppeld met het input-element, ook als het input-element niet binnen een label-element genest is.

    NL Design System richtlijnen:

    developerWCAG 1.3.1Niveau A
  • De kleur van het Form Field Label geeft geen informatie die niet ook op minimaal 1 andere manier wordt gegeven.

    Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

    Bijvoorbeeld: geef een foutmelding niet alleen aan met een rood randje, maar ook in tekst en eventueel met een icoontje dat een foutmelding markeert.

    designerWCAG 1.4.1Niveau A
  • De tekst in het Form Field Label heeft een contrastratio van minimaal 4,5:1 met de achtergrondkleur.

    De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

    • 4,5:1 contrast voor normale tekst.
    • 3:1 contrast voor grotere letters (vanaf 24 pixels).
    • 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

    Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

    NL Design System richtlijnen:

    designerWCAG 1.4.3Niveau AA
  • De bezoeker kan het Form Field Label tot 400% vergroten zonder verlies van functionaliteit of informatie.

    De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

    Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

    Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video's en landkaarten.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

    developerdesignerWCAG 1.4.10Niveau AA
  • Het Form Field Label beschrijft wat de bezoeker moet invullen.

    Het label van een invoerveld maakt kort en bondig duidelijk welke invoer van de bezoeker gevraagd wordt. Een tekstueel label kan een tekst zijn, of een icoon waar de alternatieve tekst het doel van het invoerveld beschrijft.

    Bijvoorbeeld: de alternatieve tekst van een vergrootglas icoon is 'Zoeken' en niet 'Vergrootglas'.

    Let op: Gebruik je een asterisk (*) om aan te geven dat een veld verplicht is? Zorg dan dat je vóór de eerste asterisk uitlegt wat de betekenis is. Plaats bijvoorbeeld bovenaan het formulier de tekst: 'Velden met een * zijn verplicht'.

    NL Design System richtlijnen:

    designercontentmakerWCAG 2.4.6Niveau AA
  • Als het Form Field Label in een andere taal is dan de taal van de pagina, dan heeft het label-element een lang-attribuut met de juiste taalcode.

    Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

    Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

    NL Design System richtlijnen:

    developerWCAG 3.1.2Niveau AA
  • Elementen voor formulierinvoer met dezelfde functie hebben hetzelfde label.

    Zorg ervoor dat invoervelden die op meerdere pagina's voorkomen en die dezelfde functie hebben, er op die pagina's hetzelfde uitzien en dezelfde visuele en toegankelijke naam hebben.

    Bijvoorbeeld:

    • Een algemene zoekfunctie heeft op iedere pagina het label 'Zoeken' en niet op de ene plek 'Zoeken' en op de andere plek 'Waar ben je naar op zoek?' of 'Zoek op website'.
    • Een inschrijfformulier van evenementen waarin persoonlijke gegevens worden gevraagd, hebben allebei het veld 'Voor- en achternaam' en niet op de ene plek 'Voor- en achternaam' en op de andere plek 'Volledige naam' of 'Hoe heet je?'.

    Dit geldt ook voor het gebruik van icons.

    Als componenten op verschillende plekken andere functies hebben hoeven die uiteraard niet hetzelfde visuele label te hebben. Bijvoorbeeld:

    • Een algemene zoekfunctie genaamd 'Zoeken' in de header van iedere pagina.
    • Een specifieke zoekfunctie genaamd 'Zoek in de database'.

    NL Design System richtlijnen:

    designercontentmakerWCAG 3.2.4Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Filter acceptatiecriteria voor:

3 van de 3 items zijn nu zichtbaar.

  • Het Form Field Label kan aan een element voor formulierinvoer gekoppeld worden.

    Het Form Field Label kan met de attributen for en id aan het bijbehorende element voor formulierinvoer worden gekoppeld.

    <label for="voorbeeld">Ik ben een Text Input</label> <input type="text" id="voorbeeld" />

    Op die manier is het Form Field Label expliciet gekoppeld met het element voor formulierinvoer, ook als die niet binnen een label-element genest is.

    NL Design System richtlijnen:

    developerWCAG 1.3.1Niveau A
  • Als je de tekst van het Form Field Label vergroot tot 200% blijft deze in zijn geheel zichtbaar.

    Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

    Zorg ervoor dat de component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    NL Design System richtlijnen:

    developerWCAG 1.4.4Niveau AA
  • Tekst in het Form Field Label blijft leesbaar wanneer de tekstafstand vergroot wordt.

    Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

    Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    Je moet de afstand kunnen vergroten naar deze waardes:

    • Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
    • Afstand tussen alinea's naar ten minste 2 keer de lettergrootte.
    • Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
    • Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

    Dit is te testen met een extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:

    <style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>

    NL Design System richtlijnen:

    developerWCAG 1.4.12Niveau AA

Definition of Done

Community implementaties

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-form-label in CSS
utrecht-form-label in HTML
utrecht-form-label in React
utrecht-form-label in Vue
utrecht-form-label in Angular

Amsterdam

10 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-label in CSS
ams-label in React

Den Haag

10 van 11 stappen gedocumenteerd op het Community Den Haag projectbord

Snel aan de slag

denhaag-form-label in CSS

RVO

9 van 11 stappen gedocumenteerd op het Community RVO projectbord

Snel aan de slag

rvo-label in CSS
rvo-label in React

Help om deze component te verbeteren

We vinden het belangrijk dat de component Form Field Label goed te gebruiken is door iedereen. Help je mee?