Een contactformulier lijkt misschien een klein onderdeel van je website, maar het is vaak dé plek waar bezoekers met je in contact komen. Als het formulier niet goed werkt, of niet toegankelijk is dan loop je niet alleen klanten mis, maar sluit je ook mensen uit.
Zo maak je contactformulieren gebruiksvriendelijk voor iedereen
In deze blog leg ik uit waar je op moet letten om je contactformulier voor iedereen bruikbaar te maken.
Gebruik duidelijke labels en geen placeholders
Een veelgemaakte fout is het vervangen van labels door placeholders, zoals ‘Naam’, ‘E-mail’, ‘Telefoonnummer’,‘Bericht’ enzovoort. Placeholders verdwijnen zodra iemand begint te typen en dat is lastig voor mensen met geheugen- of concentratieproblemen, maar zeker ook voor schermlezers die de tekst niet meer kunnen herkennen.
Een schermlezer is voorleessoftware. Lees op de website van Visio.org wat voorleessoftware is en wat het voor jou kan betekenen als je een visuele beperking hebt.
Geef duidelijke foutmeldingen en hulpteksten
Als een veld verplicht is of specifieke invoer vereist, geef dat vooraf aan. En als er iets misgaat, leg dan duidelijk uit water fout is en hoe de gebruiker het kan oplossen.
Gebruik niet de tekst: ‘Ongeldige invoer’
Oplossing: ‘Voer een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl.’
Gebruik daarnaast ARIA-attributen zoals aria-describedby om foutmeldingen te koppelen aan invoervelden, zodat schermlezers ze kunnen voorlezen.
Toetsenbordnavigatie
Niet iedereen gebruikt een muis. Zorg dat het formulier volledig te bedienen is met het toetsenbord:
De tabvolgorde moet logisch zijn.
Focusstijlen, zoals een opvallende dikkere rand mogen niet worden uitgeschakeld met CSS.
Knoppen moeten duidelijk zichtbaar zijn wanneer ze geselecteerd zijn.
Contrast en leesbaarheid
Tekst in formulieren, labels, foutmeldingen, placeholders moeten voldoende contrast hebben met de achtergrond waarop ze staan. De WCAG-richtlijn is minimaal contrastverhouding van 4.5:1. Met de website van Webaim.org kun je de check doen.
Gebruik daarnaast leesbare lettergroottes, gebruik geen geschreven lettertypen en laat voldoende witruimte tussen velden. Schrijf de teksten compact omdat dit makkelijker leest in plaatst van lange lappen tekst. Vermijd afkortingen, deze worden door een schermlezer letterlijk voorgelezen. Schrijf de afkortingen volledig.
Beschrijf knoppen eenduidig
Knoppen zoals ‘Verzenden’ of ‘Contact opnemen’ zeggen meer dan OK of ‘Submit’.
Geef bevestiging na verzending
Een toegankelijke bevestigingsmelding helpt gebruikers begrijpen dat hun actie succesvol was.
Toon een duidelijke tekst, zoals ‘Bedankt voor je bericht! We nemen snel contact met je op.’
Geef ook visuele feedback (groene kleur, vinkje).
Gebruik role=”alert” zodat schermlezers de melding direct kunnen voorlezen.
Test met echte gebruikers
Geen enkele checklist vervangt een test met échte mensen. Laat gebruikers met verschillende hulpmiddelen, zoals schermlezers of spraaknavigatie je formulier proberen. Hun feedback laat vaak snel zien wat er beter kan.
In het kort
Een toegankelijk contactformulier is:
Duidelijk gelabeld
Toetsenbordvriendelijk
Contrastrijk en leesbaar
Helder in feedback en foutmeldingen
Zo ziet het contactformulier eruit
Ik test met mijn bedrijf Van Tricht Office Support regelmatig webshops en websites op de toegankelijkheid.
Wil je jouw webshop of website getest willen hebben, neem dan contact met mij via regina@vantrichtofficesupport.nl of vul het online contactformulier in en ik neem contact met je op.