Skip to main content
Apps & WebsitesTips & Trics

Een digitaal toegankelijk contactformulier maken in WordPress

Door 2021-05-12mei 13th, 2021Geen Reacties

Volgens Marketingfacts is zo’n 35% van het totaal aantal websites op het internet gemaakt met het content managing system (CMS) WordPress. Ook in Nederland is dit CMS flink populair. De populariteit van WordPress zal vooral te danken zijn aan het feit dat de dienst gratis is en vertaald in meer dan vijftig talen.

telefoon ligt op een stapel formulieren. Op de telefoon is een briefje geplakt met de tekst 'Sign here'

Zelf werk ik ook graag met WordPress, om meerdere redenen. Ten eerste zijn WordPress-websites relatief eenvoudig te voorzien van extra modules of functionaliteiten. Het CMS kent een groot aantal (vaak gratis) plugins. Deze aanvullende stukken software stellen de website-eigenaar in staat om bijvoorbeeld extra beveiliging te installeren, de website beter vindbaar te maken op het internet of om een contactformulier op te stellen.

Ondanks dat WordPress een relatief toegankelijk CMS is, gaan developers met contactformulieren dikwijls de mist in op het gebied van toegankelijkheid. Terwijl deze formulieren vaak een belangrijke functie vervullen op een website. In dit artikel licht ik toe hoe je ervoor zorgt dat WordPress contactformulieren voor iedere bezoeker toegankelijk zijn.

Algemene WordPress instellingen

Voordat je aan de slag gaat met het checken en verbeteren van een contactformulier is het verstandig om eerst naar de algemene website te kijken. Is de website bijvoorbeeld te gebruiken met alleen een toetsenbord? Voldoet je website eigenlijk aan de juiste contrastratio’s? En, kunnen schermlezers visuele elementen wel herkennen en oplezen?

Het lijkt overweldigend en dat is het ook wel redelijk. Gelukkig kun je ook zonder (veel) technische kennis redelijk eenvoudig een inzicht krijgen in de toegankelijkheid van je website. Eerder schreef ik een handleiding zelf de toegankelijkheid van je website testen. Daarnaast kun je voor WordPress websites eenvoudig voorzien van extra toegankelijkheidsopties met de WP Accessibility plugin.

Digitaal toegankelijke contactformulieren met Gravity Forms

Voor het toegankelijk maken van formulieren zijn aanvullende stappen vereist. Ondanks dat de broncode achter Gravity Forms voldoet aan de WCAG 2.1 AA, zijn de contactformulieren die deze plugin creëert niet vanzelfsprekend volledig toegankelijk.

Algemene Gravity Forms instellingen

Ga naar de instellingen van Gravity Forms (via het linkermenu in de backend van WordPress) en vink hier de volgende opties aan:

  • CSS uitvoeren: Ja
  • HTML5 uitvoeren: Ja

Formulier-instellingen

Om de instellingen van een los formulier aan te passen klik je in de WordPress backend bij het betreffende formulier op instellingen. Hier vink je de volgende instellingen aan:

  • Plaatsing label: Boven uitgelijnd
  • Plaatsing sub-label: Boven invoer
  • Formulierknop: Hier krijg je de keuze tussen tekst en afbeelding, klik op tekst
  • Formulierknop voorwaardelijke logica knop: vink deze optie niet aan

Ontoegankelijke formuliervelden

Gravity Forms kent een aantal soorten formuliervelden die niet door iedere bezoeker te gebruiken zijn. Deze zijn:

  • Multi-keuzelijst
  • HTML blokken met essentiële tekst
  • Sectie
  • reCAPTCHA V2. Als alternatief kan de anti-spam honeypot optie worden gebruikt, deze is terug te vinden in de formulier-instellingen. Wel een CAPTCHA gebruiken? Lees meer over het maken van een digitaal toegankelijke CAPTCHA.

De instellingen van de formuliervelden

Ook in de instellingen van specifieke formuliervelden zijn er enkele belangrijke punten waar rekening mee moet worden gehouden. Deze vind je wanneer je op een het driehoekje van een veld klikt:
Het scherm waarop de instellingen gekozen kunnen worden voor het invullen van een veld in gravity forms

    • Label veld: vul hier een beschrijving van de tekst in die ingevuld moet worden, bijvoorbeeld ‘e-mailadres’
    • Zichtbaarheid label veld: gebruik altijd een zichtbaar label, gebruik nooit de optie om het label te verbergen
    • Plaatsing beschrijving: selecteer ‘Boven invoer’
    • Aangepast validatiebericht: Schrijf hier een korte beschrijving van de foutmelding, bijvoorbeeld ‘het invullen van je e-mailadres is verplicht’

Toestaan dat veld dynamisch wordt gevuld: vink deze optie niet aan

Met behulp van deze instellingen wordt je contactformulier voor een groter publiek bruikbaar. Toch kan het zijn dat de website of het formulier ondanks deze wijzigingen niet voldoet aan de webrichtlijnen van de WCAG. Om hier zeker van te zijn kan de website getest worden door mensen met een beperking. Op deze manier vallen niet alleen softwarematige gebreken op, maar ook gebruiksvriendelijke valkuilen.

Digitaal toegankelijke contactformulieren met Contact Form 7

Een andere zeer populaire plugin voor het creëren van contactformulieren is Contact Form 7 (CF7). Ook hier zijn de standaardinstellingen van formulieren niet digitaal toegankelijk. Vergeleken met Gravity Forms verschilt de manier waarop de formulieren zijn opgebouwd sterk. Bij Contact Form 7 zijn gebruikers aangewezen op HTML.

De standaard code van CF7 ziet er als volgt uit:

<label> Je naam
    [text* your-name] </label>

<label> Je e-mailadres
    [email* your-email] </label>

<label> Onderwerp
    [text* your-subject] </label>

<label> Je bericht (optioneel)
    [textarea your-message] </label>

[submit “Verzenden”]

 

Om deze code toegankelijk te maken is het van belang om de standaard code aan te passen naar het volgende:

<p><label for=”naam”>Je naam (verplicht)</label> [text* your-name id=”naam”] </p> 

<p><label for=”email”>Je e-mailadres (verplicht)</label> [email* your-email id=”email”] </p>

<p><label for=”onderwerp”>Onderwerp (verplicht)</label> [text your-subject id=”onderwerp”] </p> 

<p><label for=”bericht”>Je bericht</label> [textarea your-message id=”bericht”] </p> <p>[submit “Verzenden”]</p>

 

 

Digitaal toegankelijke WordPress websites ontwikkelen

Digitaal Toegankelijk.nl is dé specialist op het gebied van online inclusiviteit. Wij helpen organisaties en ondernemingen bij het opsporen en verhelpen van problemen op het gebied van digitale toegankelijkheid. Wil je meer weten over het bouwen van een toegankelijke WordPress website? Lees dan verder op de pagina Hoe maak ik mijn WordPress-site digitaal toegankelijk of neem contact op met onze specialisten.

Vincent van Brakel

Auteur Vincent van Brakel

Vincent van Brakel is werkzaam als freelance SEO specialist en schrijft voor Digitaal Toegankelijk.com over de praktische aspecten van digitale toegankelijkheid voor content marketeers en developers.

Lees meer artikelen van Vincent van Brakel