Wat is het verschil met een koppenstructuur?
Visuele hiërarchie is wat je oog ziet; je koppenstructuur is de logische indeling voor zoekmachines en schermlezers. Ze horen samen te vallen, maar dat doen ze lang niet altijd.
Een grote tekst is niet automatisch een kop.
En een kop hoeft niet groot te zijn.
De koppenstructuur
Een geneste opbouw van h1 tot h4, die aangeeft hoe je inhoud is ingedeeld. Onzichtbaar maar wel gelezen.
Meer daarover lees je bij accessibility.
De visuele hiërarchie
Wat opvalt door grootte, kleur en ruimte. Zichtbaar, maar voor een machine betekenisloos.
Meer daarover lees je bij wat visuele hiërarchie is.
Waar het misgaat
Een dikgedrukte alinea die eruitziet als een kop maar het niet is. Een schermlezer slaat hem dan over bij het navigeren.
Meer daarover lees je bij ui.
Mijn vuistregels
- Gebruik echte koppen, geen dikgedrukte tekst.
- Sla geen niveaus over.
- Laat je opmaak de structuur volgen.
- Wijk alleen bewust af.
Die vierde mag: een h2 die kleiner oogt dan een h3 kan een geldige keuze zijn, zolang de structuur klopt.
Hoe je het controleert
Bekijk je pagina zonder opmaak, of laat je koppenlijst tonen met een browsertoevoeging. Klopt die lijst als inhoudsopgave, dan zit het goed.
Meer daarover lees je bij typografie.
Waarom beide nodig zijn
Je oog volgt de een, je zoekmachine en je schermlezer de ander. Laat je er een liggen, dan verlies je een van beide groepen.
Meer daarover lees je bij design system.