Toegankelijke formulieren maken

Wat betekent dat?

Het betekent webformulieren ontwerpen en integreren die door iedereen met succes kunnen worden ingevuld, ongeacht het apparaat dat ze gebruiken.

Een toegankelijk formulier is vooral een formulier dat voor zichzelf spreekt, gemakkelijk te navigeren is met het toetsenbord, leesbaar is door ondersteunende technologieën zoals schermlezers en dat duidelijke en nuttige feedback geeft bij fouten.

Terug naar de basisinformatie

Waarom?

Een slecht ontworpen formulier kan al snel een onoverkomelijke muur worden, waardoor een belangrijke fase een bron van frustratie en uitsluiting wordt.

Voor veel mensen wordt het onmogelijk om te begrijpen wat er van hen wordt verwacht in een veld, om foutmeldingen te zien, om de knop "Verzenden" op het toetsenbord te gebruiken of zelfs om een ontoegankelijke CAPTCHA te overwinnen.

Le résultat direct ? Un taux d’abandon élevé, des utilisateurices qui se découragent, et pour toi, une perte de conversions et d’opportunités.

Hoe pak ik het aan?

Om toegankelijke formulieren te maken, zijn deze eerste blokkeringspunten cruciaal:

De eerste cruciale stap is om altijd een zichtbaar label te koppelen aan elk invoerveld. Dit label moet technisch gekoppeld zijn aan het veld (met het for="id_du_champ" attribuut in HTML) om correct gelezen te worden door schermlezers.
Neem geen genoegen met een eenvoudige placeholder als je enige referentiepunt: deze verdwijnt zodra je typt, wat problematisch is voor het geheugen, herlezen en compatibiliteit met ondersteunende technologieën.
Je moet ook beknopte contextuele hulp toevoegen aan je velden indien nodig, waarbij nuttige informatie wordt weergegeven (verwacht formaat, voorbeeld, enz.) zonder de interface visueel te overladen. Feedbackberichten in geval van een fout moeten duidelijk, zichtbaar en expliciet zijn. Vertrouw niet alleen op de kleur rood; geef precies aan waar de fout zit, wat de aard ervan is en vooral hoe je deze kunt corrigeren. Bovendien moeten deze foutmeldingen dynamisch worden aangekondigd aan schermlezers (via aria-live="assertive" of role="alert") zodat de gebruiker er niet naar hoeft te zoeken.
Assure-toi que l’ordre de tabulation (la navigation avec la touche Tab) suive une logique naturelle et ne comporte aucun saut inattendu. Le focus visuel (l’indicateur qui montre quel élément est actif) doit toujours être clair et visible sur le champ ou bouton sélectionné. Enfin, tes boutons d’action doivent être explicites et compréhensibles hors contexte (par exemple : « Envoyer ma demande », « S’inscrire », plutôt que des génériques « OK » ou « Valider »).
Als het aankomt op CAPTCHA's, kies dan voor toegankelijke alternatieven die niet alleen vertrouwen op een visuele uitdaging. Kies voor toegankelijkere oplossingen zoals audio CAPTCHA's, eenvoudige logische vragen of onzichtbare CAPTCHA's die het gedrag van gebruikers op de achtergrond analyseren. De HoneyPot is ook een ideale oplossing om robots te vermijden.

Tips

N°1.

Utilise les attributs aria-live ou role= « alert » pour que les messages d’erreur qui apparaissent dynamiquement soient immédiatement annoncés aux lecteurs d’écran, sans que l’utilisateur ait à chercher.

N°2.

Test je formulier op het toetsenbord, met een schermlezer en ook zonder geluid. Deze tests zullen snel eventuele knelpunten aan het licht brengen en je helpen om verbeterpunten te identificeren.

N°3.

Tire parti des attributs HTML natifs comme type= « email », type= « number », « min », « max », « required », etc. Ils offrent une validation native et des claviers adaptés sur mobile, améliorant l’expérience et réduisant la nécessité de JavaScript complexe.

N°4.

Duidt verplichte velden duidelijk aan. Gebruikt het vereiste attribuut in HTML. Voeg visueel een sterretje (*) toe en een opmerking aan het begin van het formulier waarin de betekenis van het sterretje wordt uitgelegd.

N°5.

Zorg er bij complexe datum- of tijdselectoren voor dat de widgets volledig navigeerbaar zijn via het toetsenbord en compatibel zijn met schermlezers.

N°6.

Après la soumission du formulaire, affiche toujours un message de confirmation clair et visible indiquant que le formulaire a bien été transmis. Si possible, précise les prochaines étapes ou redirige l’utilisateurice vers une page de confirmation dédiée.

Hulpmiddelen

Alle regels voor een toegankelijk formulier.

Toegankelijke formuliergids, veld voor veld.

De juiste tags en attributen voor je formulier.

Gids voor toegankelijke CAPTCHA en hun alternatieven.

CAPTCHA : De richtlijnen voor toegankelijkheid van webinhoud (WCAG)

Wat is de HonneyPot oplossing?