Checklist: een toegankelijk formulier met Gravity Forms.
Geschreven door
Checklist: een toegankelijk formulier met Gravity Forms.
Met de WordPress-plugin Gravity Forms maak je gemakkelijk webformulieren die voldoen aan WCAG 2.1 AA, de wereldwijde standaard voor webtoegankelijkheid. In versie 2.5 zijn er extra mogelijkheden toegevoegd om de toegankelijkheid te waarborgen.
Zeg WCAG je nog niets? Lees dan eerst ons artikel Wat is WCAG, oftewel de Web Content Accessibility Guidelines.
Stap voor stap naar een toegankelijk webformulier
Deze checklist gaat stap voor stap door de instellingen en formuliervelden in WordPress. Hierna weet je precies wat je wel en niet moet gebruiken om een toegankelijk formulier samen te stellen.
Als je meer wilt weten over het “waarom”, lees dan de Engelstalige documentatie over toegankelijkheid in de Knowledge Base op de website van Gravity Forms.
In deze korte handleiding gaan we ervan uit dat je Gravity Forms al hebt geïnstalleerd en gebruikt.
Het WordPress-thema
Allereerst een opmerking over het WordPress-thema dat je gebruikt.
Het kleurcontrast tussen de tekst en de achtergrond is belangrijk. De bezoekers moeten de inhoud in een formulier kunnen lezen.
Gravity Forms wordt geleverd met een eigen stylesheet (CSS). Hierin is het kleurcontrast van de tekst geoptimaliseerd tegen een witte achtergrondkleur. Maar een thema kan een donkerdere achtergrondkleur hebben, waardoor tekst onleesbaar wordt wanneer je het Gravity Forms-stylesheet gebruikt. Controleer het kleurcontrast tussen de tekst en de achtergrond. Deze moet 4,5: 1 of hoger zijn.
Schakel niet het hele stylesheet uit alleen voor het kleurcontrast. De CSS regelt namelijk ook het uiterlijk van de formulierelementen en de manier waarop foutmeldingen worden weergegeven.
Afhankelijk van je thema is het mogelijk om een deel van de CSS aan te passen of te overschrijven met de WordPress Customizer of in de CSS van het thema. Bespreek, indien nodig, de opties met je webdeveloper.
Algemene instellingen
Ga naar het WordPress Dashboard > Formulieren > Instellingen en zet:
- Standaard CSS uitvoeren op “Ingeschakeld”.
- HTML5 uitvoeren op “Ingeschakeld”.
Formulierinstellingen
Na het aanmaken van een nieuw formulier, ga naar naar:
Instellingen > Formulierinstellingen.
Instellingen die belangrijk voor toegankelijkheid zijn:
- Positie van het label: “Boven uitgelijnd”
- Plaatsing sub-label: “Boven invoer”.
- Validatieoverzicht: “Ingeschakeld”.
- Indicator verplicht veld: Kies een van de opties, maar verwijder de indicator niet.
- Formulierknop: Kies “Tekst”. gebruik een beschrijvende tekst.
- Conditional Logic: Voorwaardelijke logica inschakelen niet inschakelen, voor de formulierknop.
- Legacy-opmaak inschakelen: “Uitschakelen”.
Formuliervelden
Je kunt de instellingen voor een formulierveld vinden als je het veld aanklikt of focus geeft.
De volgende formuliervelden hebben nog toegankelijkheidsproblemen en kun je niet gebruiken voor een toegankelijk formulier:
- Multi-keuzelijst
- HTML (als er informatie instaat die essentieel is voor het begrijpen van het formulier)
- Sectie (als er informatie instaat die essentieel is voor het begrijpen van het formulier)
- reCAPTCHA V2 (een toegankelijk alternatief is de anti-spam honeypot, die je kunt vinden bij de formulierinstellingen).
Veldinstellingen
Als een veldinstelling hieronder niet wordt genoemd, heeft het geen speciale toegankelijkheidsproblemen of aandacht nodig.
Algemeen
- Labelveld: vul altijd het label in. Vertel zo helder mogelijk wat de gebruiker in moet vullen.
- Maskerinvoer: gebruik deze optie niet. Gebruik ook geen vooraf ingestelde telefoonnotatie.
Uiterlijk
- Zichtbaarheid labelveld: gebruik altijd een zichtbaar label, verberg het nooit.
- Plaatsing sublabel: boven invoerveld.
- Aangepast validatiebericht: Schrijf zelf duidelijke teksten die omschrijven wat er fout gaat als de gebruiker een veld niet invult.
- Betere gebruikersinterface: Uitgeschakeld laten voor keuzelijsten.
- Multi-File Upload: do not enable Multi-File Upload with the File Upload field. Using single file upload is ok.
Geavanceerd
- RTF-bewerker: Uitgeschakeld laten, niet gebruiken..
- Autocomplete inschakelen: Schakel autocomplete in voor ten minste persoonlijke naam-, adres-, telefoon- en e-mailadresvelden. Bij het inschakelen staan de autocomplete waardes al default goed ingevuld voor deze velden.
Een formulier toevoegen aan een pagina
Voeg het formulierenblok toe bij het bewerken van een pagina en let op:
- Formuliereninstellingen: Schakel weergave titel formulier in.
- Geavanceerd: Stel geen tabindex in. Hou de tabindex op de waarde -1. Dan wordt er geen waarde ingesteld.
Zet een formulier maar 1 keer op een webpagina. Als je het meerdere keren op dezelfde pagina zet, is er een conflict met de foutmeldingen en toetsenbordfocus. Wil je toch een formulier twee keer op een pagina zetten? Maak dan een tweede formulier aan met dezelfde inhoud.
Opmerkingen
Deze checklist is een hulpmiddel om je zo goed mogelijk te helpen met het toegankelijk opstellen van een Gravity Forms formulier; het is geen garantie dat het formulier volledig toegankelijk is.
Ook instellingen voor add-ons en plugins van derden, bijvoorbeeld voor betalingen en creditcardvalidatie, zijn nog niet opgenomen in deze checklist.
Heb je dit al gelezen?
Geschreven door