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.
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.
Na de audit wordt een lijst met verbeterpunten teruggekoppeld. Die moeten voor een bepaalde datum verholpen zijn waarna ze gecontroleerd worden.
Voordat je een dergelijke audit laat uitvoeren is het verstandig zelf al zoveel mogelijk te controleren omdat je hiermee de lijst met verbeterpunten alvast kunt beperken. Deze checklist helpt je hier gedeeltelijk bij maar je kunt ook de techniek van je website alvast controleren met de Chrome plug-in Accessibility Insights.
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.