Overzicht
Als we drempels in gebouwen weghalen, waarom zetten we ze dan terug op websites?
Vandaag doen we erg ons best om fysieke ruimtes zo toegankelijk mogelijk te maken — denk aan rolstoelhellingen, automatische deuren of visuele geleidelijnen. Toch krijgen veel mensen nog dagelijks te maken met digitale uitsluiting. Toegankelijkheid in webdesign is soms nog ver te zoeken. Van onleesbare teksten en ontoegankelijke menu’s tot afbeeldingen zonder alt-tekst: op het web zijn de obstakels vaak minder zichtbaar, maar zeker niet minder echt. In dit artikel nemen we die digitale drempels onder de loep — en tonen we hoe je niemand buitensluit.
Kleurcontrast verbeteren voor toegankelijk webdesign
Zorgen voor een goed kleurcontrast is essentieel bij een toegankelijk webdesign anno 2025. Voor mensen met kleurenblindheid of andere visuele beperkingen is een duidelijk verschil tussen voorgrond en achtergrond noodzakelijk om informatie goed te kunnen opnemen. Wanneer het contrast te laag is — bijvoorbeeld bij lichtblauwe tekst op een witte achtergrond — kan tekst moeilijk leesbaar worden of zelfs volledig onzichtbaar zijn.
De WCAG-richtlijnen (richtlijnen voor toegankelijkheid van webcontent) stellen dat de contrastverhouding minstens 4.5:1 moet zijn voor gewone (kleinere) tekst. Voor grotere tekst (minstens 18pt of 14pt vet) is een verhouding van 3:1 voldoende. In onderstaande afbeelding zie je duidelijk het verschil tussen goed en slecht contrast, en hoe dat de leesbaarheid beïnvloedt.
Toetsenbordnavigatie voor een toegankelijke website
Om toegankelijk te zijn, moeten websites volledig bedienbaar zijn met alleen een toetsenbord.
Dat betekent bijvoorbeeld dat gebruikers met de pijltjestoetsen moeten kunnen scrollen en met de tabtoets door de interactieve elementen van de website moeten kunnen navigeren — zoals knoppen, links en formulieren. Daarnaast spelen ook andere toetsen een belangrijke rol:
Enter:
Wordt gebruikt om een actie te bevestigen of activeren. Als je bijvoorbeeld met tab op een knop, link of formulier-element (zoals een dropdown of verzendknop) staat, dan activeer je dat met Enter — net zoals met een muisklik. Ook bij uitklapmenu’s of accordeons gebruik je vaak Enter om iets open te klappen.
Escape (Esc):
Wordt gebruikt om iets te sluiten of te annuleren. Dit geldt bijvoorbeeld voor modale vensters (pop-ups), dropdownmenu’s of zoekbalken die automatisch openen. Met Escape moet je als gebruiker zo’n element kunnen sluiten zonder dat je de muis nodig hebt.
Zichtbare focus bij toetsenbordnavigatie
Eén van de belangrijkste principes van toetsenbordnavigatie op toegankelijke websites is ervoor zorgen dat de gebruiker altijd weet welk interactief element in focus is. Met behulp van de tabtoets kan een gebruiker door een webpagina navigeren — je springt daarbij van het ene interactieve element naar het volgende, zoals knoppen, links of formuliervelden. Daarom is het essentieel dat elk element waar je naartoe kan tabben ook visueel laat zien dat je focus hier op ligt. Denk aan een duidelijke omlijning, kleurverandering of schaduw. Zonder zo’n focus indicator is je webdesign niet toegankelijk genoeg, zo kunnen toetsenbord gebruikers namelijk letterlijk verdwalen op je site. Natuurlijk moet je nu enkel nog voorzien dat je de verandering een hoog genoeg contrast geeft met de pagina zodat die ook opvalt.
Daarnaast is het cruciaal dat ook de tabvolgorde logisch en bruikbaar is.
Wanneer je met de tabtoets door een website navigeert, leest de computer de broncode van boven naar beneden om te bepalen welk element als volgende in focus moet komen. Het is dus belangrijk dat de structuur van je HTML logisch is opgebouwd. Zorg er bijvoorbeeld voor dat de navigatiebalk daadwerkelijk bovenaan in je code staat, ook al staat die visueel elders gepositioneerd via CSS.
Ook interactieve elementen zoals submenu’s moeten correct reageren op toetsenbordnavigatie. Wanneer je bijvoorbeeld met tab op het hoofdmenu-item “Diensten” komt, moet het submenu automatisch openen. Vervolgens moet je met tabtoetsen eerst door alle submenu-items kunnen navigeren, vóór je verdergaat met de rest van de navigatie. Zo blijft de gebruikerservaring logisch en voorspelbaar — ook zonder muis.
Toegankelijkheid van websites voor slechtzienden en screenreader gebruikers
Toegankelijke websites bij inzoomen tot 400%
Bij het inzoomen op een website is het belangrijk dat er geen functionaliteit verloren gaat en dat teksten zichtbaar blijven.
Horizontaal scrollen moet daarbij zo veel mogelijk vermeden worden, omdat het de gebruikservaring aanzienlijk moeilijker maakt. Ook is het af te raden om tekst over afbeeldingen te plaatsen, aangezien die combinatie vaak breekt bij hoge zoomniveaus — bijvoorbeeld wanneer een gebruiker tot 400% inzoomt.
Gelukkig is de toegankelijke oplossing meestal eenvoudig: zorg ervoor dat je website goed is ingesteld voor mobiel gebruik. Een responsief ontwerp dat zich automatisch aanpast aan verschillende schermgroottes en zoomniveaus, voorkomt de meeste problemen.
Waarom alt-teksten belangrijk zijn voor inclusiviteit en vindbaarheid
Wanneer je functionele afbeeldingen gebruikt op je website, is het belangrijk om deze te voorzien van een duidelijke en toegankelijke alt-tekst.
Een alt-tekst (alternatieve tekst) wordt voorgelezen door screenreaders en biedt context aan gebruikers die de afbeelding niet of niet volledig kunnen zien. Zo weten zij alsnog welke functie of betekenis de afbeelding heeft binnen de pagina.
Daarnaast draagt het gebruik van goede alt-teksten ook bij aan je SEO. Zoekmachines hechten waarde aan beschrijvende alternatieve teksten, omdat ze helpen om de inhoud van je site beter te begrijpen en te indexeren.
Recente publicaties
