Bij het snel in elkaar zetten van een website, kiezen veel webdesigners er voor om kopelementen eenmalig in een bepaalde styling te zetten en op willekeurige plekken aan te roepen waar die styling gewenst is. Dit kan leiden tot de melding “Kopelementen worden niet weergegeven in aflopende volgorde” of in het Engels “Heading elements are not in a sequentially-descending order”.
De impact voor de toegankelijkheid #
Wanneer een schermlezerapp of een brailleleesregel probeert om de inhoud van jouw webpagina aan een slechtziende te presenteren, is deze sterk afhankelijk van de volgorde van jouw koppen. Dit zijn de zogenaamde <h> tags. Die volgorde maakt het mogelijk om gemakkelijk delen van jouw teksten over te slaan. Klopt die volgorde niet, kan dat tot navigatieproblemen leiden en mogelijk tot het niet goed begrijpen van jouw teksten.
De impact voor SEO #
Daarnaast heeft “Kopelementen worden niet weergegeven in aflopende volgorde” ook impact op jouw SEO. De Ai van Google is immers ook een soort blinde als het gaat om het interpreteren van de samenhang van jouw website. Ook Google verwacht een logische volgorde van de <h> tags op jouw website om de semantiek van jouw teksten goed te begrijpen en te indexeren.
Voorbeeld van een incorrecte kopelementen volgorde #
<h1>Dit is de titel van mijn belangrijke tekst</h1>
<h2>Dit is ook heel belangrijk om te weten</h2>
<h4>Dit is belangrijke mededeling</h4>
<h3>Dit is een voorbeeld van wat ook belangrijk is om te weten</h3>
<h3>Dit is ook een voorbeeld van wat ook belangrijk is om te weten</h3>
<h2>En hier gaan we weer verder met iets anders belangrijks</h2>
In bovenstaand voorbeeld zie je dat de h4 tag na de h2 tag komt. Hierdoor klopt de volgorde niet. Een h4 is altijd de stap na een h3 en nooit na een h2. Onderaan zie je dat je vanuit h3 ineens teruggaat naar een h2. Dat kan wel omdat die h2 eigenlijk weer een ander subonderwerp aansnijdt van de h1 die helemaal bovenaan het verhaal staat.
Voorbeeld van een correcte kopelementen volgorde #
Stel dat je toch afhankelijk bent van de vormgeving van die h4. Dan kun je dit oplossen door in jouw CSS een klasse aan te maken die je bijvoorbeeld .h4-style noemt. Wanneer je dan een h3 hebt die eruit moet zien als een h4, roep je die aan als <h3 class=”h4-style”> en heb je alsnog de gewenste styling. Je krijgt dan het volgende resultaat:
<h1>Dit is de titel van mijn belangrijke tekst</h1>
<h2>Dit is ook heel belangrijk om te weten</h2>
<h3 class=”h4-style”>Dit is belangrijke mededeling</h3>
<h3>Dit is een voorbeeld van wat ook belangrijk is om te weten</h3>
<h3>Dit is ook een voorbeeld van wat ook belangrijk is om te weten</h3>
<h2>En hier gaan we weer verder met iets anders belangrijks</h2>
Heb je hulp nodig met dit onderwerp? We staan voor je klaar.