In 10 stappen naar een toegankelijke website

Digitale toegankelijkheid

Voor ongeveer 25% van de bevolking in Nederland zijn websites in meer of mindere mate niet toegankelijk. Dit zijn bezoekers met een visuele handicap, doven en slechthorenden, Nederlanders met taalproblemen en lichamelijk gehandicapten. Voor hen is het niet vanzelfsprekend dat zij toegang hebben tot alle content. De WCAG (Web Content Accessibility Guidelines) zorgt voor digitale toegankelijkheid voor iedereen.

Alhoewel de WCAG bestaat uit veel technische instructies en termen hebben wij een lijst opgesteld van 10 stappen waarin duidelijk wordt hoe een website kan voldoen aan de WCAG.

1. Maak je content leesbaar voor laaggeletterden.

Schrijf je content op B1 niveau. Dat is een taalniveau waarmee 80% van de bevolking jouw teksten kan begrijpen. Deze teksten bestaan uit veelgebruikte woorden, maar ook moeilijkere taal die zij kennen door bijvoorbeeld werk.
Er zijn in totaal 6 taalniveaus. Taalniveau B1 is het derde taalniveau en daarmee zijn de teksten ook direct begrijpelijk voor mensen met hogere taalniveaus (B2, C1, en C2). 

2. Gebruik kleurcontrast

Zorg dat het kleurcontrast hoog genoeg is of vergroot kan worden, zodat de content zichtbaar en leesbaar is voor mensen met een visuele handicap. Ongeveer een miljoen Nederlanders is kleurenblind of slechtziend. De manier waarop zij kleuren zien ,en met name wanneer kleur op kleur gebruikt wordt, kan er voor zorgen dat er te weinig  contrast is. Om er voor te zorgen dat ook zij de website goed kunnen ervaren, is een contrast functie wenselijk.
Met het inschakelen van de contrast functie maak je het contrast tussen kleuren extremer, zodat ook bezoekers die bijvoorbeeld kleurenblind zijn alle content op jouw website kunnen zien en lezen.

3. Zorg dat slechtzienden de tekst kunnen vergroten

Voor slechtzienden is de standaard tekstgrootte van teksten vaak niet groot genoeg om (goed) te kunnen lezen. Om hen toch de content van jouw website te kunnen laten lezen, is het wenselijk om functie toe te voegen waarmee zij de tekst kunnen vergroten naar een formaat die voor hen prettig leesbaar is.

4. Bediening website met muis en toetsenbord

Zorg dat mensen met motorische beperking de website niet alleen met de muis kunnen bedienen, maar ook het toetsenbord kunnen gebruiken. Stel je arm en handfunctie zijn beperkt, dan is navigeren met een muis een uitdaging. Door de website toetsenbord toegankelijk te maken, kan een bezoeker met een motorische beperking in arm en/of hand door middel van een toetsenbord door je website navigeren. Daarbij is onder andere belangrijke dat duidelijk is waar de focus ligt en dat submenu’s en pop-ups goed te bedienen zijn. Ook is het verstandig een ‘verborgen’ knop toe te voegen waarmee het menu makkelijk overgeslagen kan worden, zodat niet het hele menu door te tabben hoeft te worden.

5. Implementeer een voorleesfunctie

Geef blinden, slechtzienden en ook laaggeletterden de mogelijkheid om de content voor te laten lezen. Door middel van een voorleesfunctie wordt de content op jouw website pagina voorgelezen. Hiervoor zijn verschillende plugins te gebruiken zoals bijvoorbeeld Readspeaker.
Het voordeel van een voorleesfunctie is dat laaggeletterden maar ook migranten die teksten lastig kunnen lezen de tekst kunnen laten voorlezen wat vaak begrijpelijker is.

6. Gebruik de juiste techniek

Zorg er voor dat je website technisch goed gebouwd is, zodat bezoekers die schermlezers gebruiken de mogelijkheid hebben om door de website te navigeren en de informatie te vinden die zij zoeken. Bezoekers die schermlezers gebruiken willen zo goed mogelijk weten waar ze zijn, wat ze doen en met wat voor content ze te maken hebben. 
Hiervoor is het belangrijk dat de website technisch goed in elkaar en dat de pagina’s chronologisch goed zijn opgebouwd. Gebruik de kopteksten op de juiste manier, maak gebruik van lijsten wanneer dit kan en voorzie acties binnen de website van extra informatie zodat blinden en slechtzienden weten wat er gebeurd.

7. Maak je content vindbaar

Zorg dat de content op verschillende manieren te vinden is. Een overzichtelijk menu is belangrijk, maar daarnaast wil je dat de gebruiker ook op andere manieren bij jouw content kan komen. Denk hierbij aan een zoekfunctie die op elke pagina beschikbaar is en aan een sitemap pagina waar alle (belangrijke) pagina’s overzichtelijk in een lijstweergave worden getoond.

8. Gebruik alt-tags

Beschrijf de afbeeldingen die op de website getoond worden, zodat een bezoeker die blind of slechtziend is begrijpt wat er op de afbeelding te zien is. Foto’s ondersteunen en versterken de inhoud en beleving van de website. Om blinden en slechtzienden te laten begrijpen wat er op de foto te zien is bestaat er de alt-tag. De alt-tag is de technische term voor de beschrijving van de afbeelding.
Het is de bedoeling dat je de foto zo duidelijk mogelijk beschrijft, beschrijf letterlijk wat je ziet.

9. Ondertitel video's

Zorg dat video’s waarin gesproken wordt voorzien is van ondertiteling, zodat doven en slechthorende de video kunnen begrijpen. Beeld zegt meer dan woorden, helemaal als het om video gaat. Helaas wordt vaak vergeten dat niet iedereen de inhoud van de video tot zich kan nemen. Let er bij het plaatsen van een video op dat er ondertiteling aanwezig is en gebruik een voice-over om bezoekers met een visuele handicap de boodschap van de video mee te geven.

10. Bied mogelijkheid voor een dyslexie lettertype aan

Gebruik een voor de bezoeker zelf in te schakelen dyslexie lettertype, zodat de teksten makkelijker te lezen zijn voor mensen met dyslexie. Bij het kiezen een lettertype hebben we tegenwoordig de keuze uit duizenden lettertypes. Er zit er altijd wel één bij die perfect aansluit bij je huisstijl. Echter, niet elk lettertype is even prettig leesbaar, helemaal niet als je dyslexie hebt. Een grote groep Nederlanders heeft dyslexie, speciaal voor hen is er een lettertype ontwikkelt die lezen makkelijker maakt.

Door op je website de mogelijkheid te bieden om dit lettertype in te schakelen maak je de content dus toegankelijker.

Auteur

Stefan van 't Hul

Developer / UX designer

Stefan van 't Hul

WCAG