Je website toegankelijk maken: het gratis stappenplan voor KMO's

Een klant probeert met een schermlezer een bestelling te plaatsen op de webshop van een KMO en komt niet voorbij het contactformulier. Sinds 28 juni 2025 geldt de European Accessibility Act voor een groot deel van de onlinediensten in de EU, van webshops tot bankdiensten en ticketverkoop. De meeste knelpunten zijn met gratis tools in een middag op te sporen en met beperkte moeite op te lossen.

Key takeaways

• WAVE en Lighthouse zijn gratis en vinden binnen enkele minuten de meest voorkomende WCAG-knelpunten op een pagina.
• Vier terugkerende problemen bij KMO-websites: ontbrekende alt-tekst, te laag kleurcontrast, formuliervelden zonder label en een rommelige koppenstructuur.
• De European Accessibility Act geldt sinds 28 juni 2025 voor een reeks onlinediensten, waaronder webshops. Toegankelijkheid is daarmee ook een nalevingsvraag geworden, niet alleen een gebruiksvriendelijkheidsvraag.
• Een test met alleen het toetsenbord legt problemen bloot die automatische scanners missen.
• De basis is zelf te doen. HisarWeb springt pas bij als het te veel tijd kost of technisch vastloopt.

Stap 1: scan je website met WAVE en Lighthouse

Installeer de WAVE-browserextensie van WebAIM in Chrome of Firefox. Open je homepage en klik op het WAVE-icoon. De extensie tekent iconen op de pagina zelf: rode iconen zijn fouten, gele zijn waarschuwingen, groene zijn kenmerken die goed staan. Doorloop eerst de rode iconen, dat zijn de knelpunten die een schermlezer of toetsenbordgebruiker daadwerkelijk blokkeren.

Open daarna Chrome DevTools met F12, ga naar het tabblad Lighthouse, vink alleen de categorie Accessibility aan en klik op Analyze page load. Lighthouse geeft een score van 0 tot 100 en een lijst van gefaalde audits, elk met een korte uitleg waarom het probleem is en welk WCAG-criterium het raakt.

Herhaal dit voor je belangrijkste pagina's: de homepage, het contactformulier, de productpagina of dienstenpagina en de kassa of het aanvraagformulier. Dat zijn de pagina's waar bezoekers het vaakst vastlopen. Dit is gelukt zodra je van elke pagina een lijst hebt met concrete, benoemde problemen in plaats van een vaag gevoel dat het wel goed zal zitten.

Stap 2: pak de vijf grootste knelpunten aan

De meeste WAVE- en Lighthouse-fouten bij KMO-websites vallen onder een klein aantal categorieen. Werk ze in deze volgorde af.

1. Alt-tekst. Elke afbeelding die informatie overbrengt, zoals een productfoto, een schema of een knop als afbeelding, krijgt een korte, beschrijvende alt-tekst. Een decoratieve afbeelding krijgt een leeg alt-attribuut, zodat een schermlezer ze overslaat.
2. Kleurcontrast. Tekst en achtergrond, en ook knoppen en hun tekst, moeten voldoende contrast hebben. Grijze tekst op een witte achtergrond of een lichte knopkleur met witte letters is een klassieke misser.
3. Formulierlabels. Elk invoerveld krijgt een zichtbaar label dat er programmatisch aan gekoppeld is, geen placeholder-tekst als enige uitleg. Een placeholder verdwijnt zodra iemand begint te typen en wordt door lang niet elke schermlezer voorgelezen.
4. Koppenstructuur. Een pagina heeft precies een h1, daarna volgen h2 en h3 in logische volgorde zonder niveaus over te slaan. Een schermlezergebruiker navigeert vaak via de koppenlijst, een rommelige structuur maakt de pagina onbruikbaar als kaart.
5. Linktekst. Vervang klik hier en lees meer door een link die zelf al zegt waar hij naartoe gaat, zoals bekijk onze openingsuren.

Fix een categorie tegelijk en draai daarna WAVE opnieuw. Dit is gelukt als het aantal rode foutmeldingen voor die categorie op nul staat.

Stap 3: test zonder muis en zonder kleur

Leg de muis weg en loop je site door met alleen de Tab-toets. Elke link, knop en formulierveld moet bereikbaar zijn, en je moet op elk moment zien welk element actief is dankzij een duidelijke focusrand. Kom je vast te zitten in een menu of een cookiebanner die niet meer weggaat, dan heb je een echt blokkerend probleem gevonden.

Zet je scherm daarna tijdelijk op grijswaarden. Dat kan via de systeeminstellingen van Windows of macOS. Controleer of je nog steeds begrijpt welke velden verplicht zijn en welke knop de hoofdactie is. Als die informatie alleen via kleur wordt getoond, bijvoorbeeld een rode rand zonder tekst of icoon, mist een kleurenblinde bezoeker het signaal volledig.

Dit is gelukt als je zonder muis en zonder kleurherkenning nog steeds een bestelling of aanvraag kunt afronden.

Aanbevolen platforms en tools

Tips en tricks

• WAVE en Lighthouse geven bij twijfelgevallen soms een net iets ander contrastoordeel. Vertrouw bij twijfel de WebAIM Contrast Checker, die rekent volgens de officiele WCAG-formule.
• Automatische scanners vinden niet alles. Een korte test met een gratis schermlezer, zoals NVDA op Windows of VoiceOver op Mac, legt problemen bloot zoals een leesvolgorde die niet overeenkomt met de visuele volgorde.
• PDF's op de site, zoals prijslijsten of brochures, vallen ook onder toegankelijkheid. Een PDF zonder getagde structuur is voor een schermlezer vaak onleesbaar, ook als de tekst er visueel prima uitziet.
• Controleer of outline: none ergens in de CSS staat. Dat is een veelgebruikte manier om de focusrand weg te stylen, en daarmee verdwijnt precies het signaal dat toetsenbordgebruikers nodig hebben.
• Zet de scan niet als eenmalige actie in de agenda, maar als vast onderdeel van elke nieuwe pagina of elk nieuw formulier dat online gaat.

Doe de zelfscan

Begin vandaag met de WAVE-extensie op je homepage en je contactformulier, dat zijn de pagina's waar de meeste bezoekers vastlopen. Kom je er zelf niet helemaal uit of ontbreekt de tijd, HisarWeb helpt met een gerichte toegankelijkheidsaudit.