Best practices digitale toegankelijkheid

 Laatst bijgewerkt: 10 April 2022

Voldoen aan de succescriteria van WCAG maakt je website al goed toegankelijk. In het algemeen is de eis om niveau AA te halen, maar niet te proberen om aan alle criteria van niveau AAA te voldoen.

In WCAG, de web content accessibility guidelines is uitgebreid gedocumenteerd hoe en waarom je aan een succescriterium moet voldoen. Ondanks de zeer uitgebreide documentatie en de vele regels onder elk succescriterium is WCAG nog lang niet volledig.

Klikbare afbeeldingen

Ofschoon je met aria-label een naam toe kunt kennen aan een de link van een klikbare afbeelding is het gebruik van het img-element met een alt-attribuut aan te raden. Als de afbeelding niet laadt of nog aan het laden is is de alt-tekst al zichtbaar zodat een bezoeker de link kan gebruiken voordat de afbeelding getoond wordt.

Koppenstructuur

De volgende afwijkingen bij het gebruik van koppen worden in WCAG niet direct onvoldoende:

  • Ontbrekende h1-element
  • Overslaan van kopniveaus
  • Meer dan 1 h1-element

Mensen die gebruik maken van een screenreader kunnen vaak met de software de koppenstructuur opvragen om zo overzicht van de inhoud te krijgen. Tevens kunnen ze eenvoudig door de koppen heen navigeren. Bijvoorbeeld door alle koppen met niveau 2. Als niveau 2 ontbreekt is de kans aanwezig dat de bezoeker niet verder kijkt naar volgende niveaus.

Knoppen en links

Het is mogelijk om met het attribuut role aan een link de rol button toe te kennen. Dat werkt. Echter knoppen zijn te bedienen met de Enter-toets en met de spatiebalk. Links zijn alleen te bedienen met de Enter-toets. Als een screenreader de knop aankondigt is de kans aanwezig dat de bezoeker de knop met de spatiebalk probeert te bedienen. En dat werkt niet. Maak direct gebruik van het button-element.

Uitgeschakelde verzendknop

Je komt ze wel eens tegen. De knop van een formulier wordt pas actief als je alles (goed) hebt ingevuld. Als je pech hebt verschijnt er ook geen duidelijke melding waar je de fout hebt gemaakt. Het is beter om altijd de knop actief te houden. Iemand die het hele formulier denkt te hebben ingevuld kan op verzend klikken. Vervolgens verschijnen de meldingen en kan d ebezoeker gericht invoerfouten herstellen.

Accordions

Content die je pas ziet als je iets openklapt. Het grootste nadeel is dat je via je zoekmachine op de pagina terecht komt en met Ctrl+F naar de tekst zoekt die op die pagina staat, maar niks vindt. Ook met het oog door de pagina scrollen is onhandig als je naar specifieke tekst zoekt die je niet kunt vinden. Gebruik accordions daarom lieverniet. En als het moet zorg dan bijvoorbeeld voor een knop waarmee je in een keer alles kan opengooien.

Alleen tekst vergroten

In SC 1.4.4 Herschalen van tekst en SC 1.4.10 Reflow wordt hoofdzakelijk gesproken over het vergroten van de alles op de pagina. Vroeger werd bij inzoomen enkel de tekst vergroot. Tegenwoordig wordt vrijwel alleen met de standaard zoomfunctie van browsers getest en in sommige browsers bestaat het alleen vergroten van tekst niet eens meer. Het is goed om ook het vergroten van elleen de tekst tot 200% te onderzoeken.

Met HTML5 is het klikken op zogenaamde cards geïntroduceerd. Een card bestaat in het algemeen uit een of meerdere van de volgende onderdelen: afbeelding, kopje, introtekstje, datum, leesmeer-link en trefwoorden of thema's waaraan het onderwerp gekoppeld is. Het klikbaar maken van de hele card is toegestaan. Maar zorg ervoor dat er een duidelijke maar korte linktekst wordt gebruikt. Via screenreaders kan je een lijst opvragen van alle links op de pagina. Het is dan prettig dat er geen lange lappen tekst in het overzicht komen te staan.

Contrast

De meeste besturingssystemen bieden mogelijkheden om de kleuren om te keren, zogenaamde dark modus of zelf kleuren uit te kiezen. Mensen die moeite hebben met bijvoorbeeld veel licht of te hoog contrast kunnen zo de website naar wens aanpassen. Hierop worden websites en webapplicaties standaard niet op onderzocht. Het is goed om ook deze varianten mee te nemen in het testen van je eindproduct.

Hoog-contrastknop

Vaak wordt dit als toegankelijk alternatief gezien. Je hoeft je niet druk te maken of je kleuren in je site hebt die niet aan de contrasteisen voldoen. En bezoekers die daar een probleem mee hebben moeten maar naar de poeplelijke zwart-wit-website kijken. Inclusief design betekent dat je bezoeker geen extra handelingen of middelen nodig heeft om je website te bezoeken. Zorg meteen voor een mooie kleurcombinatie die voor iedereen prettig is.

Nieuwe vensters/tabs

Links die een nieuw venster of tabblad opent is toegestaan. Ook is het niet nodig om daar een voorafgaande melding bij te plaatsen (SC 3.2.5 is niveau AAA). Allereerst, bied de bezoeker zelf de mogelijkheid te bepalen hoe een link geopend wordt. De bezoeker kan zelf kiezen of dit in een nieuwe venster of tabblad gebeurd. Omgekeerd heeft de bezoeker niet de mogelijkheid om het openen in een nieuw venster of tabblad te stoppen. Daarnaast geven screenreaders niet altijd door dat er een nieuwe venster of tabblad is geopend. Als de bezoeker terug wilt keren dan kan dat een probleem zijn. Biedt keuzes aan de bezoeker.

Foutmelding

Het is mogelijk om tijdens het typen controle uit te voeren of het veld al volledig voldoet. Bijvoorbeeld bij het typen van een postcode. Het advies is om deze werkwijze zoveel mogelijk te mijden. Als bij het eerste cijfer al een melding komt dat de postcode niet voldoet, kan de bezoeker al twijfelen of het cijfer correct is. Tevens leidt het erg af. Beter is om aan bij verzenden van het formulier alle meldingen weer te geven. Dan kan de bezoeker in alle rust het hele formulier invullen en daarna de fouten verbeteren.

Titels en single page applications (SPA)

Maak er een gewoonte van om bij SPA's de inhoud van het title-element van de pagina aan te passen aan de content. Bezoekers die met een screenreader door de tabbladen van de browser bladert kan de pagina dan sneller terugvinden.

Melding aantal tekens

Het is handig om bij een beperkt aantal nog mogelijke tekens weer te geven. Houd er echter rekening mee dat een screenreadergebruiker deze informatie ook wilt weten, maar dat er niet bij elke toetsaanslag voorgelezen wordt hoeveel tekens er getypt worden. Immers, de bezoeker moet zich ook kunnen focussen op de tekens die ingevuld worden.

Inline style

Je kunt in je HTML-elementen styling opnemen via het style-attribuut. Bezoekers van je website kunnen dan mogelijk niet alles met een eigen stylesheet overrulen. Voorkom daarom inline styles.

Cookiemelding

Zorg dat je cookiemelding het eerste onderdeel is wat de focus krijgt. Met name als je een cookiemelding op je website hebt die over andere content heen komt te staan.

Niveau AAA

Ofschoon niveau AAA niet verplicht is kom je er goede tips tegen zoals:

  • Gebarentaal opnemen in je video.
  • Weinig of geen achtergrondgeluid bij video of audio.
  • Grootte van het aanwijsgebied
  • Ongebruikelijke woorden, afkortingen en leesniveau

Neem zelf alle WCAG 2.1 succescriteria van niveau AAA door om te zien waar jij jou website-bezoeker mee kan helpen.