Toegankelijke formulieren op uw website

Een label bij elk veld

Elk invoerveld heeft een zichtbare naam die in de code aan het veld is gekoppeld. Klikt u op het label, dan komt de cursor in het veld. Een placeholder, de lichte voorbeeldtekst in het veld, is geen vervanging: die verdwijnt zodra iemand typt en heeft meestal te weinig contrast. Waarom dat zo'n hardnekkige fout is, staat in waarom een placeholder geen label is.

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" autocomplete="email" required>

Groepen met een omschrijving

Keuzerondjes en vinkjes die bij elkaar horen, zoals "Hoe wilt u benaderd worden?", staan in een groep met een eigen omschrijving. Zo hoort een screenreader-gebruiker niet alleen "Telefoon, keuzerondje", maar ook de vraag waar het bij hoort.

Verplichte velden die meer zijn dan een sterretje

Een rood sterretje zegt niet iedereen iets. Zet bovenaan uitleg wat het teken betekent, of schrijf "(verplicht)" in het label, en markeer het veld ook in de code als verplicht.

Autocomplete voor persoonsgegevens

Velden voor naam, e-mail, telefoon en adres krijgen de juiste autocomplete-waarde. De browser kan ze dan invullen. WCAG vraagt dit bij velden over de gebruiker zelf, en het scheelt iedereen typwerk.

Foutmeldingen die helpen

Een goede melding staat bij het veld, zegt wat er mis is en hoe het goed moet, en wordt voorgelezen. Dus niet "Ongeldige invoer", maar "Vul een e-mailadres in, bijvoorbeeld naam@bedrijf.nl". Uitgebreide voorbeelden staan in foutmeldingen die mensen echt helpen.

Een bevestiging die iedereen meekrijgt

Na het verzenden verschijnt vaak een groene tekst "Bedankt, uw bericht is verzonden", ergens boven of onder het formulier. Wie goed ziet, merkt het. Wie de pagina met een screenreader of sterk vergroot bekijkt, mist het en verstuurt het formulier nog een keer. Een bevestiging hoort als statusbericht in de code te staan, of de bezoeker gaat naar een aparte bedankpagina met een duidelijke titel.

Uitleg vooraf, niet achteraf

Moet een bezoeker iets bij de hand hebben, zoals een ordernummer of een document om te uploaden, zeg dat dan boven het formulier. Niemand wil halverwege merken dat hij terug moet om iets op te zoeken.

Bediening met het toetsenbord

Alle velden, keuzelijsten, datumkiezers, uploadknoppen en de verzendknop zijn met Tab bereikbaar, in een logische volgorde, met een zichtbare focus. Hoe u dat in het algemeen test, leest u bij een website die met alleen een toetsenbord werkt.

Er zijn alternatieven die de bezoeker niets vragen: een verborgen veld dat alleen bots invullen, een tijdscontrole, of een onzichtbare controle op de achtergrond. Welke opties er zijn en wat de afwegingen zijn, staat in captcha's en toegankelijkheid.

• Contact Form 7 laat de opbouw van het formulier aan u over. Wordt een veld niet in een label gezet, dan heeft het geen label. Dat is goed te herstellen in de formuliertemplate. De standaardfoutmeldingen zijn aan te passen naar duidelijkere teksten.
• Gravity Forms heeft veel instellingen, waaronder voor labels, beschrijvingen en de plaatsing van foutmeldingen. Een deel van de toegankelijkheid hangt af van welke opties zijn gekozen en welke add-ons er draaien.
• WPForms zet standaard labels bij velden. Let op formulieren waarin labels verborgen zijn gezet om ruimte te sparen, en op velden met alleen een placeholder.

Bij alle drie geldt: een thema of eigen CSS kan het verbergen van labels of het wegpoetsen van de focusrand weer ongedaan maken. Test dus altijd het formulier zoals het op de site staat, niet alleen de instellingen.

Vraagt uw formulier om een datum, bijvoorbeeld voor een afspraak of levering? Een kalender-widget is vaak het lastigste onderdeel. Lees hoe u een datumkiezer maakt die iedereen kan bedienen.

1. Alle formulieren in kaart. Contact, offerte, nieuwsbrief, afspraak, inschrijving, en bij een webshop ook de checkout en het account.
2. Invullen zonder muis. Wij vullen elk formulier in met alleen het toetsenbord, eerst goed, daarna bewust fout, om te zien hoe foutmeldingen zich gedragen.
3. Met een screenreader. Wij luisteren of labels, groepen, verplichte velden en meldingen worden voorgelezen. Meer over die test staat bij testen met een screenreader.
4. Herstel. In de plugininstellingen waar dat kan, met aanpassingen in templates of CSS waar dat nodig is. Na een eerste beoordeling krijgt u daarvoor een vaste prijs.
5. Controle op ontvangst. Na het herstel versturen wij testberichten, zodat zeker is dat de aanvragen nog steeds bij u aankomen.

De checkout van een winkel vraagt extra aandacht; daarvoor is er een aparte aanpak bij uw webshop toegankelijk maken.

• Vraag alleen wat u echt nodig heeft. Elk veld minder is een kans minder op een fout.
• Schrijf labels en foutmeldingen in gewone taal.
• Zet bij een veld met een vereist formaat, zoals een datum of een klantnummer, een voorbeeld onder het label.
• Vul uw eigen formulier één keer in met alleen het toetsenbord en uw telefoon in de hand. Komt u er niet doorheen, dan uw klant ook niet.

Formulieren zijn een belangrijk onderdeel, maar niet het enige. Het hele traject staat op website toegankelijk maken.