Webdeveloper
Artikelen over digitale toegankelijkheid specifiek voor webdevelopers. Semantische HTML, ARIA, focusbeheer en meer.
Taalswitch met alleen 'EN' en 'NL': hoe maak je die toegankelijk?
Je hebt vast wel eens zo’n strakke taalswitch gezien: twee letters, een sliding indicator, mooi geanimeerd. EN | NL. Simpel. Elegant. En meestal compleet ontoegankelijk.
Logo in een h1-tag? Waarom dit fout is voor SEO en a11y
Waarom je logo niet in een h1-tag hoort: de geschiedenis van een hardnekkige fout Het is 2026. We bouwen apps met React Server Components, we deployen naar edge networks, we optimaliseren voor Core Web Vitals. En toch — toch — zie ik nog steeds websites waar het logo in een <h1> zit.
Accessibility Tree in Chrome: Installatie & Interpretatie Gids [2026]
Accessibility Tree in Chrome: Installatie en Interpretatie Wat is de Accessibility Tree? De Accessibility Tree is een representatie van de webpagina die door hulpsoftware (zoals schermlezers) wordt gebruikt. Het is een vereenvoudigde versie van de DOM-tree die alleen toegankelijkheidsrelevante informatie bevat.
Native HTML-componenten en kleurcontrast volgens WCAG 2.1
Native HTML-componenten en kleurcontrast volgens WCAG 2.1 Informatieve en interactieve interface-elementen zoals knoppen, selectievakken en schuifregelaars moeten voldoende contrast hebben zodat ze zichtbaar zijn voor alle bezoekers. In de praktijk roept dit vaak vragen op bij audits en code-reviews: moet ik het kleurcontrast van elk zichtbaar UI-element controleren en verbeteren?
Submenu dichtklappen
Toetsenbordfocus moet logisch zijn Als bezoekers met het toetsenbord door een website navigeren, moeten interactieve elementen in een logische volgorde focus krijgen. Logisch betekent: aansluitend op de visuele volgorde. Wijkt de focusvolgorde daar sterk van af, dan wordt de website moeilijk te gebruiken voor mensen die geen muis kunnen of willen gebruiken.
Automatisch toepassen van huisstijlkleuren in software: contrastproblemen voorkomen
Sommige softwareleveranciers die SAS-achtige platforms aan meerdere klanten aanbieden, bieden de mogelijkheid om de interface automatisch te stylen. Dit gebeurt dan op basis van de huisstijl van de klant.Vaak wordt hiervoor het kleurenpalet uit het logo van de organisatie gebruikt. Hoewel dit op het eerste gezicht logisch en efficiënt lijkt, brengt deze aanpak een belangrijk risico met zich mee. Het gaat daarbij om onvoldoende kleurcontrast van tekst, wat direct invloed heeft op de digitale toegankelijkheid.
Tabel met knoppen om in de kolommen te sorteren
Sorteerbare tabellen kom je overal tegen: in dashboards, overzichtspagina’s, webshops en CMS-systemen. Je klikt op een kolomkop en de tabel sorteert zichzelf. Visueel is dat duidelijk, maar voor een schermlezergebruiker is het vaak onzichtbaar. De kolomkop ziet er niet uit als iets interactiefs – en de schermlezer vertelt het ook niet.
Hoe verwijder ik de melding ‘Google vragen over dit bericht’ – en waarom zou je dat willen?
Als je regelmatig digitale toegankelijkheid test, dan weet je hoe onmisbaar de Tab-toets is. Het is dé manier om snel te controleren of een website met alleen het toetsenbord te bedienen is. Tijdens onze audits zeg ik het altijd: wat niet met de Tab-toets bereikbaar is, is ook niet bereikbaar voor veel hulpsoftware.
Hoe test je elementen die op hover, focus of klik verschijnen (en meteen weer verdwijnen)?
Sommige UI-elementen verschijnen alleen kort — bijvoorbeeld vensters, dropdowns of menus die op hover of focus zichtbaar worden. Die kunnen interactieve onderdelen bevatten die je moet testen op toegankelijkheid. Denk aan:
Hoe test ik focus zichtbaarheid
Navigeer je met de muis door een website, dan zie je welk element actief is doordat je muisaanwijzer erop staat. Maar voor mensen die het toetsenbord gebruiken, is er een ander visueel signaal nodig: de focusmarkering. Zonder die markering ben je verdwaald op de pagina. Je drukt op Tab, er gebeurt iets – maar je hebt geen idee waar je bent.
Hoe test ik focusvolgorde?
Focusvolgorde is een van die dingen die je pas opvalt als het misgaat. Je drukt op Tab en ineens spring je van de header naar de footer, of je opent een modal en de focus blijft achter de overlay hangen. Voor iemand die alleen het toetsenbord gebruikt, is dat het verschil tussen een bruikbare website en een onbruikbare.
Hoe toegankelijk is het `<dl>`-element?
Wil je op een webpagina een relatie tussen termen en definities presenteren, dan ligt het gebruik van het <dl>-element voor de hand. Het bestaat uit een container (<dl>) waarin je per term een <dt> (definition term) gebruikt, gevolgd door een <dd> (definition description). Je ziet dit veel terug in juridische teksten, woordenlijsten of bij gegevens die in een tabel lay-out worden gepresenteerd, zoals openingstijden: