Webdeveloper
Artikelen over digitale toegankelijkheid specifiek voor webdevelopers. Semantische HTML, ARIA, focusbeheer en meer.
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. Bijvoorbeeld:
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:
Hoe geef ik een applicatie een accessible name?
Soms kom je in een audit een element tegen met role="application" dat geen toegankelijkheidsnaam (accessible name) heeft. Dat is een probleem, want een schermlezer weet dan niet wat dit onderdeel van de pagina doet. In dit artikel leg ik uit wat role="application" is, wanneer je het gebruikt en hoe je het een correcte naam geeft.
Accessible name: wat moet je weten
Bij Proper Access beginnen we al onze trainingen voor webdevelopers met iets dat simpel lijkt, maar reuze belangrijk is. Als ik je als ontwikkelaar een tip mag geven: begrijp hoe de toegankelijke naam (accessible name) van een interactief element werkt. Het is de basis van digitale toegankelijkheid – en het punt waar het vaakst iets misgaat.
Meerdere knoppen met dezelfde naam
Update 25 jan 2026 Uit ons recent onderzoek met een blinde collega is gebleken dat de meeste mensen liever van kop naar kop navigeren. In plaats van verborgen tekst aan de knop toe te voegen, kun je er voor zorgen dat de naam van een product als een kop is gemarkeerd.
Skiplinks issue op mijn Wordpress website
Op mijn WordPress-website werkte de skiplink niet op sommige pagina’s. Op deze pagina’s heb ik een externe plugin toegevoegd die andere ID’s gebruikt, waardoor de connectie tussen de skiplink in de header en het ID op de content verloren is gegaan.
Toegankelijkheidslabel ontoegankelijk plaatsen (doe dat niet!)
Wanneer je een toegankelijkheidsverklaring hebt opgesteld, kun je een label ophalen dat je op je website kunt plaatsen om de status van je website te tonen. Je vindt het label op deze pagina: https://www.toegankelijkheidsverklaring.nl/verklaringen
Een toegankelijk iframe
Waar moet je opletten als je een iframe digitaal toegankelijk wil toevoegen aan een webpagina? De WCAG stelt een aantal eisen aan de implementatie van een iframe. Dit zijn de kritieke punten.