heading
Markerer et element som en overskrift. Brug <h1>–<h6> først — de giver de rette semantikker og det korrekte niveau uden videre. Brug kun role="heading", når du er nødt til at opgradere et element, der ikke kan være et <h*>.
Hvornår bruges det
Brug altid <h1> til <h6> i første omgang. Det native overskriftselement giver dig rollen, niveauet og et indbygget brugeragent-stylesheet.
role="heading" er kun relevant, når du ikke kan bruge en native overskrift — typisk i et begrænset CMS, der gengiver al tekst som <p> eller <div>. Gør du det, SKAL du angive aria-level med et tal fra 1 til 6 (eller højere, men hjælpeteknologi ignorerer i praksis niveauer over 6).
Undgå at springe overskriftsniveauer over: en <h2> bør ikke efterfølges af en <h4> uden en <h3> imellem dem. Skærmlæserbrugere, der navigerer efter overskrifter, er afhængige af, at strukturen er sammenhængende.
Hyppige fejl
role="heading"udenaria-level. Rollen kræver, at niveauet er angivet.- Visuelt stilede “overskrifter” (stor fed tekst) pakket ind i
<div>eller<span>uden en overskriftsrolle. Skærmlæserbrugere springer helt forbi dem. - Flere
<h1>-elementer på én side, når kun én hovedoverskrift er tilsigtet. Bedste praksis er én<h1>pr. side, der navngiver det primære indhold. - Spring af niveauer — fra
h2tilh4— ødelægger dokumentstrukturen. - Dekorativ tekst, der er stilet til at ligne en overskrift uden at være det, men markeret op som overskrift alligevel. Forvirrer skærmlæsernavigation.
Eksempel
<!-- Foretrukket -->
<h2>Sådan indgiver du en klage</h2>
<!-- Kun når <h2> er umulig -->
<div role="heading" aria-level="2">Sådan indgiver du en klage</div>