Formulieren

Een toegankelijk formulier is essentieel voor mensen die gebruik maken van voorleessoftware of enkel het toetsenbord gebruiken. Er moet rekening worden gehouden met:

  • toetsenbordtoegankelijkheid
  • instructies
  • koppelen van label en invoerveld
  • groeperen van velden
  • foutmeldingen

Het toegankelijk maken van formulieren is niet ingewikkeld.

Toetsenbordtoegankelijk

Als een formulier niet toetsenbordtoegankelijk is, dan is deze doorgaans volledig ontoegankelijk voor gebruikers van screenreaders.

Zorg ervoor dat alle functionaliteit te bedienen is met het toetsenbord. Zorg daarnaast voor een logische tabvolgorde en zichtbare focus.

Instructies

Voor het gebruiken van een formulier zijn duidelijke instructies nodig. Bijvoorbeeld het aangeven van verplichte velden of een verplicht invoerformaat.

Het aangeven van een verplichte veld kan bijvoorbeeld met een asteriks (*) of in tekst. Er moet voorafgaand aan het eerste invoerveld worden gecommuniceerd op welke manier de verplichte velden zijn aangegeven.

Net als de verplichte velden, kunnen er ook verplichte invoerformaten zijn. Denk hierbij aan een postcode of een e-mailadres dat moet worden ingevuld. Ook hierbij is het belangrijk om voor het invoerveld duidelijk te maken wat de eisen zijn aan de invoer.

Invoervelden en labels

Invoervelden omvatten tekstvelden, checkboxen, radiobuttons, en alle andere velden die zijn ontworpen voor gebruikersinvoer. Enkele voorbeelden hiervan zijn:

<input type="text">
<input type="checkbox">
<input type="radiobutton">
<input type="password">
<input type="url">
<input type="color">
<input type="date">
<input type="image">

Bij een invoerveld hoort een label. Een label geeft aan welke gegevens er worden verwacht in een invoerveld. Hiervoor wordt het HTML-attribuut <label> gebruikt. Het label en invoerveld worden gekoppeld met een for/id-koppeling:

<label for="veld1">Naam:</label>
<input type="text" id="veld1">
<label for="veld2">Woonplaats:</label>
<input type="text" id="veld2">

Een label wordt naast of boven het betreffende invoerveld geplaatst.

Een placeholder mag niet worden gebruikt ter vervanging van een label. Een placeholder kan wel zeer waardevol zijn voor velden waarvoor gegevens in een specifiek formaat nodig zijn. De placeholder kan dan worden gebruikt om te communiceren welke formaat verwacht wordt.

Groeperen van velden

Heeft het formulier meerdere secties van gerelateerde invoervelden? Gebruik dan fieldset om ze te groeperen, en legend om een label te geven voor wat dit deel van het formulier.

Foutmeldingen

Het belangrijk om een duidelijke foutmelding te geven bij een foutieve invoer.

Testen

  • Controleer of alle invoervelden een bijbehorend label hebben

In ontwikkeling.

Gerelateerde succescriteria

  • 1.3.1 Info en relaties (A)
  • 2.4.6 Koppen en labels (AA)
  • 3.2.1 Wijziging bij focus (A)
  • 3.2.2 Wijziging bij input (A)
  • 3.3.1 Fout identificatie (A)
  • 3.3.2 Labels of instructies (A)
  • 3.3.3 Foutsuggesties (AA)
  • 3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (AA)
  • 3.3.5 Hulp (AAA)
  • 3.3.6 Foutpreventie (AAA)
  • 4.1.2 Naam, rol, waarde (A)

Afbeeldingen

Bij gebruik van niet-tekstuele content op een pagina (zoals afbeeldingen, maar ook knoppen en invoervelden) hoort er een tekstueel alternatief worden gegeven.

Afbeeldingen die zijn voorzien van een tekstueel alternatief zijn toegankelijker voor mensen met een visuele beperking. Zij kunnen afbeeldingen niet visueel waarnemen maar door een beschrijving te geven krijgen zij via voorleessoftware of braille-uitvoer toch dezelfde informatie.

Alt-teksten

Een tekstueel alternatief voor afbeeldingen wordt doorgaans gegeven met behulp van het alt-attribuut. De inhoud van het alt-attribuut hangt af van het doel van afbeelding.

<img src="hond.jpg" alt="Hond speelt met een bal">

Alle img-, een area- of een input type=”image”-element moeten worden voorzien van een alt-attribuut.

Informatieve afbeelding

Een informatieve afbeelding is een afbeelding die een informatie overdraagt. Geef een informatieve afbeelding een tekstueel alternatief dat beschrijvend van aard is. De tekst moet verwoorden wat er op de afbeelding te zien is.

Geef afbeeldingen die als link worden gebruikt een alt-tekst die het doel van de link beschrijft.

Decoratieve afbeeldingen

Afbeeldingen zijn decoratief als deze niet noodzakelijk zijn voor het begrijpen van de tekst.

Gebruik voor een afbeelding die alleen ter decoratie wordt geplaatst geen alternatieve tekst. Het alt-attribuut wordt dan wel geplaatst maar het mag geen tekst bevatten.

<img src="horizontale-lijn.jpg" alt="" />

Vaak is het beter om decoratieve afbeeldingen met een stylesheet (CSS) te plaatsen.

Complexe afbeeldingen

Complexe afbeeldingen, zoals bijvoorbeeld een grafiek of infographic, kunnen doorgaans niet beknopt worden beschreven. Beschrijf complexe afbeeldingen in de omringende tekst of op een aparte pagina. Soms is een samenvatting van de grafiek voldoende.

Afbeelding als onderdeel van een link

Als een afbeelding wordt gebruikt naast een link (bijvoorbeeld een icoon om een categorie aan te duiden), dan is dit een decoratieve afbeelding. De alt-tekst zal namelijk gelijk zijn aan de linktekst. Dit wordt dubbel voorgelezen door een screenreader.

<a href="wcag.nl"><img src="logo-wcag.nl" alt="" />WCAG.nl</a>

Afbeeldingen van tekst

Afbeeldingen van tekst zijn voor mensen met een visuele beperking niet voldoende toegankelijk. Gebruik daarom geen afbeeldingen van tekst, tenzij het niet anders kan. In de meeste gevallen kan dezelfde visuele weergave worden bereikt met CSS.

Tekst kan gemakkelijk worden vergroot zonder dat de kwaliteit achteruit gaat.

Flitsen

Felle, flitsende beelden kunnen epileptische aanvallen veroorzaken. Gebruik daarom geen flitsende content.

Testen

  1. Controleer of alle informatieve afbeeldingen zijn voorzien van een gelijkwaardig tekstueel alternatief.
  2. Controleer of alle aanklikbare afbeeldingen zijn voorzien van een tekstueel alternatief dat de bestemming beschrijft.
  3. Controleer of decoratieve afbeeldingen zijn voorzien van een leeg alt-attribuut of zijn plaatst met een stylesheet (CSS).
  4. Controleer of er geen afbeeldingen van tekst zijn gebruikt.
  5. Controleer of er geen flitsende content aanwezig is.

Gerelateerde succescriteria

  • 1.1.1 Niet-tekstuele content (A)
  • 1.4.5 Afbeeldingen van tekst (AA)
  • 1.4.9 Afbeeldingen van tekst (geen uitzondering) (AAA)
  • 2.3.1 Drie flitsen of onder de drempelwaarde (A)

Toetsenbordtoegankelijk

Toetsenbordtoegankelijkheid is essentieel voor de bruikbaarheid van een website. Alle functionaliteit en informatie die toegankelijk is met een muis moet ook toegankelijk zijn met enkel het toetsenbord. Bijvoorbeeld het navigeren op de website of het invullen van een formulier.

Websites die volledig met het toetsenbord te bedienen zijn, zijn toegankelijk voor mensen die geen muis (kunnen) gebruiken. Dat zijn bijvoorbeeld mensen met een visuele of motorische beperking.

Een toetsenbord gebruiker maakt meestal gebruik de tabtoets om te navigeren door alle links, knoppen, invoervelden, en multimedia.

Focus

Als er met het toetsenbord over de pagina wordt genavigeerd dan moet dit visueel zichtbaar zijn. Hierdoor kan men zien waar men zich op de pagina bevindt. Dit wordt de focus of de toetsenbord-focus genoemd.

Een focus-indicator is standaard aanwezig in een webbrowser en wordt standaard weergegeven met een outline. Met CSS kan de standaard outline visueel beter zichtbaar worden gemaakt.

Tabvolgorde

De volgorde waarin onderdelen van de webpagina focus krijgen moet logisch zijn als er met het toetsenbord wordt genavigeerd. Als de visuele volgorde van de onderdelen gelijk is aan de volgorde in de broncode dan is de focusvolgorde vaak ook logisch.

Skiplink

Voor mensen die enkel het toetsenbord gebruiken of die gebruik maken van hulptechnologieën zoals voorleessoftware of braille-uitvoer, is het belangrijk dat zij onderdelen die vaak herhaald worden kunnen overslaan. Denk hierbij aan de navigatiebalk van een website of andere herhalende content. Deze zijn vaak groot waardoor het lang duurt voordat de  

Blokken overslaan kan door middel van zogenaamde ‘skiplinks’. Dit is een link op de pagina die direct leidt naar een anker met de belangrijkste content van de pagina. Een skiplink is vaak alleen zichtbaar op het moment dat de link focus krijgt door er met de tabtoets naar te navigeren.

Testen

  1. Controleer of alle pagina functionaliteit te bedienen is met de toetsen tab, enter, spatie, escape, en de pijltoetsen.
  2. Controleer of de focus van de toetsenbord altijd zichtbaar is.
  3. Controleer of de focus zich in een logische volgorde over de pagina beweegt.
  4. Controleer of de focus niet blijft steken op een item of groep van items.

Gerelateerde succescriteria

  • 1.3.2 Betekenisvolle volgorde (A)
  • 2.1.1 Toetsenbord (A)
  • 2.1.2 Geen toetsenbordval (A)
  • 2.1.3 Toetsenbord (geen uitzondering) (AAA)
  • 2.1.4 (A)
  • 2.4.1 Blokken overslaan (A)
  • 2.4.3 Focus volgorde (A)
  • 2.4.7 Focus zichtbaar (AA)

Vormgeving

Er zijn twee belangrijke aandachtspunten met betrekking tot de toegankelijkheid van kleur en contrast, namelijk kleurcontrast en kleurafhankelijkheid. 

Gebruik van kleur

Kleur is een goede manier voor het overbrengen van informatie maar mensen met een visuele beperking hebben beperkte of zelfs geen toegang tot deze informatie. Denk hierbij aan kleurenblindheid of blindheid.

Zorg er daarom voor dat kleur niet wordt gebruikt als enige visuele manier om informatie over te brengen. Maak ook gebruik van aanvullende manieren zoals het onderstrepen van een linktekst en het markeren van verplichte velden met een asterisk (*).

Contrast

Een goed contrast tussen tekstkleur en achtergrondkleur is belangrijk om content toegankelijk te maken voor mensen met een visuele beperking zoals kleurenblindheid.

WCAG 2.1 vereist op niveau AA een contrastverhouding tussen tekst en achtergrond van ten minste 4,5:1.

De richtlijnen worden soepeler als het gaat om grote of vetgedrukte tekst omdat deze gemakkelijker te lezen zijn. Een lettergrootte van 18pt of groter of 14 dikgedrukt vereist een contrastverhouding van ten minste 3:1.

Er zijn veel tools beschikbaar om de contrastverhouding te controleren:

Testen

  • Controleer of kleur niet als enige visuele manier wordt gebruikt om informatie over te brengen.
  • Controleer met een contrast checker de contrastverhouding tussen test en achtergrond.

Gerelateerde succescriteria

  • 1.4.1 Gebruik van kleur (A)
  • 1.4.3 Contrast (minimum) (AA)
  • 1.4.6 Contrast (versterkt) (AAA)