Formulieren

Formulieren kunnen toegankelijk worden gemaakt door een combinatie van techniek, vormgeving en tekst. Door een formulier in de code goed op te bouwen is het te bedienen met het toetsenbord, weet een bezoeker hoe een invoerfout opgelost kan worden, en kunnen bezoekers die hulptechnologieën gebruiken het formulier ook goed invullen.

Een formulier kan bestaan uit verschillende formuliervelden:

  • Invoervelden
  • Selectievakjes
  • Keuzerondjes
  • Keuzelijsten
  • enz.
  • Zorg voor labels bij invoervelden

    Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

    Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

    Koppel labels in de code aan een invoerveld

    Labels worden geplaatst met het <label>-element. Het koppelen van een <label>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <label>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Let op: Placeholdertekst mag niet als enige manier worden gebruikt om een label toe te voegen aan een invoerveld.

    Groepeer meerdere secties van gerelateerde invoervelden

    Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <fieldset>-element gebruikt om deze te groeperen. Geef het <fieldset>-element een label door een <legend>-element in het <fieldset>-element te plaatsen. Hulptechnologieën gebruiken het <legend>-element alsof het een onderdeel is van het label van de elementen in het <fieldset>-element.

    Het <fieldset>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Zorg voor instructies bij invoervelden

    Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

    Geef aan dat een invoerveld verplicht is

    Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <label>-element is geplaatst.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

    				
    					
    				
    			
    Geef het aan als er een verplicht invoerformaat is verplicht is

    Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <label>-element.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Maar dit kan ook via het attribuut aria-describedby.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • Bij formulieren hoort een foutcontrole ingebouwd te zijn. De foutcontrole controleert automatisch of een verplicht onderdeel leeg is gelaten of dat een invoerveld verkeerd is ingevuld. Als er een fout is gevonden dan moet dit in tekst worden aangegeven. Benoem in de tekst de naam van het veld dat verkeerd in ingevuld. Zo weet de bezoeker om welk formulierveld het gaat. Schrijf dus niet:

    • Dit veld is verplicht.

    Maar schrijf:

    • Het veld ‘Telefoonnummer’ mag niet leeg zijn.

    Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

    Geef in de foutmelding ook aan wat er precies fout is en geef, als dat kan, suggesties hoe dit kan worden verbeterd. Wees hierin zo specifiek mogelijk zodat de bezoeker niet alleen weet dát er een fout is, maar ook hoe hij deze kan oplossen. Bij veel invoervelden is al bekend in welk formaat het ingevuld moet worden. Zo bestaat een telefoonnummer in Nederland uit 10 cijfers. Een goede foutmelding bestaat dan uit de mededeling dat het veld ‘telefoonnummer’ niet juist is ingevuld, en dat een telefoonnummer uit 10 cijfers bestaat.

    Enkele voorbeelden:

    • Datum bestaat in de vorm dd-mm-jjjj.
    • IBAN begint met 2 letters, 2 cijfers, 4 letters.
    • Postcode bestaat uit 4 cijfers en 2 letters.
    • Telefoonnummer bestaat uit 10 cijfers.
    • URL begint met http:// of https://.

    Geboortedatum is niet juist ingevuld. Gebruik het formaat dd-mm-jjjj.

    Het veld ‘Telefoonnummer’ is niet juist ingevuld. Een telefoonnummer bestaat uit 10 cijfers.

    Koppel foutmeldingen in de code aan het invoerveld

    Om verwarring te voorkomen bij bezoekers die gebruik maken van hulptechnologieën moet een foutmelding ook in de code worden gekoppeld aan het bijbehorende invoerveld. Gebruik hiervoor het attribuut aria-describedby.

    				
    					
    				
    			

  • Vaak moeten in formulieren gegevens worden ingevuld die bij veel andere formulieren ook worden gevraagd. Dit geldt voor veelgevraagde gegevens zoals naam, e-mailadres en telefoonnummer.

    Het doel van een invoerveld kan worden vastgelegd in de code. Hierdoor begrijpen browsers welke gegevens er worden gevraagd. Een browser kan het formulier dan al (deels) automatisch zelf invullen. Dit is handig voor alle bezoekers, maar voor bezoekers met een motorische beperking is dit nog belangrijker. Het invullen van een formulier kan hen veel tijd kosten.

    Gebruik hiervoor het autocomplete-attribuut in de code om het doel van het invoerveld toe te voegen aan het <input>-element.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Het W3C heeft een lijst met 53 doelen van invoer die in de code horen vastgelegd te worden. (https://www.w3.org/TR/WCAG21/#input-purposes).

  • Als er door het insturen van een formulier een onomkeerbare actie wordt uitgevoerd die grote gevolgen kan hebben, dan moet er voor worden gezorgd dat bezoekers de inzending kunnen annuleren, controleren of bevestigen.

    Bezoekers met een functiebeperking lopen vaak meer risico om fouten te maken. Mensen met dyslexie kunnen letters en cijfers omdraaien en mensen met motorische stoornissen kunnen per ongeluk toetsen aanslaan. Eigenlijk hebben alle bezoekers profijt van de mogelijkheid om ernstige fouten te voorkomen.

    Bij een formulier waarmee een wettelijke of financiële transactie wordt gedaan, kun je één van de volgende technieken toepassen:

    • Geef de bezoeker na verzending van het formulier een bepaalde tijd om de inzending te wijzigen of annuleren.
    • Toon voordat het formulier wordt verzonden een overzicht van de ingevulde gegevens en bied de bezoeker de mogelijkheid om deze te verbeteren.
    • Voeg een selectievakje toe aan het formulier waarmee de bezoeker aan kan geven dat hij de gegevens heeft gecontroleerd en dat deze correct zijn, voordat hij het formulier verzendt.

    Bij een formulier waarmee de bezoeker gegevens kan wijzigen of verwijderen, zoals profielgegevens op een website, kun je één van de volgende technieken toepassen:

    • Bied de mogelijkheid om verwijderde gegevens terug te halen.
    • Vraag bevestiging om door te gaan met de actie van het wijzigen of verwijderen.
    • Voeg een selectievakje toe aan het formulier waarmee de bezoeker aan kan geven dat hij de gegevens heeft gecontroleerd en dat deze correct zijn, voordat hij het formulier verzendt.

    Bij een formulier waarmee de bezoeker antwoorden kan geven op vragen uit een test, toets of examen, kun je één van de volgende technieken toepassen:

    • Bied de mogelijkheid om antwoorden te controleren en verbeteren voordat ze worden verzonden.
    • Vraag bevestiging om door te gaan met het inzenden van het antwoord.
  • Soms moeten formulieren binnen een bepaalde tijd worden ingevuld of verloopt een inlogsessie na een bepaalde termijn. Zo’n tijdslimiet is niet handig voor bezoekers die meer tijd nodig hebben. Bijvoorbeeld omdat zij gebruik maken van hulptechnologieën of omdat zij door een cognitieve beperking meer tijd nodig hebben om tekst te lezen. Zorg daarom dat er geen tijdslimiet wordt gebruikt. Als het echt niet anders kan, geef bezoekers dan de mogelijkheid om de tijdslimiet aan te passen. Dit kan op één van de volgende manieren:

    • Uitzetten: Laat bezoekers de tijdslimiet uitzetten voordat het begint.
    • Aanpassen: Laat bezoekers de tijdslimiet aanpassen tot ten minste 10 keer de tijdslimiet voordat het begint.
    • Verlengen: Geef bezoekers een waarschuwing voordat de tijd afloopt en geef ze tenminste 20 seconden om de tijdslimiet te verlengen. Laat de bezoeker dit ten minste 10 keer doen.

    Niet bij alle tijdslimieten is het nodig dat deze kan worden uitgezet, aangepast of worden verlengt. Er zijn namelijk een paar uitzonderingen:

    • Real-time: Als de tijdslimiet onderdeel is van een real-time gebeurtenis, zoals het bieden in veiling, en er geen alternatief voor de tijdslimiet mogelijk is.
    • Essentieel: Als de tijdslimiet zelf essentieel is, zoals bij een toets die in een bepaalde tijd moet worden gemaakt, en verlenging de activiteit ongeldig zou maken.
    • Langer dan 20 uur: Als de tijdslimiet langer is dan 20 uur.
  • Veranderingen in de inhoud van een pagina worden aangegeven met een statusbericht. Een statusbericht voegt nieuwe informatie toe aan de pagina. Het geeft de bezoeker bijvoorbeeld informatie over de resultaten van een actie, over de voortgang van een laadtijd of een waarschuwing over eventuele fouten in een formulier. Deze informatie is belangrijk voor iedereen. Deze informatie moet dus ook beschikbaar worden gemaakt voor een bezoeker die gebruik maakt van hulptechnologieën.

    Hulptechnologie synchroniseert continu met het DOM en merkt de wijziging dus wel op, maar de bezoeker die hiervan gebruik maakt wordt er nietover geïnformeerd. Met het attribuut aria-live wordt een blok een live region. Deze informatie moeten in de code worden opgemaakt zodat ze de aandacht krijgen van hulptechnologieën op een manier die de bezoeker niet onnodig onderbreekt.

    • Bij succes of informatie over voortgang wordt dit gedaan met ARIA role="status" of aria-live="polite".
    • Bij waarschuwing wordt dit gedaan met ARIA role="alert" of aria-live="assertive".
    				
    					
    				
    			

    Standaard zal hulptechnologie alleen de gewijzigde tekst voorlezen. Als toch het hele blok moet worden voorlezen, voeg dan aria-atomic=”true” toe.

    Een bezoeker heeft geen controle over de uitgesproken informatie. Als een bezoeker (per ongeluk) een toets aanraakt, wordt de aankondiging onderbroken en is er geen manier om de informatie opnieuw te beluisteren.

  • Laat geen grote gebeurtenis plaatsvinden als een bezoeker een veld invoerveld invult, een selectievakje of keuzerondje aanklikt of een waarde kiest uit een keuzelijst, tenzij de bezoeker vooraf is geïnformeerd. Voor veel bezoekers kan een onverwachte gebeurtenis verwarrend zijn. Bezoekers met een visuele beperking kunnen de wijziging misschien niet zien. Bezoekers die alleen met het toetsenbord navigeren kunnen hierdoor moeite hebben met de bediening van de website. Laat de bezoeker daarom zelf op een knop klikken om de gebeurtenis in gang te zetten.

    Grote gebeurtenissen worden contextwijzigingen genoemd. Contextwijzigingen zijn bijvoorbeeld:

    • het automatisch inzenden van een formulier;
    • het openen van een venster;
    • het veranderen van de focus naar een ander onderdeel.

    Er mag ook geen contextwijziging plaatsvinden door het veranderen van de focus.

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 1.3.5 Identificeer het doel van de input
  • Principe 2. Bedienbaar
    • Richtlijn 2.2 Genoeg tijd
      • 2.2.1 Timing aanpasbaar
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.6 Koppen en labels
  • Principe 3. Begrijpelijk
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.1 Bij focus
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.1 Fout identificatie
      • 3.3.2 Labels of instructies
      • 3.3.3 Foutsuggestie
      • 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.3 Statusberichten