Direct naar de inhoud Direct naar het menu Direct naar de zoekfunctie Direct naar de footer

Digitale toegankelijkheid: richtlijnen en toetsen

Een website toegankelijk maken levert voordelen op voor alle gebruikers. Richtlijnen helpen om te toetsen of je website toegankelijk is. Maar hoe toets je eigenlijk jouw eigen website? In dit artikel lees je meer over de standaarden en het toetsen.

Richtlijnen

Een slechtziende muziekliefhebber die graag naar een concert wil. De buurvrouw die nog niet bekend is met het internet. Een treinreiziger die een video wil bekijken in een drukke coupé. Iedereen heeft zijn eigen beperkingen. Daarom zijn er richtlijnen opgesteld die helpen een website toegankelijk te maken voor een brede groep gebruikers.

Deze internationale richtlijnen zijn vastgelegd in de Web Content Accessibility Guidelines (WCAG). Deze richtlijnen zijn ontwikkeld na uitgebreid onderzoek en samen met verschillende gebruikers. De WCAG kent drie niveaus, A, AA en AAA. Daarbij hebben de richtlijnen van niveau A impact op de grootste groep gebruikers en niveau AAA op een specifieke groep. De AAArichtlijnen zijn  op technisch vlak het meest uitdagend. Voor de (semi-)overheid in Nederland zijn de richtlijnen van niveau A en AA verplicht.

Op de website DigiToegankelijk vind je een overzicht van alle richtlijnen met een bijbehorende eenvoudige uitleg. De eisen zijn gegroepeerd rond onderwerpen, zoals afbeeldingen, tekst of geluid en video. Ben je bijvoorbeeld van plan binnenkort een video te plaatsen op de website, dan vind je alle informatie over het toegankelijk maken van een video bij elkaar.

Praktijkvoorbeeld DEN

Ook bij DEN willen we de website beter toegankelijk maken. Hier lichten we voor een drietal onderwerpen uit wat we aan de hand van de richtlijnen hebben aangepast.

Afbeeldingen

Draagt een afbeelding informatie over, zoals een infographic of een grafiek? Zorg dan voor een alternatief. Dit kan door in het CMS een alternatieve tekst, afgekort tot alt-tekst, op te geven. Weet je niet zeker of dat in jouw CMS mogelijk is? Neem dan contact op met je websitebouwer. Is een afbeelding juist puur decoratief? Let er dan op dat hulptechnologieën deze afbeeldingen kunnen negeren. Dit kan bijvoorbeeld door de alt-tekst leeg te laten, maar dat werkt niet in elk CMS hetzelfde. Overleg daarom met je websitebouwer op welke manier je het op jouw website aan kan pakken. Op de website van DEN hebben we bijvoorbeeld knoppen met afbeeldingen. De afbeeldingen worden hier puur decoratief gebruikt, dus dienen genegeerd te worden door hulptechnologieën. 

Een voorbeeld van vier grote knoppen op de DEN website. De knoppen hebben een decoratieve foto met onderin een balk met de titel van de pagina waar de knop naar verwijst.

Voorbeeld van 'afbeeldingsknoppen' op de DEN website

Animatie & verandering

Een ander aanpassing op de website van DEN, is het carrousel met gekleurde kaarten. Op deze kaarten, die elkaar automatisch afwisselen, lichten we vaak onze nieuwste kennisartikelen of praktijkvoorbeelden uit. Zo’n bewegend element is echter niet voor alle bezoekers even handig, bijvoorbeeld een bezoeker die geen muis gebruikt. Daarom hebben we een aantal aanpassingen doorgevoerd. De beweging kan nu door de bezoeker worden stopgezet. Dit gebeurt automatisch wanneer je met de tab-toets bij het carrousel aan komt en kan handmatig wanneer je op één van de drie bolletjes klikt.

Navigatie

Een essentieel onderdeel van digitale toegankelijkheid is de navigatie van je website. Zijn alle elementen te vinden en te bereiken, zijn verwijzingen duidelijk en is de volgorde van menu-items consequent? Eén van de dingen die we hiervoor op de website van DEN hebben aangepast, is het toevoegen van zogenaamde ‘skiplinks’. Deze links geven de gebruiker de mogelijkheid direct naar een specifiek onderdeel op de pagina te navigeren, zonder het gebruik van de muis. Wil je zien hoe dat werkt? Open een nieuwe pagina op de website van DEN en druk op de tab-toets, de ‘skiplinks’ verschijnen dan vanzelf.

Automatisch testen

De richtlijnen omschrijven waaraan je moet voldoen wanneer je je website toegankelijk wilt maken. De richtlijnen zeggen echter niets over de manier waarop je toetst. Een website toets je zowel (semi-)automatisch als handmatig.

De automatische tests controleren bijvoorbeeld of er voldoende contrast is tussen achtergrond- en tekstkleur. Deze tests controleren ook of de HTML-code juist gebruikt is, of formulieren toegankelijk zijn en of er alternatieve teksten bij afbeeldingen zijn toegevoegd voor gebruikers die de afbeelding niet kunnen zien.

De resultaten van deze tests geven veelal technische informatie en zijn daarom vooral een goed hulpmiddel voor webbouwers. Deze automatische tests voer je bij voorkeur al uit vanaf het begin van het ontwikkeltraject. Voorbeelden van tools die veel verschillende richtlijnen toetsen, zijn Axe en Google Lighthouse. ChromeLens is een voorbeeld van een tool die specifiek gericht is op visuele beperkingen. Als je niet zeker weet of deze tests door je webbouwer zijn gebruikt, vraag dan na of ze deze tests kunnen uitvoeren en vraag naar de uitkomsten.

Handmatig testen

Een automatische test controleert of een afbeelding een alternatieve tekst heeft, maar enkel een mens is in staat te beoordelen of deze alternatieve tekst ook zinnig is. Automatische tests geven dus geen compleet beeld. Ongeveer 80% van alle richtlijnen moet handmatig - door een mens - gecontroleerd worden. Veel testen kunnen door iemand van de eigen organisatie worden uitgevoerd.

Andere voorbeelden van handmatige controles zijn: het navigeren door de website met behulp van enkel het toetsenbord, het taalgebruik en de mogelijkheid tot inzoomen. De webredacteur uit je eigen organisatie kan de teksten of het taalgebruik op je website controleren en beoordelen of deze voldoen aan de bovengenoemde richtlijnen voordat een nieuw artikel geplaatst wordt. Twee voorbeelden om dat te illustreren:

  • Mensen met een visuele beperking gebruiken software die een website voorleest. Zij springen soms van link naar link om de informatie te vinden die zij zoeken. Welke links heb jij opgenomen in een artikel. Zijn de linkteksten beschrijvend? Vergelijk “Aanmelden voor de conferentie kan hier” met “Vanaf nu kun je je aanmelden voor de conferentie”. Stel je voor dat je van link naar link springt en enkel “hier” voorgelezen krijgt, dan is onduidelijk waar deze link naar toe gaat. Beter is om “aanmelden voor de conferentie” als linktekst te gebruiken.
  • Mensen met een visuele beperking zien afbeeldingen niet of niet goed. Zij gebruiken een alternatieve browser die de website voorleest. Welke afbeeldingen heb jij opgenomen in het artikel op je website? Zijn die decoratief of hebben die een duidelijke functie, zoals een infographic. In dat laatste geval geef je de afbeelding een alternatieve tekst mee die voorgelezen wordt. Deze alternatieve tekst beschrijft de inhoud of het doel van de afbeelding.

Ervaringsdeskundigen

Degene die het beste beoordelen of jouw inspanning een meer toegankelijke website oplevert, zijn de gebruikers zelf. Wil je meer weten hoe je de expertise van ervaringsdeskundigen in kan zetten voor het toegankelijk maken van je website?

Samenvatting en tips

De internationale WCAG richtlijnen en de Nederlandse variant DigiToegankelijk helpen bij het toegankelijk maken van jouw website. De toetsing van de richtlijnen dient automatisch én handmatig te gebeuren. Het is voor een mens niet mogelijk om alle code te controleren en daarom zijn automatische tests zo waardevol. Aan de andere kant is het voor een computer slechts mogelijk om ongeveer 20% van de richtlijnen te testen. Websitebouwers, webredacteuren, vormgevers en de uiteindelijke gebruikers werken samen aan de toegankelijkheid van jouw website.

Wil je aan de slag met het toegankelijk maken van jouw website? Een aantal tips: 

  • Bespreek toegankelijkheid met de webbouwer en vormgever. Zij kunnen een automatische test uitvoeren en daarmee een deel van de verbeterpunten in kaart brengen.
  • Redacteuren helpen bij het toegankelijk maken van de inhoud. De tips op DigiToegankelijk geven een overzicht van richtlijnen met betrekking tot de inhoud.
  • Voer zelf een aantal tests uit, kijk bijvoorbeeld eens bij de tips in het DEN artikel over toegankelijkheid en de gebruikers.
  • DEN zal de komende tijd ook workshops organiseren over het toegankelijk maken van je website. Houd de nieuwsbrief in de gaten voor de eerstvolgende datum.