Toegankelijke formulieren maken voor blinden en slechtzienden

Dankzij toegankelijke formulieren kan iedereen, inclusief mensen met een visuele beperking, de inhoud op een website of applicatie lezen. Een goed toegankelijk formulier maakt gebruik van eenvoudige en duidelijke structuur en ondersteunt schermuitleesprogramma’s. In deze tekst volgen enkele stappen en tips voor het maken van toegankelijke formulieren.

Inhoudsopgave

1 Stap 1: Gebruik semantische HTML
2 Stap 2: Gebruik beschrijvende tekst
3 Stap 3: Maak gebruik van ARIA-attributen
4 Stap 4: Zorg voor een logische lay-out
5 Stap 5: Label formulierbesturingselementen correct
6 Stap 6: Test met schermuitleesprogramma’s
7 Stap 7: Werk via internationale toegankelijkheidsstandaarden
8 Stap 8: Bediening met een toetsenbord
9 Extra tips
10 Meer informatie

Stap 1: Gebruik semantische HTML

Het gebruik van semantische HTML-tags vormt de basis voor toegankelijkheid. Door de juiste HTML-elementen te kiezen voor elk onderdeel van je formulier, voorkom je veel toegankelijkheidsproblemen. Gebruik <form>, <label>, <input>, en <button>-elementen om de hiërarchie en relatie tussen de elementen vast te leggen.

Voorbeeld

<form>
  <label for="naam">Naam:</label>
  <input type="text" id="naam" name="naam">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Verzenden</button>
</form>

Dit voorbeeld maakt gebruik van de juiste HTML-elementen voor elk onderdeel van het formulier. De <form>-tag geeft aan dat het om een formulier gaat. De <label>-tags geven de labels voor de invoervelden aan. De <input>-tags geven de invoervelden zelf aan. De <button>-tag geeft de knop voor het verzenden van het formulier aan.

Stap 2: Gebruik beschrijvende tekst

Voeg beschrijvende tekst toe die uitlegt wat elke sectie van het formulier inhoudt. Plaats deze tekst bovenaan het formulier, zodat schermuitleesprogramma’s deze informatie als eerste kunnen lezen. Vermijd het gebruik van alleen visuele aanwijzingen, zoals kleur, om informatie over te brengen. Zorg er tevens voor dat beschrijvende tekst wordt toegevoegd voor verplichte velden, zodat blinden en slechtzienden weten welke informatie ze moeten verstrekken.

Voorbeeld

<form>
  <h2>Contactformulier</h2>
  <label for="naam">Naam:</label>
  <input type="text" id="naam" name="naam" aria-label="Uw naam">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" aria-label="Uw e-mailadres">
  <button type="submit">Verzenden</button>
</form>

Dit voorbeeld voegt beschrijvende tekst toe aan de sectiekop en aan de labels voor de invoervelden. De beschrijvende tekst is duidelijk en begrijpelijk, en geeft voldoende informatie aan blinden en slechtzienden.

Stap 3: Maak gebruik van ARIA-attributen

Gebruik Accessible Rich Internet Applications (ARIA) attributen om extra informatie aan schermuitleesprogramma’s te verstrekken. Voeg bijvoorbeeld aria-label toe aan formulierelementen om extra context te bieden.

Voorbeeld

<form>
  <h2>Contactformulier</h2>
  <label for="naam">Naam:</label>
  <input type="text" id="naam" name="naam" aria-label="Uw naam">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" aria-label="Uw e-mail

Stap 4: Zorg voor een logische lay-out

Ontwerp formulieren op een logische en consistente manier. Zorg ervoor dat de vraag of beschrijving voor elk invoerveld een consistent patroon volgt. Plaats het label consistent aan dezelfde kant van het invoerveld en vertel de gebruiker expliciet welke informatie vereist is. Overweeg ook de grootte van het scherm, zodat formulieren ook op kleinere schermen goed leesbaar en bruikbaar zijn.

Voorbeeld

<form>
  <h2>Contactformulier</h2>
  <section>
    <label for="naam">Naam:</label>
    <input type="text" id="naam" name="naam" aria-label="Uw naam" required>
  </section>
  <section>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" aria-label="Uw e-mailadres" required>
  </section>
  <section>
    <label for="onderwerp">Onderwerp:</label>
    <input type="text" id="onderwerp" name="onderwerp">
  </section>
  <section>
    <label for="bericht">Bericht:</label>
    <textarea id="bericht" name="bericht"></textarea>
  </section>
  <button type="submit">Verzenden</button>
</form>

Dit voorbeeld gebruikt een logische lay-out met duidelijke secties voor elke groep invoervelden. De labels staan consistent aan de linkerkant van de invoervelden, en de vereiste velden zijn duidelijk gemarkeerd.

Stap 5: Label formulierbesturingselementen correct

Gebruik de “Label”-tag voor formulierbesturingselementen. Label elk besturingselement expliciet door de tekst die ermee geassocieerd is in een <label for=””> tag te sluiten. Voeg vervolgens een ID-attribuut toe aan het invoerveld en maak zowel de ID als FOR gelijk aan dezelfde waarde.

Voorbeeld

<form>
  <label for="naam">Naam:</label>
  <input type="text" id="naam" name="naam" aria-label="Uw naam">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" aria-label="Uw e-mailadres">
  <button type="submit">Verzenden</button>
</form>

Dit voorbeeld gebruikt de “Label”-tag om de labels voor de invoervelden te labelen. De ID-attributen zijn gelijk aan de namen van de invoervelden, zodat schermuitleesprogramma’s de labels kunnen matchen met de juiste invoervelden.

Stap 6: Test met schermuitleesprogramma’s

Gebruik schermuitleesprogramma’s zoals NVDA, JAWS, of VoiceOver om het formulier te testen. Zorg ervoor dat het schermuitleesprogramma de inhoud op een begrijpelijke manier voorleest en dat alle interactieve elementen toegankelijk zijn.

Stap 7: Werk via internationale toegankelijkheidsstandaarden

Er zijn verschillende internationale toegankelijkheidsstandaarden die je kunt gebruiken om ervoor te zorgen dat je formulieren toegankelijk zijn voor mensen met een visuele beperking, ongeacht de taal die ze spreken. Enkele voorbeelden van deze standaarden zijn WCAG 2.1 en EN 301 549.

Stap 8: Bediening met een toetsenbord

Formulieren moeten ook toegankelijk zijn voor mensen die een toetsenbord gebruiken, bijvoorbeeld mensen die een schermuitleesprogramma gebruiken of mensen met een beperking aan hun arm of hand. Zorg ervoor dat alle interactieve elementen met het toetsenbord kunnen worden bediend.

Extra tips

In aanvulling op de bovenstaande stappen en tips, zijn er nog een aantal andere dingen die je kunt doen om je formulieren toegankelijker te maken. Hier zijn enkele voorbeelden:

Alternatieve tekst voor afbeeldingen: Voeg alternatieve tekst toe aan afbeeldingen om ervoor te zorgen dat mensen met een visuele beperking de informatie op de afbeeldingen begrijpen. Dit is cruciaal voor een volledig begrip van de inhoud.
ARIA-attributen gebruiken: Maak gebruik van ARIA-attributen om extra informatie aan schermuitleesprogramma’s te verstrekken. ARIA-attributen kunnen de functie van formulierelementen beschrijven, de volgorde van formulierelementen bepalen en andere belangrijke informatie verstrekken.
Beschrijvende tekst voor elke sectie: Voeg beschrijvende tekst toe voor elke sectie van het formulier. Dit helpt gebruikers om te begrijpen wat elke sectie inhoudt, zelfs als ze de labels niet kunnen zien. Het vergroot de begrijpelijkheid van het formulier.
Consistente labels voor formulierelementen: Gebruik duidelijke en consistente labels voor alle formulierelementen. Consistentie vergemakkelijkt het begrip en gebruik van het formulier, vooral voor mensen met een visuele beperking.
Contrast tussen tekst en achtergrond: Zorg voor voldoende contrast tussen tekst en achtergrond. Een goed contrast verbetert de leesbaarheid en is van bijzonder belang voor mensen met een verminderd zicht.
Duidelijke en beknopte teksten: Gebruik duidelijke en beknopte teksten. Vermijd jargon en technische termen die mensen met een visuele beperking mogelijk niet begrijpen. Dit bevordert de algemene begrijpelijkheid van het formulier.
Internationale taalopties: Bied gebruikers de mogelijkheid om het formulier in verschillende talen te bekijken. Dit is vooral handig voor gebruikers die de standaardtaal van het formulier niet spreken.
Optie om het formulier af te drukken: Bied een optie om het formulier af te drukken. Zorg ervoor dat het geprinte formulier ook toegankelijk is door de lay-out en het lettertype aan te passen voor een betere leesbaarheid.
Testen met toegankelijkheidsscanners: Gebruik een toegankelijkheidsscan om je formulieren te controleren op mogelijke toegankelijkheidsproblemen. Verschillende toegankelijkheidsscanners, zoals axe, TaWk en WAVE, kunnen helpen bij het identificeren van verbeterpunten.
Toetsenbordnavigatie optimaliseren: Optimaliseer toetsenbordnavigatie, zodat alle interactieve elementen met het toetsenbord kunnen worden geactiveerd en genavigeerd. Dit is essentieel voor mensen die geen muis kunnen gebruiken.

Verplichte velden alleen indien essentieel: Gebruik verplichte velden alleen als ze essentieel zijn voor het verwerken van het formulier. Dit helpt gebruikers om fouten te voorkomen en maakt het invullen van het formulier eenvoudiger.

Meer informatie

Tips om je website toegankelijk te maken voor blinden en slechtzienden

Deel dit:

Advertenties

Laatst bijgewerkt op 20 november 2023 – 07:19

Web & Social Media