Een toegankelijke website start met duidelijke structuur

Sa11y is een eenvoudige toegankelijkheidschecker die je rechtstreeks in je browser gebruikt. Het werkt zo:

1. Drag de 'bookmarklet plugin' naar je bookmarks van je browser.
2. Surf naar je webpagina die je wil nakijken.
3. Klik op de Sa11y-bookmarklet.

Sa11y toont onmiddellijk visuele markeringen op je pagina. Je ziet waar contrastproblemen zijn, waar alt-teksten ontbreken, of waar headings niet logisch opgebouwd zijn. Zo krijg je meteen inzicht in de grootste struikelblokken.

Veelvoorkomende issues die Sa11y opspoort:

• Afbeeldingen zonder beschrijvende alt-tekst
• Tekst die onvoldoende kleurcontrast heeft
• Links met vage labels (“klik hier”)
• Foutieve headingstructuur

Een goede headingstructuur is de ruggengraat van je webpagina. Voor lezers zorgt het voor overzicht, voor screenreaders is het dé manier om de inhoud logisch te navigeren.

HeadingsMap is een handige Chrome-extensie die de headingstructuur van elke pagina toont.

Zo gebruik je het:

1. Installeer de extensie in je browser.
2. Open een webpagina en klik op het icoon.
3. Je ziet meteen of je hiërarchie klopt: één H1 bovenaan, daarna H2’s en eventueel H3’s of H4’s.

Veelgemaakte fouten die je met HeadingsMap ontdekt:

• Meerdere H1’s op dezelfde pagina
• Sprongen van H1 → H4 zonder tussenliggende niveaus
• Headings die puur voor vormgeving gebruikt worden in plaats van voor structuur