10. Formulieren

10.1 Omschrijving

Dat het mis gaat komt meestal door gebrek aan kennis bij de ontwikkelaars, niet omdat het te moeilijk of te kostbaar is.

Bij het toetsen van je website op toegankelijkheid is het belangrijk dat je dit deel goed toetst of laat toetsen. Formulieren zijn vrij complex om te toetsen.

10.2 Succescriteria

• 1.1.1 Niet-tekstuele content (niveau A)
• 1.3.1 Info en relaties (niveau A)
• 2.2.1 tijd is aanpasbaar
• 3.2.1 Wijziging bij focus
• 3.2.2 Wijziging bij input
• 3.3.1 Fouten voorkomen en herstellen (niveau A)
• 3.3.2 Labels of instructies (niveau A)
• 3.3.3 Foutsuggestie (niveau AA)
• 3.3.4 Foutpreventie, wettelijk, financieel, gegevens (niveau AA)
• 4.1.2 naam, rol, waarde

10.3 Toepassen

Toetsenbordtoegankelijk

Als een formulier niet toegankelijk is met het toetsenbord, dan is het niet bruikbaar voor mensen die geen muis kunnen gebruiken, zoals blinden of mensen met een motorische beperking.

Koppeling van beschrijving en invoerveld

Een gewoon tekstinvoerveld heeft een beschrijving en een invoerveld. Deze moeten aan elkaar gekoppeld zijn om ze te kunnen gebruiken als je een screenreader gebruikt.

Zo'n koppeling kun je maken door te zorgen dat het for-attribuut bij het label en het id-attribuut bij het input-element gelijk zijn. Dit noemen we de label-id-koppeling.

De bijbehorende HTML-code is

<label for="voornaam">Voornaam*</label> <input id="voornaam" name="voornaam" type="text">

Een uitgebreidere uitleg van dit onderwerp vind je in Creating Accessible Forms van WebAIM.

Voor het koppelen van de beschrijving en de formulierknop is het volgende belangrijk:

• label-id-koppeling bij de velden:
  • text
  • textarea
  • checkboxen
  • radiobuttons
  • dropdowns
• het value-attribuut bij:
  • submit
  • reset
  • tekst tussen button-tags bij een button
  • alt-tekst bij een afbeelding

Groeperen van velden

Velden die bij elkaar horen groepeer je met het fieldset-element. Direct na <fieldset> komt het legend-element: daarmee geef je een naam aan de groep velden.

Fieldsets zijn altijd nodig als de labels van losse invoervelden te weinig informatie geven, bijvoorbeeld in het volgende voorbeeld. Daarbij zijn de labels 'ja' en 'nee'.

Instructies

Geef je bij een veld een instructie (bijvoorbeeld 'Gebruik 4 cijfers' ), dan moet deze staan in het label-attribuut.

Verplichte velden

Bij verplichte velden moet vooraf aangegeven worden op welke manier de verplichte velden zijn aangegeven.

Hieronder een voorbeeld waarbij dat niet goed gaat, want de melding wordt pas na de verplichte velden aangegeven.

Hieronder een voorbeeld hoe het wel moet: de instructie wordt vooraf gegeven.

Foutmeldingen

Als een veld niet goed is ingevuld en het formulier geeft een foutmelding terug, dan moet deze foutmelding expliciet vermelden op welk veld deze betrekking heeft en wat de gebruiker moet doen. Alleen de melding 'Invoer verplicht' of zo is niet voldoende, want dan is niet duidelijk bij welk veld deze melding hoort.

Hieronder een adequate foutmelding.

Tijdslimiet

Soms zit er een tijdslimiet op een webpagina. Een voorbeeld is het gebruik van DigiD: daar moet je om de zoveel tijd iets intypen, want om veiligheidsredenen word je automatisch uitgelogd als je niets doet.

Succescriterium 2.2.1 eist dat de tijdslimiet aanpasbaar is: de gebruiker moet de tijdslimiet kunnen uitzetten of aanpassen.

Contextwijziging

Als je met de muis beweegt, mag er niet opeens iets gebeuren. Dat kan soms zo gemaakt zijn in een formulier. Er mag dus pas iets gebeuren als je op iets klikt. (succescriterium 3.2.1)

Hetzelfde geldt als je tekst of iets anders invoert in een formulier: er mogen dan niet automatisch grote wijzigingen plaatsvinden.