Wat is de rol ‘heading’?
Met role="heading" kun je een element dat géén kop is (zoals een <div> of <p>) toch de semantiek van een kop geven. Dit valt onder ARIA (Accessible Rich Internet Applications): een set HTML-attributen waarmee je extra informatie toevoegt voor assistieve technologie, zoals schermlezers. ARIA kan helpen als je native HTML niet kunt gebruiken, maar het uitgangspunt blijft: gebruik liever standaard koppen (<h1> t/m <h6>) en zet ARIA alleen in als het echt nodig is.
Waar op letten
- Gebruik liefst standaard HTML-koppen (
<h2>,<h3>, etc.). Dat is robuuster en werkt betrouwbaarder in browsers en assistieve technologie. - Gebruik
role="heading"alleen als je echt niet met<h1>t/m<h6>kunt werken (bijvoorbeeld in een component dat technisch lastig om te bouwen is). - Gebruik je
role="heading", dan moet je altijd een kopniveau meegeven metaria-level. Let op: het maximale niveau is 6 (dusaria-level="1"t/maria-level="6"). Zonder niveau kan een schermlezer de kop niet goed in de koppenstructuur plaatsen. - Zorg dat het niveau past in de koppenhiërarchie van de pagina. Een
aria-level="4"zonder eerdere niveaus is net zo onlogisch als een<h4>direct na een<h2>.
Gebruik liever native HTML
Als het kan: vervang een “kop” die als <p> of <div> is opgemaakt door een echte kop. Dat is beter voor screenreaders, navigatie en onderhoud.
Voorbeeld: fout en goed
Dit is fout, omdat er geen kop-element wordt gebruikt en het kopniveau ontbreekt:
<p role="heading" class="info-text1">Kies een dienst/product</p>
Dit is beter: gebruik native HTML-koppen:
<h2 class="info-text1">Kies een dienst/product</h2>
Als je echt niet anders kunt, gebruik dan role="heading" mét aria-level:
<p role="heading" aria-level="2" class="info-text1">Kies een dienst/product</p>