Home » Blog » Webdesign en accessibility (a11y): waar kun je rekening mee houden? — door Robert van Eekhout

Webdesign en accessibility (a11y): waar kun je rekening mee houden?

Een website maken die ook goed te bekijken is voor bezoekers met een (al dan niet tijdelijke) beperking is tegenwoordig eerder regel dan uitzondering. En dat is maar goed ook, want 1 op de 5 bezoekers van jouw website heeft een beperking waardoor het voor hem of haar lastiger is je site te bekijken. Waar kun je in je design rekening mee houden om je website voor iedereen goed toegankelijk te maken?

De lijst met dingen die je in je ontwerp kunt toepassen om deze beter toegankelijk te maken is lang. Ze zijn vastgelegd in de WCAG guidelines van W3C. Hieronder hebben we een lijst gemaakt van een aantal belangrijke zaken waar je op kunt letten wanneer je bezig bent met het laten maken van jouw webdesign.

Kleuren en contrast ratio’s

Een van de meest prominente zaken in het ontwerp van je site zijn de kleuren en het contrast dat dat oplevert met de tekst. De kleuren moeten duidelijk zijn, prettig lezen en het contrast tussen tekst en achtergrondkleur moet goed zijn.

Maar wat is goed? Met verschillende tools kun je vrij makkelijk de contrastratio’s tussen tekst en de achtergrondkleur uitrekenen. Zoals deze tool van WebAim. De tool berekent voor iedere combinatie van tekstkleur en achtergrond of deze voldoet aan de richtlijnen van W3C. W3C hanteert verschillende gradaties, variërend van A tot AAA (meest uitgebreid). Wanneer je tekst- en achtergrondkleuren voldoen aan AA of AAA weet je zeker dat de tekst goed leesbaar is.

Een voorbeeld van een contrastratio waardoor de titel niet zo prettig leest
Een voorbeeld van een contrastratio waarbij de titel wel prettig leest

Geef duidelijke labels aan je formulier

De meeste websites hebben ergens wel een formulier om je aan te melden voor de nieuwbrief of om je contactgegevens achter te laten. Je kunt op verschillende manieren labels meegeven aan de inputvelden van je formulier om de gebruiker duidelijk te maken wat hij daar moet invullen.

Labels meegeven is per definitie goed gebruik vanuit UI perspectief. Vanuit het perspectief van accessibility is het beter om de labels boven het inputveld in het formulier te plaatsen, in plaats van als placeholder in het inputveld. Een placeholder heeft vaak een lagere contrastratio en is daardoor slechter leesbaar. Daarnaast worden placeholders niet altijd geselecteerd wanneer de gebruiker met de TAB toets door je site navigeert. En de TAB toets is onmisbaar om je website voor iedereen toegankelijk te maken.

Plaats de labels van je formulier boven de inputvelden.

Tot slot heeft het gebruik van labels in plaats van placeholders de voorkeur omdat placeholders verdwijnen zodra je op het inputveld klikt. Als je even niet oplet, weet je niet meer precies wat je nou in dat veld moest invullen!

Design ook de focus

Gebruikers die niet goed overweg kunnen met de muis gebruiken hoofdzakelijk hun toetsenbord om door je site te browsen. De TAB toets wordt dan veel gebruikt om elementen te kunnen selecteren op je site. Bijvoorbeeld knoppen, links in de tekst of invoervelden. Het is dus van belang dat je de zogenaamde focus een duidelijke stijl meegeeft die goed te onderscheiden is van de rest van de stijl die gebruikt wordt in het design.

Zorg ervoor dat wanneer de gebruiker elementen met de TAB toets selecteert, die dan helder zijn vormgegeven. Bijvoorbeeld met een duidelijke kleur en in goed contrast met de andere elementen. Check ook bij oplevering hoe je met de TAB toets door de website kunt navigeren.

Vergeet de koppen niet te ontwerpen!

Voor een goed toegankelijke website is het noodzakelijk dat je ook op een juiste manier koppen (h1 t/m h6) gebruikt. Soms ligt het in een ontwerp vast welke stukken tekst de koppen zijn (bijvoorbeeld titels), maar voor andere stukken tekst ligt die verantwoordelijkheid bij de gebruiker. En daar kan het wel eens misgaan, omdat een gebruiker vergeet om de juiste headings toe te passen of dat ze niet kunnen worden gebruikt omdat ze niet zijn ontworpen.

Een voorbeeld van een ontwerp waarbij is aangegeven welke soort koppen op welke plek gebruikt moeten worden.

In de designfase is het dus van belang dat de headings allemaal ontworpen worden. Het liefst geeft de designer ook aan welke heading wanneer en op welke plek gebruikt moet worden op het moment dat de gebruiker meer vrijheid heeft om pagina’s zelf op te maken. Dan weet je zeker dat de headings aanwezig zijn en dat ze juist worden toegepast.

Het ontwerp van de headings 1 t/m 6

Wie is er verantwoordelijk voor een toegankelijke website?

Hierboven bespreken we een aantal zaken waar je in je design rekening mee kunt houden om je website toegankelijk te maken. Maar het toegankelijk maken van de website begint eigenlijk al eerder, namelijk in de UX/UI fase of de functioneel ontwerp fase. Dat is namelijk het stadium waarin je nadenkt over de gebruikerservaring van je website, dus ook de ervaring voor de beperkte gebruiker. Ook in de developmentfase is er nog werk te verzetten op dit terrein. De developers moeten uiteindelijk ervoor zorgen dat bijvoorbeeld navigatie via de TAB toets goed werkt. En dat de accessibility elementen uit het design goed zijn doorgevoerd in de site.

Het toegankelijk maken van je website is dus iets dat in iedere fase van het ontwikkelen van een digitaal kanaal terug komt. Wil je dat je website voor 100% aan de eisen van W3C/WCAG voldoet? Maak dit dan in de strategiefase al kenbaar aan je bureau, de designer en later ook aan de developers. Een UX’er of designer maakt een website in beginsel natuurlijk zo toegankelijk mogelijk, maar niet direct 100% W3C/WCAG proof. Dat is een preciezer werkje waarbij je ook achteraf per punt moet controleren of de WCAG guidelines goed zijn toegepast.

Wil jij je website toegankelijker maken?

Neem dan contact op met onze specialisten. Zij kunnen je precies vertellen welke zaken je zou kunnen verbeteren op het gebied van toegankelijkheid!

Offerte wizard