Gebruik van koppen

Gebruik koppen alleen in de 'echte' content, niet in sidebars, menu's, footers, etc.
Meer informatie over het gebruik van headings vindt je bij de sectie layout.

Layout van een kop veranderen

Door een element role="heading" en een class .is-h# te geven kan een element als een kop worden weergegeven. Het hekje moet je natuurlijk vervangen door een getal met de waarde getal van 1 t/m 5.

Gebruik en toegankelijkheid

Gebruikers van screenreaders gebruiken headers vaak om een indruk te krijgen van de structuur van een pagina. Wijk alleen van de standaard af als je heel zeker weet wat je doet.

Sla ook geen niveaus over; dus gebruik geen H3 zonder dat er een voorgaande H2 is.

Als je een heading 'dieper' wil dan heading level 6 (html gaat niet verder dan h6), gebruik dan role="heading" aria-level="x". In het laatste voorbeeld wordt een paragraaf als een h7 gekenmerkt. Let op: met deze methode is dat voor mensen met een screenreader merkbaar, maar visueel niet, omdat UNO geen styling heeft voor h6 of 'virtuele headers'. Je kan zo'n virtuele kop ook stylen door er class="is-hx" op te zetten en het daarmee op een bestaande heading te laten lijken.

Varianten

Verschillende varianten voor uitlijning en weergave