telefoon pictogram +31 88 678 3519

afbeelding toetsenbord met tekst wcag richtlijnen

 

Richtlijnen conform de WCAG

Vanaf september 2020 dienen alle websites van de overheidsinstanties, voor mensen met een visuele of auditieve beperking, toegankelijk te zijn. Voor mobiele apps ligt de deadline op medio 2021. Met deze beslissing zetten zowel de Nederlandse en Belgische overheid de Europese Richtlijn voor de toegankelijkheid van websites en apps van overheidsinstanties om in nationale wetgeving.

 

Afbeeldingen

Met afbeeldingen kunt u de aandacht trekken, een tekst illustreren of complexe gegevens inzichtelijk maken. Afbeeldingen zijn een nuttig en veelgebruikt middel om informatie over te dragen of te verrijken. Juist daarom is het essentieel om ze voor iedereen toegankelijk te maken.

Door afbeeldingen te voorzien van een tekstueel alternatief maakt u ze dus toegankelijk voor bezoekers die de afbeeldingen niet kunnen zien. Ook zoekmachines zoals Google maken gebruik van tekstalternatieven bij het indexeren van websites.

Eenvoudig samengevat:

  • Geef afbeeldingen die informatie overdragen een tekstueel alternatief
  • Maak CAPTCHA’s toegankelijk voor iedereen.
  • Combineer afbeeldingen en teksten die naar dezelfde pagina linken.
  • Geef afbeeldingen die als link worden gebruikt een alt-tekst die het doel van de link beschrijft.
  • Zorg dat decoratieve afbeeldingen door hulptechnologieën genegeerd kunnen worden.
  • Geef een langere beschrijving als de alt-tekst niet voldoende ruimte biedt.
  • Gebruik geen afbeeldingen van tekst maar echte tekst.

 

Animatie en verandering

Met bewegende plaatjes en knipperende onderdelen kunt u de aandacht trekken of een ingewikkeld onderwerp begrijpelijk maken. Daarnaast kunt u delen van een pagina of een hele pagina automatisch laten veranderen, bijvoorbeeld om informatie te verversen. Zorg bij al deze vormen van beweging en verandering voor een toegankelijke aanpak.

Eenvoudig samengevat:

  • Laat elementen niet zodanig flitsen dat bezoekers er een toeval door kunnen krijgen.
  • Zorg dat bezoekers automatische veranderingen aan een webpagina uit kunnen zetten.
  • Zorg dat bezoekers alles dat knippert, scrollt of beweegt kunnen uitzetten.

 

Audio

Vaak kunt u informatie met een geluidsfragment of filmpje op een snelle, eenvoudige manier overbrengen. Zo is een instructievideo voor veel bezoekers gemakkelijker te volgen dan een lange tekstuele handleiding. Voeg altijd alternatieven toe voor bezoekers die de beelden en geluiden niet kunnen zien of horen. Voor audio en video zijn uitzonderingen onder het huidige en toekomstige beleid beschreven onder specifieke situaties en uitzonderingen.Denk aan bijvoorbeeld live uitzendingen.

Eenvoudig samengevat:

  • Geef audio en video een kort tekstueel alternatief.
  • Voeg ondertiteling toe aan filmpjes.
  • Voeg een audiobeschrijving toe aan bewegend beeld en filmpjes.
  • Plaats een transcript voor bewegend beeld, geluid en filmpjes.
  • Maak CAPTCHA’s toegankelijk voor iedereen.
  • Audio of video als media-alternatief voor tekst.
  • Zorg dat geluid dat automatisch begint te spelen uitgezet kan worden of binnen 3 seconden stopt.

 

Formulieren

Een formulier nodigt uit tot interactie. Zorg er daarom voor dat alle bezoekers van uw website daadwerkelijk in staat zijn het formulier te gebruiken. Dat bereikt u door een combinatie van techniek, vormgeving en tekst.

Eenvoudig samengevat:

  • Geef een alternatieve tekst aan afbeeldingen die als knop worden gebruikt.
  • Geef duidelijke instructies bij invoervelden.
  • Zorg dat bezoekers geen last hebben van een tijdslimiet.
  • Gebruik niet alleen visuele aanwijzingen in formulieren.
  • Laat een formulierveld dat focus krijgt of ingevuld wordt niet zomaar een grote gebeurtenis in gang zetten.
  • Toon waar de fout zit en geef suggesties ter verbetering.
  • Zorg dat de bezoeker fouten kan voorkomen bij belangrijke formulieren.
  • Zorg dat formulieren met het toetsenbord te bedienen zijn.

 

Navigatie

De mogelijkheid om te navigeren maakt het internet wat het is: een web aan informatie die via links met elkaar verbonden is. De navigatie is dan ook een zeer belangrijk onderdeel van een website. Als u die toegankelijk maakt zet u de deur open naar alle andere informatie die u te bieden hebt.

Eenvoudig samengevat:

  • Zorg dat onderdelen die vaak herhaald worden overgeslagen kunnen worden.
  • Schrijf een linktekst waaruit het doel van de link duidelijk af te leiden is.
  • Laat de items van navigatie-blokken telkens in dezelfde volgorde terugkomen.
  • Combineer afbeeldingen en teksten die naar dezelfde pagina linken.
  • Geef afbeeldingen die als link worden gebruikt een alt-tekst die het doel van de link beschrijft.
  • Zorg dat elke pagina van een website op meerdere manieren te vinden is.
  • Open links niet in een nieuw venster, behalve in specifieke gevallen.

 

PDF documenten

Alle eisen die voor webpagina’s gelden zijn ook op pdf bestanden van toepassing. De manier waarop u deze toepast wijkt wel af. Voor pdf bestanden gebruikt u vaak heel andere technieken dan voor ‘gewone’ webpagina’s. Het toegankelijk maken van kantoor-bestandsformaten zoals pdf kan lastig zijn, vooral als het om grote hoeveelheden gaat.

Eenvoudig samengevat:

  • Geef informatieve afbeeldingen in pdf een tekstueel alternatief.
  • Zorg dat decoratieve onderdelen van een pdf document genegeerd kunnen worden.
  • Maak bladwijzers in pdf documenten.
  • Zorg voor een correcte tab- en leesvolgorde in pdf documenten.
  • Markeer koppen op de juiste wijze in pdf documenten.
  • Geef in het pdf bestand aan wat de taal van de tekst is.
  • Geef de titel aan van een pdf document.
  • Markeer lijsten op de juiste wijze in pdf bestanden.
  • Geef duidelijke instructies en foutmeldingen bij invoervelden in een pdf formulier
  • Markeer in een pdf document woorden en zinnen die in een andere taal zijn geschreven.
  • Plaats links en linkteksten op de juiste wijze in pdf documenten.
  • Leg de structuur van tabellen vast in pdf documenten.
  • Plaats formulier-elementen op de juiste wijze in pdf documenten. Externe bronnen over pdf documenten.

 

Tabellen

Met een tabel kunt u de verbanden tussen verschillende gegevens inzichtelijk maken. Voor wie de tabel kan zien zijn die relaties vaak snel duidelijk. Maar om ze ook voor bezoekers die hulptechnologie gebruiken waarneembaar te maken moet u de juiste HTML-code toepassen.

Eenvoudig samengevat:

  • Gebruik de juiste HTML-code voor tabellen.
  • Plaats een bijschrift of een samenvatting voor een datatabel.
  • Associeer tabelkoppen met data bij complexe datatabellen.

 

Techniek en code

Veel van de toegankelijkheidseisen hebben te maken met techniek en code. Als een website ‘onder water’ goed in elkaar zit, dan is de basis voor toegankelijkheid gelegd. Eenvoudig samengevat:

  • Gebruik de juiste HTML-elementen voor structuur en tekst.
  • Geef in de code aan wat de taal van de webpagina is .
  • Scheid inhoud en structuur van presentatie.
  • Zorg dat alle functionaliteiten via het toetsenbord te bereiken en bedienen zijn, in logische volgorde.
  • Zorg dat onderdelen die vaak herhaald worden overgeslagen kunnen worden.
  • Zorg dat de inhoud op een logische volgorde gelezen kan worden door alle bezoekers.
  • Zorg dat tekst 200 procent groter kan worden gemaakt zonder verlies van inhoud of functionaliteit.
  • Pas de programmeertaal die u gebruikt volgens de regels van die taal toe.
  • Geef onderdelen die dezelfde functie hebben op verschillende pagina’s telkens dezelfde beschrijving of vormgeving.
  • Als u zelf interactieve functies ontwikkelt, zorg dan dat hulp-technologieën hier de naam, rol en waarde van kunnen bepalen.

 

Tekst

Op zichzelf is tekst al heel toegankelijk. Digitale tekst kan met hulptechnologie omgezet worden in spraak of braille. Ook zoekmachines begrijpen digitale tekst zonder problemen. Maar wilt u alle mogelijkheden van tekst benutten, dan geeft u de structuur van die tekst in code aan en zorgt u voor duidelijke koppen en titels.

Eenvoudig samengevat:

  • Gebruik de knoppen van de editor voor de structuur.
  • Draag informatie niet alleen over door vormgeving van tekst.
  • Gebruik de juiste code om een wisseling in tekstrichting en anderstalige woorden en zinnen te markeren.
  • Geef webpagina's een titel die de inhoud van de pagina beschrijft.
  • Maak geen kolommen, tabellen of speciale teksteffecten met spaties of tabs.
  • Gebruik koppen die het onderwerp of doel van de onderliggende inhoud beschrijven.

 

Vormgeving

Kleur, vorm en plaatsing van elementen op een webpagina bepalen niet alleen de uitstraling van die pagina. Met de juiste vormgeving kunt u uw boodschap beter overdragen. Door op een paar punten te letten zorgt u dat de vormgeving de toegankelijkheid niet in de weg staat.

Eenvoudig samengevat:

  • Gebruik niet alleen kleur, vorm of locatie om informatie over te dragen.
  • Gebruik niet alleen visuele aanwijzingen in formulieren.
  • Gebruik voldoende contrast.
  • Draag informatie niet alleen over door vormgeving van tekst.
  • Laat de items van navigatie-blokken telkens in dezelfde volgorde terugkomen.
  • Plaats vaste pagina-onderdelen telkens in dezelfde volgorde.