Koppen en lijsten: de inhoudsopgave die je niet ziet
Een schermlezer kan van kop naar kop springen, zoals jij met je ogen over een pagina scant. Dat werkt alleen als je koppen echte koppen zijn, in de goede volgorde.
De regel in één zin
Eén h1 per pagina (waar de pagina over gaat), daaronder h2 voor de
hoofdstukken, daaronder h3. Geen niveaus overslaan, en niet kiezen op grootte: hoe
groot een kop is, bepaal je met css.
Wat we vinden
Lijsten die niet kloppen kwamen bij 25 van de 70 gemeten shops voor, en losse lijstitems zonder lijst eromheen bij 16 shops, samen op 240 plekken. Dat klinkt als muggenzifterij, maar het heeft een praktisch gevolg: een schermlezer kondigt een lijst aan met "lijst, zeven items". Klopt de opbouw niet, dan hoort je klant dat niet, en weet hij niet hoeveel maten of kleuren er zijn.
Waar het in een webshop misgaat
- Page builders. Een tekstblok met een groot lettertype ziet eruit als een kop, maar is er geen.
- De productnaam op een categoriepagina. Die hoort een kop te zijn
(
h2ofh3), zodat je van product naar product kunt springen. - Het menu. Een navigatie is een lijst van links. Vaak staan er losse
div's, of staat er wel eenulmet iets anders danlierin. - De voettekst, waar kopjes als "Klantenservice" vaak alleen vetgedrukte tekst zijn.
Wat het je verder oplevert
Een kloppende koppenstructuur is precies wat een zoekmachine gebruikt om te begrijpen waar je pagina over gaat. Dit is een van de plekken waar toegankelijkheid en vindbaarheid hetzelfde werk zijn.
Zo controleer je het
Installeer een gratis uitbreiding die de koppenstructuur toont, of klik met rechts op een kop
en kies Inspecteren: staat er h2, of een div met alleen een eigen stijl? Lees de
koppen daarna achter elkaar door. Als dat een begrijpelijke inhoudsopgave is, ben je er.
Bronnen
- Eigen meting bij 70 Nederlandse webshops, 14 september 2026: list bij 25 shops, listitem bij 16 shops (240 plekken)
- WCAG 2.1, succescriteria 1.3.1 Info en relaties en 2.4.6 Koppen en labels