Ga naar hoofdinhoud

Text Input

Community

Biedt de mogelijkheid om één regel aan tekens in te vullen.

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:

20 van de 20 items zijn nu zichtbaar.

  • Het label van de Text Input is gekoppeld aan de Text Input en het is duidelijk of de Text Input verplicht ingevuld moet worden.

    Als de Text Input een tekstueel label heeft, gebruik dan een label-element en koppel het met de attributen for en id aan de Text Input.

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

    Op die manier is het label expliciet gekoppeld met de Text Input, ook als het invoerveld niet binnen een label-element genest is.

    Koppel instructies en foutmeldingen ook aan de Text Input met het aria-describedby attribuut:

    <label for="name">Naam</label>
<p id="description-name">Vul je voornaam en achternaam in.</p>
<p id="error">Invoerfout: Het veld Naam is niet ingevuld. Vul je voornaam en achternaam in.</p>
<input id="name" aria-describedby="description-name error" autocomplete="name" />

    Geef zowel in tekst als in code aan of een veld verplicht ingevuld moet worden. In code doe je dit doe je met het required attribuut of met het aria-required attribuut.

    NL Design System richtlijnen:

    developerWCAG 1.3.1Niveau A
  • Instructies bij de Text Input staan op een logische plek

    Zorg ervoor dat instructies en foutmeldingen die nodig zijn om te begrijpen wat er van de bezoeker verwacht wordt op een logische plek staan en gekoppeld zijn aan het formulierveld.

    De meest gebruiksvriendelijke plek voor instructies en foutmeldingen is tussen het label en het invoerveld. Als instructies ónder het veld staan, worden ze mogelijk bedekt door de autocomplete-functionaliteit van de browser.

    Een screenreader schakelt in een formulierveld over van leesmodus naar focusmodus. Als een bezoeker daarna instructies tússen de velden wil lezen, moet diegene weer handmatig terugschakelen naar de leesmodus. Koppel instructies en foutmeldingen daarom ook aan het formulierveld met aria-describedby. Op die manier wordt de beschrijving voorgelezen wanneer de toetsenbordfocus op het formulierveld staat.

    Voorbeeld:

    <label for="name">Naam</label>
<p id="description-name">Vul je voornaam en achternaam in.</p>
<p id="error">Invoerfout: Het veld Naam is niet ingevuld. Vul je voornaam en achternaam in.</p>
<input id="name" aria-describedby="description-name error" autocomplete="name" />

    NL Design System richtlijnen:

    developerdesignercontentmakerWCAG 1.3.2Niveau A
  • Een Text Input die om persoonlijke gegevens vraagt heeft het juiste autocomplete-attribuut.

    Help bezoekers met het invullen van persoonlijke gegevens door gebruik te maken van het autocomplete-attribuut.

    Voorbeeld:

    <label for="name">Naam</label>
<p id="description-name">Vul je voornaam en achternaam in.</p>
<input id="name" aria-describedby="description-name" autocomplete="name" type="text" />

    In de HTML specificatie vind je een lijst van mogelijke autocomplete-waarden

    Gebruik altijd een autocomplete-attribuut wanneer je persoonlijke informatie van bezoekers uitvraagt waar een geschikte autocomplete-waarde voor bestaat, ook als de waarde van het type-attribuut (zoals email ) al voldoende duidelijk lijkt. Dit helpt browsers de juiste gegevens aan de bezoeker voor te stellen.

    NL Design System richtlijnen:

    developerWCAG 1.3.5Niveau AA
  • Kleur is niet de enige manier om informatie over een Text Input weer te geven.

    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
  • Placeholderteksten hebben een contrastratio van minimaal 4,5:1 met de achtergrond.

    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 de Text Input 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.

    developerWCAG 1.4.10Niveau AA
  • Niet-tekstuele informatie heeft een contrastratio van minimaal 3:1 met de achtergrond.

    Zorg voor voldoende kleurcontrast tussen de kleuren van componenten die visueel betekenis hebben en hun directe omgeving. Zorg ervoor dat dit minimaal 3:1, maar het liefst hoger.

    Kleuren die van toepassing zijn bij de Text Input zijn bijvoorbeeld:

    • De rand van de Text Input, zodat de bezoeker weet waar het veld is. Vergeet hierbij ook niet de kleur van de rand wanneer de Text Input invalid is.
    • De focusrand om de Text Input.

    NL Design System richtlijnen:

    designerWCAG 1.4.11Niveau AA
  • De Text Input veroorzaakt geen toetsenbordval.

    Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.

    developerWCAG 2.1.2Niveau A
  • De Text Input staat op een logische plek in de focusvolgorde.

    Plaats de toetsenbordfocus niet standaard op het eerste veld in een formulier. Hierdoor slaan bezoekers die gebruik maken van een screenreader mogelijk belangrijke informatie over.

    NL Design System richtlijnen:

    developerWCAG 2.4.3Niveau A
  • De Text Input heeft een beschrijvend label en toegankelijke naam.

    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 de Text Input de toetsenbordfocus krijgt, is het niet volledig bedekt door andere inhoud.

    Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

    developerWCAG 2.4.11Niveau AA
  • De zichtbare naam van de Text Input is gelijk aan de toegankelijke naam.

    Zorg ervoor dat de tekstuele naam van het invoerveld voorkomt in de toegankelijke naam.

    De meestgebruikte manier is door een label-element te koppelen aan het invoerveld, met de attributen for en id.

    Pas op met het gebruik van aria-label om een naam te geven aan een invoerveld. Een aria-label overschrijft de toegankelijke naam van een element. Daardoor kan de toegankelijke naam anders zijn dan de zichtbare naam. Bezoekers die gebruik maken van spraakgestuurde navigatie kunnen hierdoor moeite hebben om het invoerveld te activeren.

    NL Design System richtlijnen:

    developerWCAG 2.5.3Niveau A
  • De Text Input heeft een minimale grootte van 24 bij 24 pixels.

    Aanwijsbare elementen op een pagina zijn groot genoeg om makkelijk aan te wijzen met bijvoorbeeld een muis of vinger. Het aan te wijzen gebied is ten minste 24 bij 24 pixels groot.

    developerdesignerWCAG 2.5.8Niveau AA
  • Als de placeholdertekst en invoertekst in een andere taal is dan de taal van de pagina, dan heeft het `input`-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
  • Als de Text Input focus krijgt, gebeurt er niets onverwachts.

    Verras een gebruiker niet als die een interactief element focus geeft. Maak functionaliteit voorspelbaar en daardoor goed te begrijpen.

    Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

    Bij een contextwijziging verandert onverwacht de indeling, informatie, toetsenbordfocus of functionaliteit. Bijvoorbeeld door het direct versturen van een formulier na het kiezen van een select-optie, waarna de gebruiker naar een andere pagina wordt doorgestuurd.

    developerWCAG 3.2.1Niveau A
  • Bij het invullen van de Text Input gebeurt er niets onverwachts.

    Verras een gebruiker niet, maar maak functionaliteit voorspelbaar en daardoor goed te begrijpen.

    Als een gebruiker een formuliercomponent of -optie selecteert of een invoerveld invult met het toetsenbord of met de muis, veroorzaakt dit niet automatisch een contextwijziging.

    Bij een contextwijziging verandert onverwacht de indeling, informatie of functionaliteit. Bijvoorbeeld door het direct versturen van een formulier na het kiezen van een select-optie, waarna de gebruiker naar een andere pagina wordt doorgestuurd.

    Let op: een verandering van context is niet hetzelfde als verandering van content. Direct aanpassen van de zoekresultaten, waarbij de gebruiker op dezelfde pagina blijft, valt niet onder dit succescriterium.

    developerdesignerWCAG 3.2.2Niveau A
  • Text Inputs met gelijke functies hebben hetzelfde uiterlijk en 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 een component 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:

    developerdesignerWCAG 3.2.4Niveau AA
  • De naam en instructies over het invullen van de Text Input staan niet alleen in de placeholder

    Zorg ervoor dat het doel (of de naam) en instructies bij een invoerveld beschikbaar zijn en blijven.

    Maak daarom nooit alléén gebruik van een placeholdertekst voor de naam of instructies van een invoerveld. Plaats de instructies ook niet in een tooltip, maar boven of onder het veld en koppel het aan het invoerveld met aria-describedby.

    Als een icon een alternatief is voor een tekstueel label bij een invoerveld, moet het duidelijk zijn wat de gebruiker moet doen of moet invullen.

    Bijvoorbeeld:

    • Een icon van een slot in een inlogformulier vraagt om een wachtwoord.
    • Een icon van een vergrootglas in een zoekfunctie vraagt om een zoekterm.
    • Een icon van een telefoonhoorn in een contactformulier vraagt om een telefoonnummer.

    NL Design System richtlijnen:

    developerdesignerWCAG 3.3.2Niveau A
  • Gebruikers hoeven dezelfde gegevens niet opnieuw in te voeren als deze al eerder in hetzelfde proces zijn ingevuld of beschikbaar zijn in het systeem.

    Vraag de bezoeker niet om meerdere keren dezelfde gegevens in te vullen. Maak in plaats daarvan gebruik van de eerder ingevulde informatie. Als je er zeker van wil zijn dat de informatie correct is, toon dan de eerder ingevulde informatie en laat de bezoeker controleren of de gegevens kloppen.

    NL Design System richtlijnen:

    designercontentmakerWCAG 3.3.7Niveau A
  • De Text Input heeft een toegankelijke naam en rol, en de eigenschappen en waarde zijn beschikbaar voor hulpsoftware.

    Zorg ervoor dat de Text Input een toegankelijke naam en een kloppende rol heeft.

    Zorg dat de Text Input een kloppende rol heeft, door het HTML-element input te gebruiken met het relevante type attribuut. Dit zijn de opties:

    • De types text, email, tel en url geven de rol textbox.
    • Het type search geeft de rol searchbox.

    Daarnaast moeten de staat en eigenschappen waar bezoekers zelf invloed op hebben (zoals in- of uitgeklapt, of checked) en de ingevulde waarde (value) beschikbaar zijn voor hulpsoftware.

    NL Design System richtlijnen:

    designercontentmakerWCAG 4.1.2Niveau A

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:

6 van de 6 items zijn nu zichtbaar.

  • Het is mogelijk om autocomplete in te stellen bij de Text Input.

    Help bezoekers met het invullen van persoonlijke gegevens door gebruik te maken van het autocomplete-attribuut.

    Voorbeeld:

    <label for="name">Naam</label>
<p id="description-name">Vul je voornaam en achternaam in.</p>
<input id="name" aria-describedby="description-name" autocomplete="name" type="text" />

    In de HTML specificatie vind je een lijst van mogelijke autocomplete-waarden

    Gebruik altijd een autocomplete-attribuut wanneer je persoonlijke informatie van bezoekers uitvraagt waar een geschikte autocomplete-waarde voor bestaat, ook als de waarde van het type-attribuut (zoals email ) al voldoende duidelijk lijkt. Dit helpt browsers de juiste gegevens aan de bezoeker voor te stellen.

    NL Design System richtlijnen:

    developerWCAG 1.3.5Niveau AA
  • Placeholderteksten blijven 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
  • Als je de tekst van placeholders 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 het 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
  • Je kunt de Text Input bereiken en bedienen met het toetsenbord.

    Je kunt het element focussen met de tabtoets en activeren met de spacebar en de entertoets.

    NL Design System richtlijnen:

    developerWCAG 2.1.1Niveau A
  • Als de Text Input de toetsenbordfocus krijgt is de focus zichtbaar.

    Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

    Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid.

    NL Design System richtlijnen:

    developerWCAG 2.4.7Niveau AA
  • Het is mogelijk de Text Input een toegankelijke naam en de juiste rol te geven en het `value`-attribuut is aanwezig en instelbaar.

    De component en de afzonderlijke interactieve elementen in de component hebben de juiste rol en de juiste attributen voor het aangeven van de staat en de waarde.

    developerWCAG 4.1.2Niveau A

Definition of Done

Help component verbeteren

We vinden het belangrijk dat de component Text Input goed te gebruiken is door iedereen. Help je mee?

Community implementaties

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-textbox in CSS
utrecht-textbox in HTML
utrecht-textbox in Web Component
utrecht-textbox in React
utrecht-textbox in Vue
utrecht-textbox in Angular

Amsterdam

10 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-text-input in CSS
ams-text-input in React

Den Haag

10 van 11 stappen gedocumenteerd op het Community Den Haag projectbord

Snel aan de slag

denhaag-text-input in CSS