Analyse van webtoegankelijkheid

Hoe deze controle werkt

Scanaris analyseert de HTML die je pagina serveert, zonder JavaScript uit te voeren of een browser te openen, en doorloopt acht toegankelijkheidstests die met zekerheid op de code te beslissen zijn. Drie hebben gemiddelde ernst: dat de <html>-tag de taal aangeeft met lang, dat de <meta name="viewport"> bestaat, en dat geen enkel formulierveld (input, select, textarea, exclusief verborgen velden en knoppen) een toegankelijk label mist, dus een <label for> heeft, in een <label> staat, of aria-label, aria-labelledby of title draagt. De andere vijf hebben lage ernst: afbeeldingen zonder alt-attribuut (een leeg alt="" is geldig voor decoratieve; wat faalt is dat het attribuut ontbreekt), links met href en knoppen zonder tekst, zonder aria-label en zonder afbeelding met alt erin, herhaalde id-attributen, elementen met tabindex groter dan nul, en lege koppen h1 tot en met h6. Elke test die faalt, opent zijn eigen bevinding met de telling.

Waarom dit belangrijk is

Ongeveer 15% van de bevolking heeft een beperking, en veel meer mensen gebruiken het web op bepaalde momenten met een schermlezer, alleen met toetsenbord of met maximale zoom. Voor hen is een afbeelding zonder alt een gat, een veld zonder label een vak waarvan je niet weet wat erin moet, en een knop die alleen een icoon is wordt aangekondigd als "knop" en meer niet. Naast ethiek is het wet: de Europese toegankelijkheidsrichtlijn geldt sinds juni 2025 voor de meeste digitale diensten van bedrijven, en in de Verenigde Staten lopen de rechtszaken over ontoegankelijke websites jaarlijks in de duizenden. En het is SEO: de alt, de taal en de kopstructuur zijn precies wat Google leest.

Hoe je het oplost

• Taal: <html lang="nl">. In Nuxt stel je dit in via app.head.htmlAttrs of de i18n-module zet het; in Next.js op de <html> van de rootlayout; in WordPress schrijft language_attributes() het in het thema.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Zonder maximum-scale=1 of user-scalable=no, die het zoomen blokkeren.
• Formulierlabels: één <label for="email"> per veld met zijn id, of het veld binnen het <label>. Toont het ontwerp geen zichtbaar label, dan aria-label="E-mailadres". De placeholder telt niet: die verdwijnt bij het typen.
• Afbeeldingen: beschrijvende alt bij informatieve ("Verkoopgrafiek derde kwartaal"), alt="" bij decoratieve. De afbeeldingscomponenten van Nuxt en Next.js vereisen het attribuut.
• Icoonlinks en -knoppen: aria-label="Menu openen", of visueel verborgen tekst met een sr-only-klasse. Inline SVG-iconen krijgen aria-hidden="true".
• Dubbele ids: komen meestal van herhaalde componenten met een hardgecodeerde id. Leid de id af van een prop of gebruik useId().
• Positieve tabindex: verander ze naar 0 en zet de elementen in de HTML in de volgorde waarin ze doorlopen moeten worden.
• Lege koppen: dienden ze voor de opmaak, vervang ze dan door een div; bevatten ze een icoon, geef ze dan tekst.

Controleer of het opgelost is

curl -s https://jouwdomein.nl | grep -oE '<html[^>]*>|<meta name="viewport"[^>]*>'
curl -s https://jouwdomein.nl | grep -oE '<img[^>]*>' | grep -vc 'alt='

De eerste moet lang en de viewport tonen; de tweede moet 0 geven. Voor de rest geven het Lighthouse-paneel van Chrome (tabblad Toegankelijkheid) of de extensie axe DevTools elk element met zijn selector.

Veelgestelde vragen

Betekent het slagen voor deze acht tests dat mijn site toegankelijk is?

Nee. Het zijn de acht die zonder browser met zekerheid te controleren zijn. Kleurcontrast, zichtbare focus, de echte leesvolgorde en met JavaScript gebouwde componenten vragen een beoordeling met browsertools en, voor iets serieus, een menselijke audit. Ervoor slagen betekent wel dat je de meest voorkomende en makkelijkst te vermijden fouten niet maakt.

Mijn app is een SPA en de initiële HTML is bijna leeg.

Dan ziet de controle weinig, en Google ook. Het is een reden te meer om minstens de hoofdinhoud op de server te renderen; inhoud zonder JavaScript legt het uit.

Waarom is een lege alt correct en een ontbrekende alt niet?

Omdat alt="" tegen de schermlezer zegt "sla deze afbeelding over, hij is decoratief", terwijl de lezer zonder attribuut de bestandsnaam voorleest, die meestal iets is als IMG_4821.jpg. De kopstructuur, die de navigatie met een schermlezer beïnvloedt, wordt ook bekeken door koppen.