Sta jij er wel eens bij stil hoe toegankelijk je website is? Weet je dat websites van Nederlandse (semi-)overheid verplicht toegankelijk moeten zijn en dat zij bijvoorbeeld een toegankelijkheidsverklaring op hun website moeten hebben? En dat op 28 juni 2025 de Wet Digitale Toegankelijkheid in de hele Europese Uni van kracht wordt voor bedrijven met een jaaromzet van meer dan € 2 miljoen of met meer dan 10 werknemers. Waarschijnlijk niet. Ook ik stond er niet dagelijks bij stil. Veel meer dan altijd een alt-tekst toevoegen aan afbeeldingen deed ik eigenlijk niet. En dat, terwijl er veel meer bij een toegankelijke website komt kijken. Wat dat allemaal is kun je hieronder lezen. En ja het is een heel verhaal, maar ik maakte een handige gratis checklist.

Vreemde wet

Overigens vind ik de Wet Digitale Toegankelijkheid wel een vreemde wet. Waarom is deze alleen van toepassing voor grote bedrijven? Hebben kleine bedrijven geen klanten die tegen toegankelijkheidsproblemen oplopen? Ik vind juist dat je ook als kleine ondernemer bewust kan ondernemen en voor mij hoort toegankelijkheid daarbij! En het mooie is, is dat toegankelijkheid je helemaal niets hoeft te kosten. Hooguit wat tijd om een aantal aanpassingen op je website door te voeren.

Een praktijkvoorbeeld

Ik werd eens gecontacteerd door Tatjana Wehrmann en Sander Smale van Pilot Radio. Via via hadden ze begrepen dat ik websites bouw. Ze hadden een website voor hun digitale radiostation nodig. Dat leek me een leuke uitdaging, weer eens iets anders dan de websites die ik tot dan toe gemaakt had.

Het allerbelangrijkste: een toegankelijke website

De uitdaging bleek iets groter te zijn. Tatjana en Sander zijn namelijk blind/slechtziend. Het was dus uiterst belangrijk dat de website ook via een schermlezer toegankelijk zou zijn. En dat de toegevoegde functionaliteiten ook voor hen zouden werken. Het ging dus een stapje verder dan het toevoegen van alt-teksten aan afbeeldingen. Maar het was een uitdaging die ik graag aannam. Het resultaat was de Pilot Radio website. Deze website is er niet meer; Tatjana en Sander concentreren zich momenteel onder andere meer op hun toegankelijkheidspodcast.

De verschillende onderdelen van een toegankelijke website

Voor een toegankelijke website zul je naar de volgende onderdelen moeten kijken:

• Afbeeldingen
• Animatie & verandering
• Audio & video
• Formulieren
• Geo-informatie
• Navigatie
• PDF-bestanden
• Tabellen
• Techniek & code
• Tekst
• Vormgeving

Afbeeldingen

Schermlezers lezen alles voor wat op een website staat. Ook afbeeldingen. Althans, wanneer de alt-tekst is ingevuld. Die alt-tekst hoort namelijk te beschrijven wat op een afbeelding te zien is. Nu werk ik met het thema Divi van Elegant Themes en tijdens het bouwen van deze website kwam ik er achter dat Divi de in de mediabibliotheek opgegeven alt-teksten niet altijd overnam! Wel in fotoalbums, maar niet in andere modules. Daar moest ik de alt-teksten nogmaals handmatig onder Attributes in de Advance tab moeten toevoegen. En zelfs dat bleek niet altijd te werken! Vandaar dat ik op de Podcast pagina ook een tekstlink toevoegde om de abonneerknoppen ook voor schermlezers goed leesbaar te maken.

Daarnaast kijkt ook Google naar alt-teksten. Zo kunnen mensen dus ook via afbeeldingen op je website terecht komen. Afbeeldingen vormen dus ook een onderdeel van zoekmachine optimalisatie van websites!

Animatie & verandering

Animatie op een website kan helpen om ergens de aandacht op te vestigen of om iets goed uit te leggen. Maar flitsende elementen kunnen bij bepaalde mensen ook gezondheidsklachten veroorzaken zoals toevallen. Gebruik deze daarom nooit. Andere animaties moeten altijd handmatig stopgezet kunnen worden. Een slideshow of fotocarrousel is ook een vorm van animatie en hiervoor geldt de eis van het door de bezoeker kunnen stopzetten dus ook. Voor flitsen geldt overigens de Three Flashes or Below Threshold, met andere woorden, niet meer dan 3 flitsen per seconde.

Audio & video

Ook hier geldt dat je altijd alternatieven toe moet voegen voor gebruikers die beelden en/of geluiden niet kunnen zien of horen. Ook geldt dat de audio en/of video niet automatisch begint te spelen en dat bezoekers het fragment altijd moet kunnen stopzetten.

Wat kun je doen voor een toegankelijke website:

• Zorg voor een goed tekstueel alternatief. Dit is te vergelijken met de alt-teksten bij afbeeldingen. Audiodescriptie en ondertiteling is prima te doen voor korte fragmenten. Wanneer je gaat ondertitelen doe je dat niet alleen voor de gesproken tekst, maar beschrijf je ook andere dingen die te horen zijn. Denk aan het overgaan van een telefoon, gelach en wanneer de spreker niet in beeld is, wie de spreker is.
• Heb je toch een lang onderwerp? Bedenk of een beknopte versie niet een stuk gebruiksvriendelijker zou zijn.

Formulieren

Wist je dat veel mensen niet hun muis, maar hun toetsenbord gebruiken om een formulier in te vullen? Ik ben zo’n persoon. En ik verwacht dan ook dat ik via mijn Tab-toets van invulveld naar invulveld kan gaan en dat ik via mijn spatiebalk iets kan aan- of juist uitvinken. Ook dit is een onderdeel van een toegankelijke website.

Maar ook het goed aangeven van foutmeldingen is belangrijk. Maakt iemand een fout bij het invullen, maak dan met tekst duidelijk waar de fout zit en wat de fout is. Het alleen rood maken van een kader heeft geen zin want de kleurverandering wordt niet door iedereen gezien en ook schermlezers kunnen hier niets mee. En ook voor mensen die kleurenblind zijn kan zoiets niet genoeg opvallen.

Geo-informatie

Veel websites hebben tegenwoordig een kaart om de plek aan te geven waar het bedrijf zich bevindt. Kaarten zijn over het algemeen niet toegankelijk voor schermlezers, maar je kunt wel een alternatief aanbieden. Een eenvoudige oplossing is om ook je adresgegevens op de pagina op te nemen.

Navigatie

Ik schreef al eens een blog Website navigatie is meer dan alleen het menu. Want ook links, kruimelpaden en call-to-action knoppen zijn onderdeel van de navigatie. Voor wat betreft links zal uit de tekst duidelijk moeten blijken waar de link naar toe gaat. “Klik hier” is dus een voorbeeld van hoe het niet moet. Niet alleen voor websitebezoekers, maar ook voor Google. Want zoekmachines gebruiken de linkteksten om beter te begrijpen waar de pagina naar welke gelinkt wordt, over gaat.

Je hoofdmenu wil je op alle pagina’s hetzelfde hebben. Zo raken bezoekers niet in de war. En houd rekening met het feit dat niet iedereen via de homepage op jouw pagina terechtkomt. Zorg er voor dat men altijd weet waar men zich in de website bevindt.

Wanneer een afbeelding ook een link is, zal uit de alt-tekst moeten blijken waar de bezoeker terecht komt wanneer hij of zij op de afbeelding klikt.

PDF-bestanden

Ik raadde het gebruik van PDF-bestanden op websites eigenlijk altijd al af. Waarom zou je PDF-bestanden gebruiken wanneer je over het algemeen ook alles wel op een webpagina kan plaatsen? Waarom zou je bezoekers van je website weghalen door ze in een programma een PDF te laten openen? Waarom zou je bezoekers langer laten wachten; een PDF-bestand openen duurt vaak langer dan het openen van een webpagina. En denk ook eens aan het feit dat meer dan 50% van de websitebezoekers een website tegenwoordig niet meer op een desktop computer bekijken. Een PDF bekijken op een telefoonscherm is geen pretje! En veel PDF’s kunnen helaas door schermlezers niet goed voorgelezen worden.

Mocht je toch een PDF gebruiken dan gelden hier eigenlijk dezelfde eisen voor als voor toegankelijke websites; een goed contrast, alt-teksten bij afbeeldingen, goed gebruik van links, eenvoudig invulbare formulieren, etc. Een standaard PDF voldoet over het algemeen niet aan die eisen.

Tabellen

Tabellen zijn over het algemeen goed toegankelijk door het gebruik van de juiste code voor kolommen en voor rijen. Wel kan het handig zijn om tabellen te voorzien van een bijschrift en van een samenvatting. Op die manier hoeft een bezoeker niet eerst de gehele tabel tot zich proberen te nemen, voordat de bedoeling van de tabel duidelijk is.

Houd er altijd rekening mee dat een tabel ook op het kleine scherm van een mobiele telefoon goed leesbaar moet zijn. Wanneer je te veel kolommen gebruikt is dit zelfs wanneer de tabel responsive is, vaak niet het geval. Probeer dan de tabel anders op te bouwen of het gebruik van een tabel te voorkomen. Zo kunnen tarieven voor vakantie accommodaties ook prima als regels tekst weergegeven worden.

Techniek & code

Een website bestaat uit HTML-code. Zo zal voor een paragraaf de code <p> gebruikt worden en voor een kop een <h1> tot en met <h6>. De H1 code gebruik je maar één keer per pagina en wel voor de titel van de pagina. Zo weten schermlezers en Google waar de pagina over gaat. Voor tussenkopjes gebruik dan de H2 code.

Ik raadde iedereen al aan om regelmatig tussenkopjes te gebruiken. Dit om een webpagina beter leesbaar te maken. Van Tatjana leerde ik dat zij net zoals ziende bezoekers een website scant met behulp van tussenkopjes.

Wil je meer lezen over HTML? En er mee spelen? Ga dan naar de w3schools webpagina over HTML. W3schools is voor mij het naslagwerk wanneer ik wil weten hoe ik iets in HTML kan en moet doen. Want HTML is eigenlijk gewoon een taal, waar net zoals in andere talen, regels voor gelden.

Tekst

Teksten op een toegankelijke website hebben een bepaalde structuur; koppen, paragrafen, citaten, opsommingen, etc. Die structuur wordt aangebracht door de HTML-code van de website.

Voor het benadrukken van een tekstgedeelte wordt vaak gebruik gemaakt van vette tekst. Dit werkt prima voor mensen die de website voor zich zien. Maar sommige schermlezers negeren deze code <b>, net zoals de code <i> voor cursieve teksten. Gebruik daarom in plaats van <b> de code <strong> en de code <em> in plaats van <i>.

Kies sowieso een goed leesbaar lettertype. Sinds 2020 is er een speciaal, nieuw lettertype voor mensen met een visuele beperking: Luciole.

Lees meer over het lettertype Luciole in mijn Buro RaDer Tips & tricks Een mooi lettertype voor visueel beperkte mensen. Deze Buro RaDer website gebruikt dit lettertype.

Vormgeving

Ook hier zijn enkele zaken om rekening mee te houden om een website toegankelijk te maken. Wees bijvoorbeeld consequent. Toon menu-items op alle pagina’s in dezelfde volgorde en op dezelfde plaats. En zorg voor een goed contrast tussen de achtergrond en de tekst. Wanneer je tekst in een foto toont, kies dan een foto waar je de tekst in bijvoorbeeld een stuk blauwe lucht kan tonen.

Online contrast van website testen is supereenvoudig met de gratis online tool van Adobe. Contrast is nodig om er voor te zorgen dat de teksten op een website goed leesbaar zijn. Contrast is dan ook een van de zaken waarmee je een website goed toegankelijk kunt maken.

Zelf online contrast van website testen

Ga naar de color contrast analyzer op de Adobe website en ga in deze online tool een tekstkleur en een achtergrondkleur in. De tool zal voor 3 onderdelen aangeven of de ingegeven kleuren voldoende contrast opleveren:

• normale tekst, de zogenaamde platte tekst
• grote tekst zoals de koppen en tussenkopjes
• grafische onderdelen zoals iconen

Alternatieven voor ingegeven kleuren

Wanneer er niet voldoende contrast is, geeft de tool een alternatieve kleur aan, waarmee wel voldoende contrast behaald kan worden. Afhankelijk van de kleuren geeft de tool een alternatieve achtergrondkleur en/of een alternatieve tekstkleur aan.

Testen, testen en nog eens testen

Tijdens de ontwikkeling van de website voor Pilot Radio testte ik heel wat af om een toegankelijke website te verkrijgen. Zo wilden Tatjana en Sander kunnen chatten met luisteraars. De door mij geïnstalleerde Live Chat plugin van Tidio bleek voor hen niet te werken. De chatfunctie was zichtbaar, maar de chats zelf niet, omdat deze in een pop-up scherm openden welke niet voor de schermlezer toegankelijk was.

Uiteindelijke installeerde ik de Click to Chat for WhatsApp plugin welke probleemloos toegankelijk is.

Hetzelfde probleem van een niet voor schermlezers zichtbaar pop-up scherm geldt voor de Podcast Subscribe Buttons plugin. Uiteindelijk maakte ik zelf abonneerknoppen voor de podcast.

Handige checklist toegankelijke website

Zoals ik in de inleiding al schreef, ik maakte een gratis handige checklist waarmee je kunt controleren of jouw website wel goed toegankelijk is. Download nu de checklist toegankelijke website en ga snel aan de slag.

Met regelmaat plaats ik Blogs en korte Tips & tricks. Wil je mijn tips en blogs niet missen? Schrijf je dan in voor mijn nieuwsbrief.