Website toegankelijkheid basis voor mkb: duidelijker voor iedereen

Toegankelijkheid betekent dat zoveel mogelijk mensen je website kunnen gebruiken, ongeacht hoe ze het web bedienen. Denk aan iemand die slecht ziet en de tekst vergroot, iemand die met het toetsenbord navigeert in plaats van een muis, of iemand die een screenreader gebruikt die de pagina voorleest. Maar denk ook aan een klant die buiten in fel zonlicht op zijn telefoon kijkt, of iemand met een trage verbinding. Toegankelijkheid raakt dus veel meer bezoekers dan alleen de groep met een formele beperking.

Voor mkb-ondernemers is de zakelijke kant simpel: bezoekers die niet snel vinden wat ze zoeken, haken af. Een onleesbare knop, een formulier zonder duidelijke foutmelding of een menu dat alleen met de muis werkt, kost je aanvragen. Toegankelijkheid en conversie liggen daarom dicht bij elkaar. Wat het voor iemand met een beperking makkelijker maakt, maakt het meestal voor iedereen makkelijker.

Daarnaast speelt regelgeving een groeiende rol. De European Accessibility Act stelt vanaf 2025 eisen aan bepaalde producten en diensten, zoals webshops en online dienstverlening. Niet elk mkb-bedrijf valt daar direct onder, maar de richting is duidelijk: toegankelijkheid wordt steeds meer een basisverwachting in plaats van een extraatje. Vroeg beginnen voorkomt dat je later alles in een keer moet rechttrekken.

Een logische opbouw is het fundament van een toegankelijke pagina. Headings (de H1, H2 en H3) zijn geen opmaak om tekst groter te maken, maar een inhoudsopgave die de structuur van je pagina beschrijft. Een screenreader-gebruiker springt vaak van kop naar kop om snel te scannen, net zoals een ziende bezoeker met zijn ogen scant. Gebruik daarom een H1 per pagina voor het hoofdonderwerp, en bouw daaronder logisch op met H2 en H3 zonder niveaus over te slaan.

Veel websites gebruiken headings puur visueel: een dikgedrukte regel die eigenlijk geen kop is, of een kop die met CSS kleiner is gemaakt om in het ontwerp te passen. Voor het oog werkt dat, maar de onderliggende structuur klopt dan niet. Zorg dat de hierarchie in de code overeenkomt met wat de bezoeker logisch verwacht. Dit helpt overigens ook Google, dat dezelfde structuur gebruikt om je pagina te begrijpen.

Leesbaarheid telt mee in deze categorie. Korte alinea's, voldoende witruimte, beschrijvende tussenkoppen en concrete taal maken een pagina voor iedereen prettiger. Vermijd lange blokken tekst zonder onderbreking. Een goede vuistregel: als jij zelf moet zoeken waar het antwoord staat, doet je bezoeker dat ook, en de bezoeker geeft sneller op dan jij.

Tekst moet voldoende contrast hebben met de achtergrond. Lichtgrijze tekst op wit ziet er rustig en modern uit in een ontwerp, maar wordt voor veel mensen lastig leesbaar, vooral op mobiel of bij fel licht. De WCAG-richtlijn hanteert een contrastverhouding van minimaal 4,5 op 1 voor normale tekst en 3 op 1 voor grote tekst. Je hoeft die getallen niet uit je hoofd te kennen: er zijn gratis contrastcheckers waar je twee kleurcodes invoert en direct ziet of het voldoende is.

Leun nooit alleen op kleur om informatie over te brengen. Een formulierveld dat alleen rood kleurt bij een fout is onbruikbaar voor iemand die kleurenblind is. Voeg altijd een tekst, een icoon of een duidelijke melding toe naast de kleur. Hetzelfde geldt voor links in lopende tekst: maak ze herkenbaar door bijvoorbeeld onderstreping, niet alleen door een afwijkende kleur.

Let ook op de tekstgrootte en de mogelijkheid om in te zoomen. Te kleine basisteksten dwingen bezoekers om te knijpen of te zoomen, wat op mobiel snel irritatie oplevert. Een basisgrootte van rond de 16 pixels werkt voor de meeste sites prettig. Controleer daarnaast of de pagina nog goed werkt wanneer iemand inzoomt tot 200 procent: tekst mag dan niet wegvallen of buiten beeld schuiven.

Niet iedereen gebruikt een muis. Mensen met een motorische beperking, maar ook power-users en screenreader-gebruikers, navigeren met het toetsenbord via de Tab-toets. Een toegankelijke website is volledig bedienbaar met het toetsenbord alleen: je moet met Tab door alle links, knoppen en formuliervelden kunnen lopen en met Enter of de spatiebalk kunnen activeren. Test dit zelf eens door je muis even niet te gebruiken en alleen met Tab door je belangrijkste pagina te lopen.

Daarbij hoort een zichtbare focus-indicator: een duidelijk randje of markering die laat zien waar je je op dat moment bevindt op de pagina. Veel ontwerpen verwijderen die focusrand omdat hij niet mooi gevonden wordt, maar daarmee maak je toetsenbordnavigatie onbruikbaar. De bezoeker weet dan niet meer waar hij is. Als je de standaardstijl niet mooi vindt, vervang hem dan door een eigen duidelijke variant in plaats van hem weg te halen.

De volgorde waarin elementen worden doorlopen moet logisch zijn en de leesrichting volgen. Een veelvoorkomend probleem zijn pop-ups en menu's die wel openen maar de focus niet vasthouden, waardoor je achter de pop-up verder tabt. Zorg dat een geopend menu of dialoog de aandacht houdt en met Escape te sluiten is. Voor menu's met submenu's geldt dat ze ook zonder hover-effect bereikbaar moeten zijn, want hover bestaat niet op een touchscreen of via toetsenbord.

Formulieren zijn vaak het punt waar aanvragen worden gewonnen of verloren, en juist daar gaat toegankelijkheid regelmatig mis. Elk invoerveld hoort een zichtbaar label te hebben dat aan het veld gekoppeld is, niet alleen een grijze placeholdertekst die verdwijnt zodra je begint te typen. Foutmeldingen moeten concreet zijn (bijvoorbeeld 'Vul een geldig telefoonnummer in' in plaats van 'Ongeldig') en duidelijk bij het juiste veld staan. Zo weet iedereen wat er moet gebeuren om verder te kunnen.

Afbeeldingen hebben alt-tekst nodig wanneer ze inhoud overbrengen. Een productfoto of een grafiek beschrijf je kort in de alt-tekst, zodat een screenreader vertelt wat erop staat. Puur decoratieve afbeeldingen krijgen juist een lege alt-tekst, zodat ze worden overgeslagen en niet voor ruis zorgen. Schrijf alt-teksten beschrijvend maar bondig, en herhaal niet onnodig de tekst die er al naast staat.

Knoppen en links moeten duidelijk maken wat ze doen. Een knop met alleen een pictogram, of een link met de tekst 'lees meer' zonder context, is voor screenreader-gebruikers betekenisloos. Geef knoppen een begrijpelijke tekst of een toegankelijke naam. Datzelfde geldt voor video en audio: ondertiteling en een transcript maken media bruikbaar voor mensen die niet horen of de geluidsversie niet kunnen afspelen, en helpen ook bezoekers in een stille of drukke omgeving.

Toegankelijkheid hoeft geen project van maanden te zijn. De grootste winst zit bijna altijd in de basis: contrast, headings, toetsenbordnavigatie, labels en alt-teksten. Begin met je belangrijkste pagina's, zoals de homepage, je dienst- of productpagina's en het contact- of aanvraagformulier. Die pagina's bepalen het grootste deel van je aanvragen en zijn daarom de plek waar verbetering het snelst loont.

Gebruik een combinatie van geautomatiseerde controles en handmatige tests. Geautomatiseerde tools vinden snel veel laaghangend fruit, zoals onvoldoende contrast, ontbrekende alt-teksten of formuliervelden zonder label. Maar een deel van toegankelijkheid laat zich niet automatisch meten: of de tab-volgorde logisch voelt, of een foutmelding begrijpelijk is, of een afbeelding een zinnige alt-tekst heeft. Daarvoor blijven menselijke tests nodig, bijvoorbeeld door zelf met het toetsenbord door de site te lopen.

Wil je een snel, onafhankelijk beeld van waar je staat, dan kan een gratis CheckBorg-scan helpen om zichtbare basispunten op te sporen, zodat je weet welke verbeteringen prioriteit verdienen. Behandel toegankelijkheid daarna als onderhoud, niet als eenmalige actie. Elke nieuwe pagina, campagne of pop-up kan opnieuw drempels introduceren. Een korte checklist bij elke oplevering houdt je site op orde zonder dat het veel tijd kost.