Formulieren

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:

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:

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:

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 de foutmelding in tekst worden weergegeven. Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

Benoem in de tekst van de foutmelding de naam van het veld dat verkeerd is ingevuld en benoem precies wat de fout is. Schrijf dus niet:

Maar schrijf:

In de code kan ook worden aangegeven welk veld verkeerd is ingevuld. Gebruik hiervoor het attribuut aria-invalid. Daarnaast hoort de foutmelding in de code aan het bijbehorende invoerveld te worden gekoppeld. Dit voorkomt verwarring bij bezoekers die gebruik maken van hulptechnologieën. Een foutmelding kan op een aantal manieren worden gekoppeld zoals met een aria-describedby-attribuut.

In de code ziet dat er zo uit:

Als er een fout is gevonden en suggesties voor verbetering zijn bekend, dan moeten deze suggesties aan de bezoeker worden getoond. De suggesties kunnen worden gebruikt om beter te begrijpen wat er precies ingevuld moet worden.

Bij veel invoervelden is bekend in welk formaat het ingevuld moet worden. Zo bestaat in Nederland een telefoonnummer uit 10 cijfers en een postcode uit 4 cijfers en 2 letters. Een goede foutmelding bestaat dan uit de mededeling dat het veld ‘telefoonnummer’ niet juist is ingevuld, en dat een telefoonnummer uit 10 cijfers bestaat.

Schrijf dus niet:

Maar schrijf:

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:

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

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:

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:

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

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.

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

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:

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