We denken dan nogal snel aan fysieke aanpassingen zoals hellingen voor rolstoelgebruikers of geleidestroken voor slechtzienden. Maar het is even cruciaal om deze principes te integreren in de digitale wereld.
In onze moderne samenleving wordt er steeds meer nadruk gelegd op toegankelijkheid, vooral binnen openbare diensten. De normen worden voortdurend aangescherpt om ervoor te zorgen dat elke persoon, ongeacht hun beperkingen, een vlotte gebruikerservaring kan ervaren.
Aantal gebruikers met een beperking*
Visueel • Auditief • Cognitief • Motoriek
Aantal websites die voldoen aan de normen* op de home-pagina
*volgens WCAG2
Stereotypes
Enkele misvattingen
Als we ons baseren op de cijfers hierboven, dan merk je dat er nog heel wat werk aan de winkel is. Een groot deel hiervan is te danken aan verouderde websites die toe zijn aan vernieuwing, maar ook door tal van vooroordelen.
1. Het is duur en tijdrovend
Een veelvoorkomend misverstand is dat het implementeren van toegankelijkheid veel tijd en geld kost. Hoewel hier zeker een waarheid in zit kunnen veel aanpassingen ook eenvoudig en tegen lage kosten worden doorgevoerd. Bovendien zijn er tal van gratis tools beschikbaar om dit proces te vergemakkelijken. Door toegankelijkheid vanaf het begin in het ontwerpproces op te nemen, kunnen de kosten aanzienlijk beperkt worden.
2. Het maakt je website lelijk en saai
Toegankelijkheid betekent niet dat je compromissen moet sluiten op het gebied van design. Er zijn talloze manieren om een website visueel aantrekkelijk te maken terwijl deze toch toegankelijk blijft. Wij zijn van het idee dat een gebruikerservaring op de eerste plaats moet komen, maar een website zowel mooi als functioneel kan zijn.
3. Het is alleen relevant voor grote organisaties
Toegankelijkheid is niet alleen een kwestie voor grote bedrijven en overheidsinstellingen (hoewel zij wel met een aantal verplichtingen zitten). Kleine en middelgrote ondernemingen kunnen eveneens profiteren van een toegankelijke website. Het vergroot de potentiële doelgroep, verbetert de bezoekerservaring en kan zelfs bijdragen aan een betere zoekmachineoptimalisatie (SEO).
Quick Wins
Waar moet je op letten?
- Heldere navigatie: Zorg ervoor dat je website een heldere en logische navigatiestructuur heeft. Dit helpt niet alleen gebruikers met cognitieve beperkingen, maar maakt het ook eenvoudiger voor screenreader-gebruikers om vlot door je website te navigeren.
- Alt-teksten: Voeg beschrijvende alt-teksten toe aan alle afbeeldingen. Dit is essentieel voor gebruikers die screen readers gebruiken, anders krijgen ze de bestandsnaam voorgelezen. IMG1234.jpg zegt niet veel.
- Voldoende contrast: Controleer dat er voldoende contrast is tussen de tekst en de achtergrond. Niet enkel voor mensen met visuele beperkingen of kleurenblindheid, denk ook aan omgevingsfactoren zoals felle zon of verouderde schermen met lage kleurcontrasten.
- Toetsenbordtoegankelijkheid: Alle interactieve elementen zoals formulieren, knoppen en links moeten toegankelijk zijn met alleen het toetsenbord. Veel gebruikers, vooral die met motorische beperkingen, vertrouwen op de Tab-toets om door de pagina te navigeren. Zorg dat deze tabvolgorde logisch is, en dat het visueel duidelijk is welk element geselecteerd staat.
- ARIA-labels: “Accessible Rich Internet Applications”-labels kunnen helpen om interactieve elementen zoals buttons beter te beschrijven voor screen readers, waardoor het inzicht voor mensen met een visuele beperking wordt verbeterd.
Hoe?
Enkele handige tools
1. Colorslurp
Colorslurp is niet alleen een handige colorpicker tool, maar kan ook gebruikt worden om kleurcontrast te checken. Je krijgt hierbij een score volgens WGAC guidelines.
2. Able
Met Able kun je kleurcontrast rechtstreeks in Figma controleren door 2 gekleurde elementen te selecteren. Het toont ook een preview van verschillende tekstgroottes waarbij je ook kleurenblindheid kan simuleren.
3. Accessibly
Accessibly biedt een uitgebreide widget die ontwikkeld is met een arsenaal aan functies om aan de diverse behoeften van gebruikers met beperkingen te voldoen.
Voorbeelden
Compagnon pick’s
1. Moooi
Deze Nederlandse interieur- en designwinkel heeft tal van integraties om toegankelijkheid te bevorderen. Zoals een skip-button, een pauzeknop op animaties en een makkelijke navigatie die zelf met spraak te bedienen is.
2. Partake
Partake maakt heel wat beloftes op vlak van “Food Inclusivity”, het is dan ook maar logisch dat ze ook rekening houden met de inclusiviteit van hun website. Hiervoor gebruikten ze de Accessibly App, die je linksonder in de hoek vindt.
3. Patagonia
Ook bij Patagonia vind je heel wat toepassingen zoals skip-to-main-content, een groot kleurcontrast in de typografie en een intuïtieve navigatie.
De Awwwards-winnende studio Built By Silo toont hoe een toegankelijke website niet saai hoeft te zijn. Uiteraard is er genoeg kleurcontrast aanwezig in het zwart-witte kleurpalet, maar als we dieper in de code duiken zien we ook het gebruik van ARIA-labels.