Een toegankelijke en gebruiksvriendelijke website: waar let je op?
In het kort: Een toegankelijke website kan door iedereen gebruikt worden, ook door mensen met een visuele, motorische, auditieve of cognitieve beperking, en door wie gewoon op een kleine smartphone in fel zonlicht leest. Dat vraagt voldoende contrast, leesbare teksten, navigatie met het toetsenbord, beschrijvende alt-teksten, duidelijke formulieren en tests met echte gebruikers. Voor bepaalde diensten gelden intussen ook Europese toegankelijkheidsregels.
Inhoud
Wat betekent een toegankelijke website eigenlijk?
Welke Europese regels gelden er voor toegankelijkheid?
Hoe zorg je voor contrast en leesbaarheid?
Kan iemand je site gebruiken zonder muis?
Wat maakt een alt-tekst goed?
Hoe maak je formulieren voor iedereen bruikbaar?
Waarom test je met echte gebruikers, ook op mobiel?
Veelgestelde vragen
Wat betekent een toegankelijke website eigenlijk?
Een toegankelijke website is zo gebouwd dat mensen met heel verschillende mogelijkheden de inhoud kunnen waarnemen, begrijpen, bedienen en vertrouwen, ongeacht het toestel of de hulpmiddelen die ze gebruiken.
Bij toegankelijkheid denken veel mensen eerst aan blinde gebruikers met een schermlezer. Die groep is belangrijk, maar het begrip is veel breder. Denk aan een oudere klant in Brugge met een verminderd gezichtsvermogen die de tekst wil vergroten. Aan een gebruiker met een trillende hand voor wie kleine knoppen een obstakel zijn. Aan iemand met dyslexie die vastloopt in lange, complexe zinnen. Of aan een slechthorende bezoeker die een video zonder ondertitels niet kan volgen.
Daarnaast zijn er tijdelijke en situationele beperkingen. Wie een arm in het gips heeft, bedient zijn computer tijdelijk anders. Wie in fel zonlicht op een terras in Oostende zijn smartphone gebruikt, heeft net als een slechtziende baat bij sterk contrast. Wie op de trein zonder oortjes een filmpje bekijkt, leest graag ondertitels.
De internationale referentie op dit vlak zijn de Web Content Accessibility Guidelines, kortweg WCAG. Die richtlijnen steunen op vier principes: inhoud moet waarneembaar, bedienbaar, begrijpelijk en robuust zijn. Robuust betekent dat de code zo geschreven is dat verschillende browsers en hulpmiddelen ze correct kunnen interpreteren.
Toegankelijkheid en gebruiksvriendelijkheid gaan hand in hand. Een site die goed werkt voor iemand met een beperking, werkt vrijwel altijd beter voor iedereen. Duidelijke titels, logische navigatie en eenvoudige formulieren maken het voor elke bezoeker makkelijker om te vinden wat hij zoekt.
Welke Europese regels gelden er voor toegankelijkheid?
Overheidsinstanties moesten al langer toegankelijke websites hebben; via een Europese richtlijn, omgezet in Belgisch recht, gelden nu ook toegankelijkheidseisen voor bepaalde diensten van private bedrijven, zoals online verkoop aan consumenten.
Lange tijd was digitale toegankelijkheid vooral een verplichting voor de publieke sector. Websites en apps van overheden en openbare instellingen moeten aan toegankelijkheidseisen voldoen en een toegankelijkheidsverklaring publiceren.
Met de Europese Toegankelijkheidsakte, in het Engels de European Accessibility Act, is het toepassingsgebied uitgebreid naar een reeks producten en diensten van private ondernemingen. Daaronder vallen onder meer elektronische handel, bepaalde bank- en betaaldiensten, e-books en diensten rond personenvervoer. Een webshop die aan consumenten verkoopt, valt dus in principe onder die regels. De eisen sluiten inhoudelijk aan bij de WCAG-richtlijnen.
Er zijn uitzonderingen. Zo zijn micro-ondernemingen die diensten aanbieden grotendeels vrijgesteld. Ook kunnen er overgangsregelingen gelden voor bestaande diensten. Omdat de precieze toepassing afhangt van je sector, je omvang en het soort dienst, is het verstandig om je situatie te laten toetsen, bijvoorbeeld bij je beroepsfederatie of een jurist.
Toch is het een vergissing om toegankelijkheid alleen als een juridische verplichting te bekijken. Ook wie formeel niet onder de regels valt, heeft er belang bij. Een toegankelijke site bereikt meer klanten, is doorgaans beter leesbaar voor zoekmachines en straalt zorg uit. En het is veel eenvoudiger om toegankelijkheid vanaf het begin in te bouwen dan om ze achteraf aan een bestaande site toe te voegen.
Hoe zorg je voor contrast en leesbaarheid?
Zorg voor voldoende contrast tussen tekst en achtergrond, een leesbaar lettertype op een comfortabele grootte, voldoende witruimte en korte, heldere zinnen.
Lichtgrijze tekst op een witte achtergrond oogt misschien elegant op het scherm van de ontwerper, maar voor veel lezers is ze moeilijk leesbaar. De WCAG-richtlijnen leggen een minimale contrastverhouding vast tussen tekst en achtergrond, met een iets soepelere norm voor grote titels. Er bestaan gratis tools die het contrast van twee kleuren meteen berekenen. Gebruik ze al bij het kiezen van je huisstijlkleuren.
Kleur alleen mag nooit de enige drager van informatie zijn. Een formulier dat foute velden alleen in het rood markeert, is onbruikbaar voor wie rood en groen niet goed onderscheidt. Voeg daarom altijd een tekst of een symbool toe.
Ook de typografie telt. Een paar vuistregels:
kies een rustig, goed leesbaar lettertype voor lopende tekst en hou sierlijke letters voor titels;
laat bezoekers de tekst vergroten zonder dat de opmaak breekt of tekst verdwijnt;
gebruik voldoende regelafstand en beperk de breedte van tekstblokken;
vermijd lange passages in hoofdletters of cursief;
zorg dat links herkenbaar zijn, niet alleen door kleur maar bijvoorbeeld ook door onderlijning.
Leesbaarheid gaat verder dan het visuele. Schrijf in heldere taal, met korte alinea’s en tussentitels die de inhoud aankondigen. Vermijd vakjargon of leg het uit. Dat helpt mensen met een cognitieve beperking of een andere moedertaal, en het helpt eigenlijk iedereen die snel wil vinden wat hij zoekt.
Kan iemand je site gebruiken zonder muis?
Elke functie op je site moet met het toetsenbord bereikbaar zijn, in een logische volgorde en met een zichtbare focus die toont waar je je bevindt.
Niet iedereen gebruikt een muis. Mensen met een motorische beperking navigeren vaak met het toetsenbord, met een schakelaar of met spraakbesturing. Gebruikers van een schermlezer bewegen zich via toetsencombinaties door de pagina. Ook ervaren gebruikers werken graag met de tabtoets om snel een formulier in te vullen.
Een eenvoudige test kun je zelf doen: leg je muis weg en probeer je site te gebruiken met alleen de tabtoets, de entertoets en de pijltjestoetsen. Drie vragen zijn daarbij belangrijk. Zie je altijd waar je bent? Veel sites verbergen de focusrand om esthetische redenen, waardoor een toetsenbordgebruiker blind navigeert. Is de volgorde logisch, van boven naar beneden en van links naar rechts? En kun je alles bereiken, inclusief het menu, uitklapbare onderdelen, pop-ups en de knop om een cookiebanner te sluiten?
Zeker pop-ups en vensters die over de pagina schuiven, zijn een klassieke valkuil. Als de focus achter het venster blijft hangen, of als je het venster niet met het toetsenbord kunt sluiten, zit de gebruiker vast.
Een handig hulpmiddel is een link “Ga naar de inhoud” die verschijnt zodra iemand de eerste keer op de tabtoets drukt. Daarmee sla je het menu over en spring je meteen naar de kern. Het is een kleine ingreep met een groot effect voor wie anders bij elke pagina door alle menu-items moet tabben.
Een correcte HTML-structuur maakt dit alles veel makkelijker. Echte knoppen, echte links en echte koppen werken standaard met toetsenbord en schermlezer. Problemen ontstaan vooral wanneer ontwikkelaars elementen nabootsen met generieke bouwstenen en scripts.
Wie een professionele website laten maken wil, legt toetsenbordbediening dus best mee vast in de opdracht. Vraag welke elementen de bouwer als echte knoppen en links opbouwt, hoe de focus zichtbaar blijft en of uitklapmenu’s en vensters zonder muis te bedienen zijn. Hoe concreter die afspraken, hoe minder verrassingen bij de oplevering.
Wat maakt een alt-tekst goed?
Een goede alt-tekst beschrijft kort wat een afbeelding in die specifieke context vertelt; puur decoratieve beelden krijgen een lege alt-tekst zodat schermlezers ze overslaan.
De alt-tekst is de tekstuele beschrijving van een afbeelding. Een schermlezer leest ze voor, en ze verschijnt ook als een beeld niet laadt. Zoekmachines gebruiken ze om te begrijpen wat er op een afbeelding staat.
Veel sites vullen dat veld slordig in, met een bestandsnaam of een reeks zoekwoorden, of laten het leeg. Beide zijn onbehulpzaam. Een goede alt-tekst beantwoordt de vraag: wat zou ik zeggen als ik deze afbeelding aan iemand aan de telefoon moest beschrijven, in de context van deze pagina?
Een paar voorbeelden maken het verschil duidelijk:
Situatie | Zwakke alt-tekst | Sterkere alt-tekst |
|---|---|---|
Foto van het team op de pagina “Over ons” | foto team | Het team poseert voor de winkel aan de markt van Lier |
Logo dat naar de startpagina linkt | logo | Naar de startpagina |
Grafiek met de evolutie van een dienst | grafiek | Korte samenvatting van wat de grafiek toont, met de uitleg ook in de tekst |
Decoratieve achtergrondgolf | achtergrond | Lege alt-tekst, zodat het beeld wordt overgeslagen |
Foto van een gerenoveerde badkamer in een case | badkamer | Gerenoveerde badkamer met inloopdouche en lichte tegels |
Voor beelden met veel informatie, zoals schema’s of infografieken, volstaat een korte alt-tekst niet. Geef de inhoud dan ook in de lopende tekst weer. Video’s krijgen ondertitels, en bij voorkeur een korte samenvatting of transcriptie.
Hoe maak je formulieren voor iedereen bruikbaar?
Geef elk veld een zichtbaar label, toon foutmeldingen in tekst bij het juiste veld, vraag niet meer dan nodig en laat genoeg tijd om het formulier in te vullen.
Formulieren zijn vaak het punt waarop een toegankelijke site toch nog struikelt. Een contactformulier, een inschrijving voor een nieuwsbrief of een afrekenproces in een webshop: als een bezoeker daar vastloopt, verlies je hem net op het moment dat hij iets van je wil.
Elk veld heeft een label nodig dat zichtbaar blijft, ook tijdens het typen, en dat in de code aan het veld gekoppeld is. Grijze voorbeeldtekst in het veld zelf, die verdwijnt zodra je begint te typen, is geen vervanging. Verplichte velden geef je aan met tekst, niet alleen met een sterretje in een kleur.
Foutmeldingen zijn de tweede valkuil. “Ongeldige invoer” bovenaan de pagina helpt niemand. Zeg bij het betreffende veld wat er mis is en hoe het opgelost kan worden, bijvoorbeeld “Vul een e-mailadres in met een apenstaartje”. Zorg dat schermlezers de melding ook aankondigen, en dat ingevulde gegevens behouden blijven als het formulier opnieuw verschijnt.
Een captcha met vervormde letters is voor veel mensen een onoverkomelijke drempel. Er bestaan onzichtbare of eenvoudigere manieren om spam tegen te houden. Ook tijdslimieten zijn een probleem voor wie trager typt: geef de mogelijkheid om meer tijd te vragen of vermijd limieten waar ze niet nodig zijn.
Gebruik formulieren daarom als concreet toetsmoment bij de oplevering: vraag de bouwer om een formulier met alleen het toetsenbord en met een schermlezer te demonstreren. Je ziet dan meteen of toegankelijkheid in het proces zit of als nagedachte wordt behandeld.
Waarom test je met echte gebruikers, ook op mobiel?
Geautomatiseerde tools vinden maar een deel van de problemen; pas wanneer echte mensen je site gebruiken, op hun eigen toestel en met hun eigen hulpmiddelen, zie je waar ze vastlopen.
Er bestaan handige gratis hulpmiddelen om een pagina automatisch te scannen op toegankelijkheidsproblemen, zoals ontbrekende alt-teksten, te zwak contrast of velden zonder label. Ze zijn een nuttig vertrekpunt. Maar een tool kan niet beoordelen of een alt-tekst zinvol is, of de volgorde van de inhoud logisch aanvoelt of of een uitleg begrijpelijk is.
Daarvoor heb je mensen nodig. Een kleine test met een paar gebruikers levert vaak verrassend veel inzichten op. Vraag hen om een concrete taak uit te voeren, zoals een dienst vinden en een afspraak aanvragen, en kijk mee zonder in te grijpen. Betrek waar mogelijk iemand die een schermlezer gebruikt, een oudere gebruiker en iemand die vooral op zijn smartphone surft. Verenigingen van en voor mensen met een beperking in Vlaanderen en Brussel kunnen soms helpen om testers te vinden.
Mobiel gebruik verdient aparte aandacht. Knoppen moeten groot genoeg zijn om met een vinger te raken, met genoeg ruimte ertussen. De site moet werken in liggende en staande stand. Inzoomen mag niet geblokkeerd zijn. En tekst moet leesbaar blijven zonder horizontaal te scrollen.
Ook de eenvoud van de technische basis speelt mee. Izoard legt bij zijn websites de nadruk op een lichte opbouw en verwoordt dat zo:
« Strategie eerst. Dan de site. Geen WordPress, geen thema met duizend opties waarvan je er drie gebruikt, geen plugins die maandelijks een update willen. Wat overblijft is HTML en CSS. »
Hoe minder lagen code er tussen de inhoud en de bezoeker zitten, hoe beter je controle houdt over de structuur die schermlezers en toetsenbordgebruikers nodig hebben. Een eenvoudige basis is makkelijker te testen en makkelijker te verbeteren.
Veelgestelde vragen
Moet elke Belgische bedrijfswebsite aan de Europese toegankelijkheidsregels voldoen?
Nee, niet elke site. De regels gelden voor bepaalde producten en diensten, zoals online verkoop aan consumenten, en er zijn uitzonderingen, onder meer voor micro-ondernemingen die diensten aanbieden. Laat je eigen situatie bij twijfel nagaan.
Volstaat een toegankelijkheidsplugin of overlay?
Nee. Zulke tools passen de weergave aan, maar lossen structurele problemen in de code zelden op. Soms maken ze het gebruik met een schermlezer zelfs moeilijker.
Is een toegankelijke site saaier om te zien?
Nee. Toegankelijkheid legt eisen op aan contrast, structuur en bediening, maar laat volop ruimte voor een sterk, eigentijds ontwerp.
Helpt toegankelijkheid ook voor zoekmachines?
Ja, onrechtstreeks. Een duidelijke koppenstructuur, beschrijvende alt-teksten en heldere tekst maken je site ook voor zoekmachines beter leesbaar.
Hoe vaak test ik mijn site op toegankelijkheid?
Telkens wanneer er iets wezenlijks verandert, en daarnaast op vaste momenten. Een nieuwe pagina, een nieuw formulier of een nieuwe huisstijl kunnen ongemerkt nieuwe drempels toevoegen.
Kernpunten
• Toegankelijkheid gaat over iedereen: mensen met een beperking, oudere gebruikers en wie in moeilijke omstandigheden surft.
• Voor bepaalde diensten van private bedrijven, zoals online verkoop, gelden intussen Europese toegankelijkheidseisen, met uitzonderingen.
• Voldoende contrast, leesbare letters en heldere taal maken je inhoud waarneembaar en begrijpelijk.
• Elke functie moet met het toetsenbord bereikbaar zijn, met een zichtbare focus en een logische volgorde.
• Alt-teksten beschrijven wat een beeld in zijn context betekent; decoratieve beelden blijven stil.
• Formulieren met zichtbare labels en duidelijke foutmeldingen voorkomen dat bezoekers afhaken.
• Automatische scans zijn een begin; testen met echte gebruikers, ook op mobiel, toont de echte drempels.


