Overskriftshierarki

Overskriftshierarki er disciplinen at bruge <h1>-<h6>-elementer til at danne en konsekvent dispositionsstruktur af en sides indhold. Gjort rigtigt giver det skærmlæsere en gratis indholdsfortegnelse. Gjort forkert (oversprunget niveauer, rent dekorative overskrifter, flere h1’er, generiske div’er som overskrifter) gør siden uforståelig for hjælpeteknologi-brugere.

Den grundlæggende struktur

<h1>Artiklens titel (én per side)</h1>
  <h2>Hovedafsnit</h2>
    <h3>Underafsnit</h3>
    <h3>Underafsnit</h3>
  <h2>Hovedafsnit</h2>
    <h3>Underafsnit</h3>
      <h4>Under-underafsnit</h4>

Reglerne:

1. Én <h1> per side — sidens primære titel. Flere h1’er forvirrer skærmlæsere om sidens identitet.
2. Ingen oversprunget niveauer nedad. En <h2> kan efterfølges af en <h3> (ét niveau dybere), men ikke af en <h4> (to niveauer dybere). Et oversprunget niveau signalerer til skærmlæseren, at noget mangler imellem.
3. Overskrifter afspejler indholdsstruktur, ikke visuel styling. Hvis et stykke tekst ser stort ud, men ikke er en overskrift til nyt indhold, brug et stylet afsnit, ikke en overskrift.
4. Ingen tomme overskrifter. <h2></h2> er meningsløst. Udfyld den eller fjern den.

Hvorfor skærmlæsere holder af det

Den mest almindelige skærmlæser-navigationsoperation er “hop til næste overskrift” — H-tasten i JAWS og NVDA, rotor-tilstanden “Overskrifter” i VoiceOver, overskrifter-læsekontrollen i TalkBack.

En bruger, der åbner en lang artikel, trykker H gentagne gange for at danne sig et overblik over artiklens struktur, inden de læser noget af den. Hvis overskrifterne er sammenhængende, får de en gratis disposition af teksten. Hvis overskrifterne kun er dekorative eller springer niveauer over, får de støj.

Hvad der går galt i produktion

• Ingen <h1>. Siden har ingen primær overskrift. Skærmlæsere annoncerer sidetitlen fra <title>, men in-page-overskriftsnavigationen har intet ankerpunkt. Almindeligt på dårligt strukturerede CMS-sider, hvor artiklens titel gengives som stylet tekst, men aldrig markeres som <h1>.
• Flere <h1>er. “Hero-titel” + “første afsnits titel” markeret begge som <h1>. Skærmlæsere hører to h1’er og kan ikke afgøre, hvilken der er sidetitlen.
• Oversprunget niveauer. <h1> → <h3>, fordi designet ikke ønskede <h2>-størret tekst. Skærmlæsernes navigation læser “manglende overskriftsniveau.”
• Div’er stylet som overskrifter. <div class="hed-xl">Afsnitsoverskrift</div>. Skærmlæseren ser ingen overskrift. Løsning: brug den korrekte <hN>, stil med CSS.
• Overskrifter brugt til layout. At sætte <h2> på en sidebar-etiket, så den visuelt ligner en overskrift, men etiketten ikke er en overskrift i indholdsmæssig forstand. Brug et stylet afsnit.

Sådan reviderer du overskriftshierarkiet

Tre tilgange:

1. Skærmlæserens overskriftsliste. Åbn Insert+F7 i NVDA eller VO+U → Overskrifter. Den viste liste bør give mening som en disposition af siden. Giver den ikke mening, ret markeringen.
2. HeadingsMap browser-udvidelse. Gengiver sidens overskriftsdisposition visuelt. Niveauer og huller er umiddelbart tydelige.
3. axe-core-scanning. Fanger manglende h1, oversprunget niveauer (i visse konfigurationer) og tomme overskrifter.

Hvorfor én h1 per side er et omdiskuteret punkt

HTML5 foreslog oprindeligt, at indlejrede <section>-elementer skabte deres egne overskriftsomfang, hvilket tillod flere <h1>er. Browsere og skærmlæsere implementerede aldrig denne adfærd. W3C’s WCAG Working Group er vendt tilbage til “én h1 per side” som den gældende vejledning. De fleste moderne stilguider og tilgængelighedsrevisioner håndhæver én-h1-reglen.