heading
Markeert een element als koptekst. Gebruik bij voorkeur <h1>–<h6> — die dragen de juiste semantiek en een correct niveau. Gebruik role="heading" alleen wanneer een element niet als <h*> kan worden gemarkeerd.
Wanneer te gebruiken
Gebruik altijd bij voorkeur <h1> tot en met <h6>. Het native heading-element geeft de role, het niveau en een ingebouwde user-agent-opmaak.
role="heading" is alleen geschikt wanneer het niet mogelijk is een native koptekst te gebruiken — doorgaans in een beperkt CMS dat alle tekst als <p> of <div> weergeeft. Wanneer dit het geval is, MOET aria-level worden ingesteld op een getal van 1 tot en met 6 (of hoger, maar hulptechnologie negeert niveaus boven 6 in de praktijk).
Sla geen niveaus over: een <h2> mag niet direct worden gevolgd door een <h4> zonder <h3> ertussenin. Schermlezers die per koptekst navigeren, zijn afhankelijk van een coherente documentstructuur.
Veelvoorkomende fouten
role="heading"zonderaria-level. De role vereist dat het niveau wordt opgegeven.- Visueel gestileerde “kopteksten” (grote vette tekst) in een
<div>of<span>zonder heading-role. Schermlezers slaan ze volledig over. - Meerdere
<h1>-elementen op één pagina terwijl slechts één hoofdkoptekst bedoeld is. Best practice is één<h1>per pagina die de hoofdinhoud benoemt. - Niveaus overslaan — van
h2naarh4springen — verbreekt de documentstructuur. - Decoratieve tekst die als koptekst is opgemaakt, maar niet als zodanig bedoeld is. Dit verwarrt de navigatie via de schermlezer.
Voorbeeld
<!-- Voorkeur -->
<h2>Hoe een klacht in te dienen</h2>
<!-- Alleen wanneer <h2> niet mogelijk is -->
<div role="heading" aria-level="2">Hoe een klacht in te dienen</div>