Begrepp

Rubrikhierarki

Se även: heading levels, heading structure, heading order

Den strukturella användningen av `<h1>` till `<h6>` för att förmedla innehållsorganisation. Skärmläsaranvändare navigerar via rubriker; en inkohärent hierarki gör sidan inkohärent för dem. WCAG 1.3.1 kräver programmatisk rubrikstruktur.

Rubrikhierarki är disciplinen att använda <h1>–<h6>-element för att bilda ett konsekvent dispositionsschema av sidans innehåll. Gjort rätt ger det skärmläsaranvändare en gratis innehållsförteckning. Gjort fel — hoppade nivåer, enbart dekorativa rubriker, flera h1:or, generiska divs som rubriker — gör sidan inkohärent för hjälpmedelstekniksanvändare.

Grundstrukturen

<h1>Artikeltitel (en per sida)</h1>
  <h2>Huvudavsnitt</h2>
    <h3>Underavsnitt</h3>
    <h3>Underavsnitt</h3>
  <h2>Huvudavsnitt</h2>
    <h3>Underavsnitt</h3>
      <h4>Under-underavsnitt</h4>

Reglerna:

  1. En <h1> per sida — sidans primära titel. Flera h1:or förvirrar skärmläsare om sidans identitet.
  2. Inga hoppade nivåer nedåt. En <h2> kan följas av en <h3> (en nivå djupare) men inte av en <h4> (två nivåer djupare). Att hoppa en nivå signalerar till skärmläsaren att något missades däremellan.
  3. Rubriker återspeglar innehållsstruktur, inte visuell stil. Om en text ser stor ut men inte är en rubrik för nytt innehåll, använd ett stiliserat stycke, inte en rubrik.
  4. Inga tomma rubriker. <h2></h2> är meningslöst. Fyll det eller ta bort det.

Varför skärmläsare bryr sig

Den vanligaste enskilda navigationsoperationen för skärmläsare är “hoppa till nästa rubrik” — H-tangenten i JAWS och NVDA, rotor-läget “Rubriker” i VoiceOver, rubrikläsningskontrollen i TalkBack.

En användare som öppnar en lång artikel trycker H upprepade gånger för att bilda sig en uppfattning om artikelns struktur innan de läser den. Om rubrikerna är koherenta får de en gratis disposition av texten. Om rubrikerna är enbart dekorativa eller hoppar nivåer får de brus.

Vad som går fel i produktion

  • Ingen <h1>. Sidan saknar primär rubrik. Skärmläsare annonserar sidans titel från <title>, men in-page-rubriknavigering har inget ankare. Vanligt på dåligt strukturerade CMS-sidor där artikeltiteln är en stiliserad text men aldrig märkt som <h1>.
  • Flera <h1>:or. “Hjältetitel” + “första avsnittstiteln” båda märkta <h1>. Skärmläsaranvändare hör två h1:or och kan inte avgöra vilken som är sidtiteln.
  • Hoppade nivåer. <h1> → <h3> för att designen inte ville ha <h2>-storlekad text. Skärmläsarnavigering läser “saknad rubriknivå”.
  • Divs stilade som rubriker. <div class="hed-xl">Avsnittstiteln</div>. Skärmläsaren får ingen rubrik. Åtgärd: använd rätt <hN>, styla med CSS.
  • Rubriker används för layout. Att sätta <h2> på en sidopanelsetikett för att den ska se ut som en rubrik visuellt, men etiketten är inte en rubrik innehållsmässigt. Använd ett stiliserat stycke.

Hur man granskar rubrikhierarki

Tre metoder:

  1. Skärmläsarens rubriklist. Öppna Insert+F7 i NVDA eller VO+U → Rubriker. Den visade listan ska vara meningsfull som en disposition av sidan. Om inte, åtgärda uppmärkningen.
  2. HeadingsMap webbläsartillägg. Renderar sidans rubrikdisposition visuellt. Nivåer och luckor syns omedelbart.
  3. axe-core-skanning. Fångar saknad h1, hoppade nivåer (i vissa konfigurationer) och tomma rubriker.

Varför en h1 per sida är en omtvistad punkt

HTML5 föreslog ursprungligen att nästlade <section>-element skapade egna rubrikomfång, vilket tillät flera <h1>:or. Webbläsare och skärmläsare implementerade aldrig detta beteende. W3C:s WCAG-arbetsgrupp har återgått till “en h1 per sida” som operativ vägledning. De flesta moderna stilguider och tillgänglighetsgransikningar tillämpar en-h1-regeln.