heading
Markerar ett element som en rubrik. Använd <h1>–<h6> i första hand — de bär rätt semantik och korrekt nivå direkt. Välj role="heading" endast när du måste uppgradera ett element som inte kan vara ett <h*>.
När ska det användas
Använd alltid <h1> till <h6> i första hand. Det inbyggda rubrikelementet ger dig rollen, nivån och ett inbyggt webbläsarstilark.
role="heading" är lämpligt enbart när du inte kan använda ett inbyggt rubricelement — vanligtvis i ett begränsat CMS som renderar all text som <p> eller <div>. När du gör det MÅSTE du sätta aria-level till ett tal från 1 till 6 (eller högre, men hjälpmedelsteknik ignorerar nivåer över 6 i praktiken).
Hoppa inte över rubriknivåer: ett <h2> ska inte följas av ett <h4> utan ett <h3> däremellan. Skärmläsaranvändare som navigerar via rubriker förlitar sig på att dispositionen är sammanhängande.
Vanliga fel
role="heading"utanaria-level. Rollen kräver att nivån anges.- Visuellt utformade “rubriker” (stor fetstilad text) inbäddade i
<div>eller<span>utan rubrikroll. Skärmläsaranvändare hoppar förbi dem helt. - Flera
<h1>-element på en sida när bara en huvudrubrik avses. Bästa praxis är ett<h1>per sida som namnger huvudinnehållet. - Att hoppa över nivåer — att gå från
h2tillh4— bryter dokumentdispositionen. - Dekorativ text utformad som en rubrik men inte avsedd som sådan, uppmärkt som en rubrik ändå. Förvirrar skärmläsarnavigering.
Exempel
<!-- Att föredra -->
<h2>How to file a complaint</h2>
<!-- Endast när <h2> är omöjligt -->
<div role="heading" aria-level="2">How to file a complaint</div>