Praktische voorbeelden om je website digitaal toegankelijk te maken
Geschreven door William Elegeert20 januari 25

Ongeveer één op de zeven mensen leeft met een beperking die beïnvloedt hoe zij de wereld ervaren en omgaan met technologie. In het artikel over WCAG hebben we uitgelegd wat het inhoudt en hoe je je website toegankelijker kunt maken. Hier leggen we uit hoe je dit technisch kunt realiseren.
Gebruik van semantische HTML
Semantische HTML betekent dat je HTML-tags gebruikt die duidelijk maken wat de inhoud betekent of waarvoor het bedoeld is. Deze tags geven extra informatie over de rol en belangrijkheid van verschillende onderdelen van een webpagina.
In tegenstelling tot tags zoals <div>
en <span>
, die geen betekenis toevoegen, geven semantische tags precies aan wat een bepaald deel van de inhoud doet. Denk bijvoorbeeld aan:
<header>
voor het aangeven van een kopgedeelte.<article>
voor een zelfstandig stukje inhoud, zoals een blog of artikel.<footer>
voor de voettekst van de pagina.
Tags zoals <div>
en <span>
zijn puur bedoeld als containers en vertellen niets over de rol van de inhoud.
Ziende gebruikers herkennen visuele elementen zoals koppen of voetteksten vaak meteen, maar voor mensen met een visuele beperking, die schermlezers gebruiken, werkt dat anders.
Met semantische HTML kunnen schermlezers de inhoud beter begrijpen en duidelijk communiceren. Het helpt gebruikers ook om makkelijker door een webpagina te navigeren, omdat de structuur en context duidelijker zijn.
Zo kan een schermlezer bijvoorbeeld zeggen: “De hoofdinhoud begint hier” bij een <main>
-tag. Dit maakt het gebruik van de website voor mensen met een beperking veel eenvoudiger.
Teksten vereenvoudigen met afbeeldingen en video’s
Visuele elementen maken complexe informatie eenvoudiger te begrijpen en te onthouden. Mensen verwerken concepten vaak sneller als deze visueel worden weergegeven, zoals met diagrammen, grafieken of iconen. Hieronder lees je hoe je teksten kunt vereenvoudigen met behulp van afbeeldingen en video’s.
Infographics
Infographics helpen complexe informatie helder en aantrekkelijk te presenteren. Gebruik tools zoals Canva, Adobe Illustrator, of Figma om data en concepten visueel te verduidelijken.
How-to-video’s en instructievideo’s
Video’s zijn ideaal om processen en instructies stap voor stap uit te leggen. Maak gebruik van videobewerkingssoftware zoals Adobe Premiere Pro, Final Cut Pro, of gratis tools zoals DaVinci Resolve en OBS Studio voor schermopnames en bewerkingen.
Voeg tekstalternatieven toe (Alt-tekst)
Alt-tekst maakt afbeeldingen begrijpelijk voor mensen die schermlezers gebruiken. Voor afbeeldingen: Gebruik alt-attributen in HTML om de inhoud kort te beschrijven:
<img src="voorbeeld.jpg" alt="Diagram van de verkoopgroei dit jaar" />
Voor video’s: Plaats een beschrijving van de video-inhoud in een <figcaption>
of in tekst bij de video:
<video src="voorbeeld.mp4" controls></video>
Een demonstratie van het instellen van een slim apparaat voor thuisgebruik.
<figcaption></figcaption>
Voeg ondertitels en audiobeschrijvingen toe
Ondertitels:
- Gebruik tools zoals Rev, Amara, of YouTube’s automatische ondertiteling. Controleer altijd handmatig op fouten.
- Voeg beschrijvingen toe voor geluiden en acties, zoals: [deur piept open] of [achtergrondmuziek speelt zacht].
<video src="voorbeeld.mp4" controls>
<track src="ondertitels-nl.vtt" kind="subtitles" srclang="nl" label="Nederlands">
</video>
Audiobeschrijvingen:
- Gebruik software zoals Adobe Audition of Audacity om audiobeschrijvingen op te nemen en te synchroniseren.
- Beschrijf visuele details die belangrijk zijn voor het begrijpen van de inhoud.
- Voeg deze beschrijvingen toe als een extra audiotrack of integreer ze in de video.
<video src="voorbeeld.mp4" controls>
<track src="audio-beschrijving-nl.vtt" kind="descriptions" srclang="nl" label="Nederlandse audiobeschrijving">
</video>
Transcripten toevoegen
Bied een transcript aan met alle gesproken tekst en relevante visuele details. Dit kan direct op de pagina of via een downloadlink:
<a href="video-transcript.txt" download>Download transcript</a>
Met deze methoden kun je teksten eenvoudiger maken en je inhoud toegankelijker en inclusiever maken voor een breder publiek. Dit helpt niet alleen mensen met beperkingen, maar verbetert ook de algehele gebruikerservaring.
Je websitelettertypen toegankelijk maken
Bij het ontwerpen van een toegankelijke website is de keuze van de juiste lettertypen essentieel. Het goede nieuws is dat je hiervoor geen speciale of dure lettertypen nodig hebt. Veel standaard lettertypen zijn al zeer geschikt en toegankelijk, ook voor mensen met visuele of cognitieve beperkingen. Hieronder lees je alles over het toegankelijk maken van lettertypen, inclusief de keuze van lettertypen, grootte en praktische tips.
Toegankelijke lettertypen kiezen
Standaardlettertypen die bekendstaan om hun toegankelijkheid:
- Veelgebruikte en toegankelijke lettertypen: Tahoma, Calibri, Helvetica, Arial, Verdana en Times New Roman zijn uitstekende keuzes vanwege hun leesbaarheid, vooral voor bodytekst.
- Slab-serif lettertypen: Lettertypen zoals Arvo, Museo Slab en Rockwell zijn ook toegankelijk, maar door hun robuuste en opvallende stijl vaak geschikter voor koppen dan voor doorlopende tekst.
Er wordt vaak gezegd dat sans-serif-lettertypen beter leesbaar zijn op schermen omdat ze geen decoratieve strepen hebben, zoals bij serif-lettertypen. Onderzoek hierover is echter niet eenduidig. Het belangrijkste is dat je lettertypen kiest die herkenbare, duidelijke karakters hebben, ongeacht of ze serif of sans-serif zijn.
Lettergrootte en meeteenheden
Er zijn vier veelgebruikte eenheden om lettergroottes te definiëren:
- Ems (em): Relatief ten opzichte van de grootte van het ouderlijke element.
- Rems (root em): Relatief ten opzichte van de grootte van het hoofdelement.
- Pixels (px): Een vaste maat, niet afhankelijk van andere elementen.
- Punten (pt): Een vaste maat die vooral in drukwerk wordt gebruikt.
Voor toegankelijkheid wordt aangeraden om relatieve eenheden zoals em, rem of percentages te gebruiken. Absolute eenheden, zoals pixels of punten, beperken vaak de mogelijkheid van gebruikers om tekst zelf te vergroten. Relatieve eenheden passen zich daarentegen beter aan verschillende apparaten en schermformaten aan, wat zorgt voor een flexibele en gebruiksvriendelijke ervaring.
Tekststructuur verbeteren
Een goede tekststructuur draagt bij aan toegankelijkheid en leesbaarheid. Het helpt niet alleen om informatie overzichtelijk te maken, maar zorgt er ook voor dat gebruikers met een beperking eenvoudiger door de inhoud kunnen navigeren.
Tips voor een duidelijke tekststructuur:
- Hiërarchie gebruiken: Maak gebruik van HTML-heading-tags om een logische structuur te creëren:
<h1>
voor de hoofdtitel.<h2>
voor hoofdsecties.<h3>
voor subsecties, enzovoort.
- Lijsten gebruiken: Lijsten maken informatie overzichtelijker en gemakkelijker te scannen.
- Gebruik
<ul>
voor opsommingen zonder specifieke volgorde. - Gebruik
<ol>
voor stappen of gerangschikte items. - Beperk elk lijstpunt tot één kernidee voor meer duidelijkheid.
- Gebruik
Visuele scheiding en accenten:
- Gebruik voldoende regelafstand (minimaal 1,5x) en marges om tekstblokken visueel te scheiden.
- Vetgedrukt: Markeer kernwoorden of belangrijke zinnen.
- Cursief: Gebruik dit spaarzaam, omdat het moeilijker leesbaar kan zijn.
- Kleur: Gebruik kleur niet als enige middel om accenten te leggen. Zorg voor voldoende contrast en voeg andere visuele aanwijzingen toe, zoals onderstrepingen of vetgedrukte tekst.
Dynamische typografie voor toegankelijkheid
Dynamische typografie is belangrijk voor blinde en slechtziende gebruikers. Het stelt hen in staat om tekstgrootte en andere typografie-elementen aan te passen aan hun specifieke behoeften. Dit verbetert de ervaring voor gebruikers die schermlezers gebruiken en maakt de inhoud voor iedereen beter toegankelijk.
Met deze tips en aanpassingen kun je je website niet alleen toegankelijker maken voor mensen met beperkingen, maar ook de algehele gebruikservaring verbeteren. Toegankelijke lettertypen zijn niet alleen praktisch, maar ook een stap naar inclusiviteit.
Tools en hulpmiddelen om contrast te meten
Een goed gekozen kleurenpalet met voldoende contrast is cruciaal om je webapp toegankelijk te maken voor gebruikers met visuele beperkingen, zoals kleurenblindheid of slechtziendheid. Het zorgt voor betere leesbaarheid, bevordert inclusiviteit, verbetert de gebruikerservaring en garandeert naleving van toegankelijkheidsnormen.
Het belang van contrast
Het contrast tussen de voorgrondkleur (bijvoorbeeld tekst, iconen of andere elementen) en de achtergrondkleur bepaalt hoe toegankelijk een ontwerp is. Dit wordt beoordeeld volgens richtlijnen zoals de WCAG-normen (Web Content Accessibility Guidelines). Meer informatie over het berekenen van kleurcontrast kun je vinden in bronnen zoals Calculating Color Contrast.
Handige tools om contrast te meten
- Color Contrast Analyser (CCA):
- Beschikbaar voor Windows en Mac.
- Met een ingebouwde kleurkiezer kun je direct contrast testen vanaf elk punt op je scherm.
- Ideaal voor ontwerpers die met desktoptoepassingen werken.
- WebAIM’s Contrast Checker:
- Een gebruiksvriendelijke online tool waarmee je eenvoudig kleurencombinaties kunt testen.
- Geeft direct feedback of je ontwerp voldoet aan WCAG 2.1-normen.
- Accessible Colors:
- Een ander online alternatief voor het testen van contrast.
- Geschikt om snel te controleren of je kleurkeuzes toegankelijk zijn.
Inclusieve ontwerpen maken
Het ontwerpen van toegankelijke webapplicaties gaat verder dan simpelweg voldoen aan richtlijnen. Het draait om het creëren van een omgeving waarin alle gebruikers, ongeacht hun beperkingen, zonder moeite kunnen navigeren en interactie kunnen hebben.
Ongeveer één op de zeven mensen heeft een beperking die hun interactie met technologie beïnvloedt. Dit kunnen tijdelijke, situationele of permanente beperkingen zijn, en hun impact varieert sterk. Door rekening te houden met verschillende behoeften kun je een inclusieve ervaring bieden die iedereen ondersteunt. Toegankelijkheid gaat niet alleen over het oplossen van problemen; het is een kans om een beter, mensgericht ontwerp te realiseren.
Maak van toegankelijkheid een prioriteit
Toegankelijkheid is niet alleen een verplichting, maar een kans om iedereen, ongeacht hun mogelijkheden, een geweldige ervaring te bieden. Door contrast te meten en aan te passen, zet je een grote stap richting inclusieve en gebruiksvriendelijke ontwerpen. Begin vandaag nog met het testen van je kleurkeuzes en maak je website of app toegankelijker voor iedereen. Wij helpen je er graag bij!