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.
Kop 1
Kop 2
Kop 3
Kop 4
Kop 5
Paragraaf
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 headingte laten lijken.
H4 weergeven als kop 1
paragraph weergeven als kop 2
Een paragraph als een kop van niveau 7.
Varianten
Verschillende varianten voor uitlijning en weergave
Links uitlijnen
Rechts uitlijnen
Centreren
Klein kapitaal
Gedimt
Tekst met een link en een externe
link Link opent externe pagina.
Gebruik <span class="screenreader-only">Link opent in nieuw tabblad</span>
bij een externe link om voor screenreaders duidelijk te maken dat er een externe pagina geopend wordt.