De ultieme toegankelijkheids-checklist - 19 tips om je website wcag 2.1-proof te maken
Voor wie zijn deze tips?
Een website volgens WCAG 2.1-richtlijnen opzetten is ten eerste een taak die bij de ontwerper en bouwer van je website ligt. Je kunt nog zo je best doen als eigenaar van een website, maar als je vormgever niet weet welk contrast er nodig is of als de ontwikkelaar code met daarin fouten oplevert, dan krijg je nooit een toegankelijke website. Ontwerpers en ontwikkelaars moeten zich verdiepen in alle richtlijnen, te vinden op de website van het W3C.
Andersom is het ook zo dat de bouwer van je website aan alle richtlijnen kan voldoen, maar dat jij als eigenaar, marketeer of communicatiemedewerker de website verkeerd inricht of de content niet op de juiste manier plaatst.
Met deze checklist richten we ons daarom op degenen die de website moeten vullen en misschien nog geen ervaring hebben met toegankelijke websites en niet de tijd hebben om alle richtlijnen door te nemen.
Is een toegankelijke website verplicht?
Alleen overheidsinstanties zijn wettelijk verplicht om een toegankelijke website aan te bieden die voldoet aan de WCAG 2.1-richtlijnen.
Dat is eigenlijk al heel lang zo, maar gaandeweg is de regelgeving hierin verder verscherpt. In de laatste aanscherping in 2018 is een tijdelijk besluit opgenomen waarin staat dat overheidsinstanties verplicht worden om hun websites en mobiele applicaties toegankelijk te maken en een publieke toegankelijkheidsverklaring moeten publiceren.
Aan dit laatste voldoen de meeste overheidswebsites inmiddels wel, maar de website zelf blijkt vaak nog niet toegankelijk en er wordt gemeld dat hieraan wordt gewerkt.
Deze website houdt de stand van zaken bij en er is nog een hoop te doen: Digimonitor.nl
Ben je geen overheidsinstantie, dan doe je er nog steeds goed aan om aan de toegankelijkheidseisen te voldoen. De regels rondom toegankelijkheid gaan namelijk hand in hand met SEO en conversie-optimalisaties. Een toegankelijke website zorgt voor meer structuur en inzicht bij Google. Die geeft de website daardoor een SEO-boost, wat resulteert in meer bezoekers. Die grotere aantallen bezoekers zien een overzichtelijke website met duidelijke taal, vormgeving en een doel. Dit leidt tot meer conversie en meer omzet.
1# Zorg voor bewustwording binnen je organisatie
Ik heb deze tip bovenaan gezet omdat je in veel van de onderstaande tips zult zien dat iedereen die aan de website werkt of hier invloed op heeft bepalend is in de toegankelijkheid.
Draagvlak en bewustwording kun je creëren door de beheerders van de website een training te laten volgen of om boeken over toegankelijkheid en/of dit soort checklist met elkaar te delen. Maar eigenlijk zou iedereen eens naast iemand moeten zitten die een screenreader gebruikt. Even een nieuwtje lezen, de prijs opzoeken van een appartement op Funda of een paar schoenen bestellen bij Wehkamp. Deze handelingen lijken zo simpel maar kosten ongelofelijk veel tijd voor mensen met een beperking.
Wil je zien hoe een blind iemand het internet ervaart? In deze video zie je een screenreader demo.
2# Voorkom ruis op de pagina
Als webdesignbureau moeten we dit vaak met lede ogen aanzien; een overzichtelijk ontwerp dat vaak al voor livegang als een kerstboom volgehangen wordt met onderdelen die niet direct bijdragen aan het doel van de website.
Maar we begrijpen het wel. Je collega of manager roept nu eenmaal harder dat iets prominent op de website moet staan dan al die duizenden bezoekers zonder stem.
Een truc om hiermee om te gaan is vooraf duidelijk af te spreken wat de doelen van de website zijn, en dat elke pagina maximaal (en minimaal) één duidelijk doel dient. Je hebt daarmee een argument voor als iemand iets voorstelt dat leidt tot ruis.
3# Hou het kort
Dat geldt niet voor je teksten, ook al denken veel mensen dat vaak wel. Die mogen juist lang en compleet zijn. Bezoekers vinden het fijn om een plek te vinden waar ze zoveel mogelijk informatie kunnen vinden, zodat ze niet steeds van pagina naar pagina of van website naar website hoeven te navigeren.
Waarom worden lange artikelen beter gevonden in Google?
Hou vooral de titels van links, labels en afbeeldingen zo compact mogelijk. Dit vermindert de ruis op je pagina’s en zorgt ervoor dat blinden en slechtzienden die gebruik maken van een screenreader (een applicatie die de website voorleest) sneller kunnen navigeren door je website.
Het zit in kleine dingen, zoals een link waarbij je direct de titel van de link laat zien in plaats van: “Lees ook het volgende artikel dat je misschien interessant vindt: Titel van link.”
Of een lijst met pdf-documenten waarbij elke titel van het document dezelfde delen van labels bevat zoals: “Pdf-document: Bijlage 1.pdf, Pdf-document: Specificaties.pdf.”
Een screenreader leest de complete titel en het wordt op een gegeven moment heel vermoeiend om door een lijst van tientallen pdf’s te gaan.
4# De taal van de content is zo duidelijk en eenvoudig als maar mogelijk is.
Dit is ook een van de eisen van een toegankelijke website en moet ervoor zorgen dat de taal die gebruikt wordt te begrijpen is voor iedereen die informatie tot zich moet nemen. In de praktijk blijkt dat vaak lastig te zijn. Onze ervaring is dat het inschakelen van een extern bureau om de teksten na te laten kijken helpt, maar dat er ook training nodig is voor de mensen die elke dag aan de website werken.
5# Decoratieve afbeeldingen: geen alt-tekst
De mensen die al langer toegankelijke websites maken moeten hier even wennen, want jarenlang was een alt-tekst een verplicht nummer bij alle afbeeldingen. Wanneer een website veel plaatjes bevat die niet functioneel zijn en een alt-tekst bevatten, dan gaat een screenreader deze allemaal voorlezen. Vandaar dat is besloten dat er geen alt-tekst meer moet staan bij afbeeldingen die niet functioneel zijn. Neem bijvoorbeeld de foto die bij dit artikel in de header staat. Deze is puur decoratief en heeft geen functie en mag daarom geen alt-tekst bevatten.
6# Zorg dat functionele afbeeldingen voorzien zijn van een alternatieve tekst.
Gebruik je op je website een functionele afbeelding zoals een screenshot, een grafiek of een schema? Dan is dat een functionele afbeelding, die moet je wel voorzien van een alt-tekst. Je geeft op een korte en bondige wijze aan wat er op de foto of het plaatje te zien is.
Meld je aan voor onze nieuwsbrief
En je ontvangt net als 3.202 anderen onze nieuwste artikelen.
7# Maak formulieren niet langer dan nodig
Gelukkig helpt de AVG op dit vlak een handje mee. Je mag bijvoorbeeld niet meer informatie vragen aan de bezoeker dan noodzakelijk is. Denk bijvoorbeeld aan het aanmeldformulier voor een nieuwsbrief waarbij je ook een postadres moet invullen.
Formulieren zijn vaak alles behalve toegankelijk, vandaar dat hier extra kritisch naar gekeken wordt. Een kort formulier met alleen de noodzakelijke velden voorkomt dat bezoekers vastlopen en voldoet meteen aan twee richtlijnen (AVG en WCAG 2.1).
8# Maak je formulier niet overdreven kritisch
We zien het helaas vaak; een strenge controle op bijvoorbeeld de manier waarop je een telefoonnummer moet invoeren. Zo’n controle kan ervoor zorgen dat bezoekers vastlopen omdat ze een - of een spatie invoeren op een plek waar dat niet mag.
Het is begrijpelijk dat dit gebeurt, want degene die de informatie verwerkt heeft er misschien extra werk aan om een telefoon opnieuw in te voeren of op te vragen. Maar de keren dat dit gebeurt weegt vaak niet op tegen de keren dat bezoeker vastloopt.
9# Maak je formulier superduidelijk bij een foute invoer
Er kan altijd iets mis gaan bij het invoeren van een formulier. Een vergeten veld of een punt vergeten in een email adres.
Zorg ervoor dat deze foutmelding op een simpele manier uitlegt waar en waarom het mis gaat.
10# Vermijd captcha’s
Slechts enkele screenreaders hebben een manier om captcha’s op te kunnen lossen, daarnaast zijn ze ook voor bezoekers zonder screenreader ontzettend vervelend.
Wij adviseren om een klein percentage spam voor lief te nemen in ruil voor meer conversie en om eerst andere anti-spammaatregelen en checks in te zetten.
11# Zorg voor voldoende contrast
Deze verantwoordelijkheid deel je met de ontwerper. Die moet natuurlijk met een webdesign komen dat genoeg contrast biedt tussen de achtergrond- en voorgrondkleuren zodat alle tekst goed leesbaar is.
De huisstijl moet hierbij eigenlijk niet heilig zijn. Doe je dat wel, dan is het contrast in veel gevallen niet genoeg en moet je gebruik maken van een contrastfilter. Dit is een stukje extra techniek dat je moet installeren in je website en die maakt van je website een zwart-witversie die goed leesbaar is voor slechtzienden.
12# Geen vlaggetjes!
Heb je een meertalige website dan is het natuurlijk een ruimtebesparende optie om vlaggetjes te gebruiken als taalkeuze. Maar voor bezoekers met een beperking is het prettiger als je de taalkeuzes uitschrijft.
13# Zorg dat filmpjes voorzien zijn van een auditieve beschrijving en een ondertiteling
Wanneer je op de website iets uitlegt is het vrij praktisch dat iemand die doof, slechtziend of blind is ook gebruik kan maken van de uitleg. Daarom moet je filmpjes altijd voorzien van een ondertiteling zodat ook doven de video kunnen volgen. Voeg daarnaast een auditieve beschrijving toe voor slechtzienden en blinden.
14# Gebruik de juiste mark-up voor koppen, lijsten en citaten
Denk aan H2, H3, H4, unordered list, ordered list en quotation tags. Door de juiste structuur aan te brengen kunnen ook mensen die de content niet kunnen zien de informatie sneller en makkelijker opnemen. Voor gebruikers van screenreaders is het een onmisbare manier om onderscheid te maken in de soorten content die je aanbiedt en om de hiërarchie te ontdekken.
15# Geef elke pagina een unieke titel
De titel, of page title, is een belangrijk onderdeel van je pagina. SEO-specialisten weten dat maar al te goed. Voor slechtzienden of blinden die met een screenreader werken is deze titel iets dat heel vaak voorgelezen wordt, zeker wanneer er gewisseld wordt tussen verschillende tabs. Een korte titel met de kernwoorden aan het begin helpt enorm.
16# Geef bovenaan elke pagina een korte samenvatting van de inhoud
Je kunt dit bijna zien als een TLTR, wat staat voor "Too Long To Read". Je komt dit vaak tegen bij pagina’s die veel inhoud bevatten en waarbij de schrijver de bezoeker duidelijk wil maken wat er op de pagina te vinden is. Deels werkt een TLTR natuurlijk ook als een soort teaser, want in plaats van dat je de hele pagina moet ‘scannen’ kun je de bezoeker alvast lekker maken over wat er te vinden is. Het leuke is dat een TLTR precies dezelfde functie biedt maar dan voor mensen met een beperking. Je kunt ze zo ook nog eens een hoop tijd besparen.
17# Zorg dat e-mailadressen zichtbaar zijn binnen de tekst van een e-maillink
Voorheen verborgen websites vaak de e-mailadressen om spammers geen kans te geven om spam naar dit adres te sturen, maar het kan er ook voor zorgen dat bezoekers met een beperking geen contact op kunnen nemen.
18# Iframes zijn uit den boze
Iframes maken het gebruik van je website soms al lastig voor bezoekers zonder beperking.
Denk bijvoorbeeld maar aan een Google Maps-kaartje in een iframe dat op je mobiel bijna net zo breed is als de pagina. Je probeert te scrollen maar scrolt per ongeluk in Google Maps en moet de gekste toeren uithalen om toch nog op de pagina te kunnen scrollen.
Bij gebruik van een screenreader of als iemand die slechtziend is erg moet inzoomen, kan een iframe ervoor zorgen dat je niet meer weet waar je bent. Het is ook mogelijk dat de screenreader de inhoud van de iframe compleet overslaat. Vandaar dat iframes geen optie zijn.
19# Doe zelf alvast een snelle check
Overheidsorganisaties moeten hun toegankelijkheid laten testen. Dat gebeurt door bureaus die hierin gespecialiseerd zijn en steekproefsgewijs de website doornemen in een audit. Wij bij Emble doen dit ook, volgens de gestandaardiseerde onderzoeksmethode; de WCAG-EM. Wil je daar meer over weten of onze handig quickscan gebruiken?
Heel veel succes met het toegankelijk maken van je website. Laat je vooral niet ontmoedigen door alle regels en beperkingen. Onze ervaring is dat een toegankelijke website niet alleen beter werkt voor bezoekers met een beperking maar uiteindelijk een veel betere website wordt voor alle bezoekers!
Heb je vragen, opmerkingen of mis je nog essentiële tips? Ik zie en beantwoord ze graag in het reactie gedeelte onderaan deze pagina.
Meer lezen over toegankelijkheid?
Laat hieronder je e-mailadres achter en download onze gratis whitepaper over toegankelijkheid. In deze whitepaper leer je van alles over toegankelijkheid: wat het is, wat de standaard richtlijnen zijn, hoe jij je website praktisch toegankelijk kan maken en nog veel, veel meer.
