Zo maak je een toegankelijk webformulier

De komende tijd zullen we wekelijks een onderdeel van een website “uitkleden” en onder de loep nemen om te laten zien hoe je deze toegankelijker kunt maken. Vorige week hebben we toegankelijke pdf’s behandeld. Nu behandelen we een ander belangrijk onderdeel: toegankelijke formulieren op een website. Om ervoor te zorgen dat iedereen, inclusief mensen met een beperking, deze formulieren kan begrijpen en navigeren, is het essentieel om ze digitaal toegankelijk te maken. Sacha geeft vijf praktische tips om je op weg te helpen met het maken van toegankelijke webformulieren.

Even voorstellen

”Hi, ik ben Sacha! Ik werk sinds april 2022 bij Cardan. Een groot deel van mijn tijd besteed ik aan het onderzoeken van digitale toegankelijkheid. Hierbij hoort ook het testen van webformulieren. Daarnaast werk ik als consultant en voer ik gesprekken met meerdere klanten om de rapportages door te nemen en vragen te beantwoorden.”

Tip 1: gebruik bij voorkeur standaard HTML-elementen

Toegankelijke webformulieren zorgen ervoor dat alle gebruikers, inclusief diegenen met beperkingen, een goede ervaring hebben. Het is hierbij het makkelijkst als je standaard HTML-elementen gebruikt, zoals:

• invoervelden <input>

• tekstgebieden <textarea>

• knoppen <button>

Deze elementen zijn in de basis al interactief en werken bijvoorbeeld goed met het toetsenbord en hulpsoftware. Voor meer informatie over dit succescriterium, bekijk 4.1.2 naam, rol, waarde (maar het kan ook relevant zijn voor andere criteria).

Tip 2: zorg dat elementen genoeg contrast hebben

Het is belangrijk dat iedereen de elementen in een formulier goed kan zien. Zorg er daarom voor dat elementen in het formulier duidelijk zichtbaar zijn! Dit kun je doen door te zorgen dat de randen van de invoervelden, radiobuttons en checkboxen genoeg contrast hebben met de achtergrond. Voor meer informatie over dit succescriterium, bekijk succescriterium 1.4.11 contrast van niet-tekstuele content.

Tip 3: visuele focus-indicatie

Het is belangrijk om visueel aan te geven welk veld momenteel actief is, zodat gebruikers weten waar ze zijn in het formulier. Dit kan worden bereikt door een duidelijke visuele indicatie, zoals een omlijning, toe te voegen aan het element dat de focus heeft. Hierdoor kunnen gebruikers direct zien welk veld ze aan het invullen zijn.

Voor meer informatie over dit succescriterium, bekijk succescriterium 2.4.7 focus zichtbaar.

Tip 4: gebruik van ‘autocomplete’

Het gebruik van het autocomplete-attribuut zorgt ervoor dat formulieren die informatie over de gebruiker vragen makkelijker in te vullen zijn. Met het toepassen van dit attribuut met de juiste waarde, zorg je ervoor dat software velden makkelijker automatisch in kan vullen. Voor meer informatie over dit succescriterium, bekijk succescriterium 1.3.5 identificeer het doel van de input.

<input name="input_1" id="input_5_1" type="text" value="" class="large" aria-required="true" aria-invalid="false" autocomplete="given-name">

Tip 5: testen van de toegankelijkheid van webformulieren

Dit zijn een paar dingen waar je zelf alvast eens naar kunt kijken als het gaat om de toegankelijkheid van je formulieren:

1. Gebruik van het toetsenbord: test je formulier door alleen het toetsenbord te gebruiken om ervoor te zorgen dat alle velden ook zonder muis toegankelijk zijn. Controleer of de tabvolgorde logisch is en of gebruikers gemakkelijk door het formulier kunnen navigeren.

2. Screenreaders: gebruik screenreaders zoals NVDA, JAWS, of VoiceOver om te controleren of alle elementen correct worden voorgelezen. Dit is essentieel voor gebruikers die het formulier niet kunnen zien.

3. Visuele feedback: controleer of er visuele feedback is voor focus en fouten. Gebruikers moeten kunnen zien welk veld actief is en waar eventuele fouten zich bevinden.

4. Validatie en foutmeldingen: controleer of foutmeldingen echt aangeven waar de fout zit, en dat het niet alleen instructies zijn.

Door deze tips te volgen, zorg je ervoor dat je webformulieren toegankelijk zijn voor alle gebruikers, ongeacht hun beperking.

Wil je weten hoe jouw formulier scoort op toegankelijkheid?

Mijn collega’s en ik staan klaar om je digitale product te onderzoeken op basis van de WCAG 2.2 richtlijnen. We helpen je graag verder op weg naar een volledig toegankelijk formulier.