Hieronder zie je twee voorbeelden. Op het oog lijkt de eerste tekst hetzelfde als de tweede, maar als je in de broncode kijkt, zie je het verschil.

De eerste tekst heeft:

een duidelijke <h1> als hoofdtitel
logische tussenkoppen (<h2>)
en een echte lijst met de tags <ul> en <li>

Dit zorgt ervoor dat screenreaders de tekst goed kunnen interpreteren en gebruikers snel door de inhoud kunnen navigeren.

In het tweede voorbeeld ontbreken deze structuurregels. De koppen springen van <h3> naar <h2> en dan weer naar <h4>.En de opsomming is alleen visueel, niet semantisch. Daardoor is het voor screenreadergebruikers veel verwarrender.

Kopniveau 1: Nieuwsbericht Nieuwe wet toegankelijkheid. Paragraaf. Websites en apps moeten voldoen aan WCAG 2.1 niveau AA.
Kopniveau 2: Wat betekent dit? Paragraaf.
Kopniveau 2: Gevolgen. Lijst met 3 items.
Item 1: Beter bruikbaar voor iedereen.
Item 2: Verhoogde klanttevredenheid.
Item 3: Verbeterde SEO.

Toelichting:

Hier is een <h1> aanwezig. Dat is altijd de hoofdtitel van de pagina.
Screenreaders hebben een sneltoets om direct naar deze titel te springen. Dit maakt de gebruiker ook meteen duidelijk waarover het artikel gaat.
Daarnaast is de opsomming correct met <ul><li>, waardoor de screenreader laat weten dat dit een “Lijst met 3 items” is, waarna elk punt als apart item wordt voorgelezen.

Kopniveau 2: Nieuwsbericht Nieuwe wet toegankelijkheid. Paragraaf.
Kopniveau 4: Wat betekent dit? Paragraaf. Websites en apps moeten voldoen aan WCAG 2.1 niveau AA.
Kopniveau 4: Gevolgen.
Streepje beter bruikbaar voor iedereen.
Streepje verhoogde klanttevredenheid.
Streepje verbeterde SEO.

Toelichting:

De <h1> mist, en dat is de hoofdtitel van de pagina. Screenreaders hebben een sneltoets om direct naar deze titel te springen. Ontbreekt deze <h1>, dan hoort de gebruiker niet meteen waar de pagina over gaat. En dat is alsof je een boek openslaat zonder titel: je weet niet precies wat je mag verwachten.
Hier wordt van een <h2> naar <h4> gesprongen. Bij langere teksten kan een gebruiker denken dat er informatie wordt overgeslagen of dat er koppen ontbreken.

Goede versie

Nieuwsbericht: Nieuwe wet toegankelijkheid

Vanaf 2025 wordt digitale toegankelijkheid verplicht voor meer organisaties.

Wat betekent dit?

Websites en apps moeten voldoen aan WCAG 2.1 niveau AA.

Gevolgen

Beter bruikbaar voor iedereen
Verhoogde klanttevredenheid
Verbeterde SEO

Slechte versie