1-3-1
Actieve pagina
Je bent op de pagina “Over ons” en in het menu is die link visueel anders — onderstreept, een andere kleur, vetgedrukt. Je weet waar je bent.
Doorgestreepte prijzen
49,99 doorgestreept, 29,99 ernaast. Je ziet direct: korting. Maar een schermlezer leest: “49 euro 99. 29 euro 99.” Geen “oude prijs”, geen “nieuwe prijs”, geen context.
Voortgangsbalken
Stap 2 van 4. Je ziet een balkje dat voor twee derde is gevuld. Je weet waar je bent in het proces.
aria-hidden: wat het doet en wanneer je het wel of niet gebruikt
Je controleert een pagina met de WCAG Radar van Proper Access en zet de optie “Verborgen elementen” aan. Er lichten een paar plekken op. Bij elk daarvan staat: aria-hidden.
Foutmeldingen
Je vult een formulier in, klikt op verzenden, en ergens bovenaan verschijnt een rode tekst.
Fieldset legend
“Hoe wil je benaderd worden?” Met daaronder drie radiobuttons: telefoon, e-mail, brief. Je begrijpt direct dat die opties bij die vraag horen.
Labels
Klik eens op het woord naast een checkbox. Als er niks gebeurt, is het label niet gekoppeld aan het invoerveld. Dat is een gemiste kans, niet alleen voor toegankelijkheid, maar voor iedereen.
Tabellen
Een tabel met openingstijden. Maandag: 09:00 tot 17:00. Visueel snap je direct welke dag bij welke tijd hoort. Maar als die tabel is gebouwd met divjes in plaats van echte table-elementen, ziet een schermlezer alleen losse stukjes tekst. “Maandag.” “09:00 - 17:00.” Zonder de relatie ertussen.
Kopniveaus
Stel je voor: je opent een boek en de inhoudsopgave gaat van hoofdstuk 1 direct naar paragraaf 3.2.
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.
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:
Zo controleer je de koppenstructuur van je website
Een logische koppenstructuur (H1, H2, H3, …) is cruciaal voor webtoegankelijkheid én SEO. Maar hoe weet je of jouw pagina goed is opgebouwd? Met de gratis browserextensie HeadingsMap zie je in één oogopslag of de structuur klopt en waar verbeteringen nodig zijn. In deze handleiding lees je stap voor stap hoe je de tool gebruikt en waar je op moet letten.