Sektionsoverskrifter

Hvad kriteriet kræver

Når en side er inddelt i sektioner, skal hver sektion have en programmatisk overskrift. Kriteriet kræver ikke, at enhver side brydes op i sektioner — korte, enkeltformåls-sider (en loginskærm) er fine uden underoverskrifter. Men hvor sektioner eksisterer, kræver de rigtig <h1>–<h6>-markup, så hjælpeteknologi kan opbygge et overskriftsoutline.

Dette kriterium er på AAA-niveau, men den underliggende praksis — at bruge rigtige overskrifter — er også underforstået i 1.3.1 (Information og relationer) på niveau A, så de fleste tilgængelige websteder opfylder det i forvejen.

Sådan opfylder du det

• Brug <h1> til sidetitlen (én gang pr. side) og gå ned til <h2>, <h3> for indlejrede sektioner uden at springe niveauer over.
• Erstat <div class="heading"> og stylede <p>-„overskrifter“ med rigtige overskriftstags.
• Giv hver distinkt sektion i langt indhold (en artikel, en dokumentationsside, et indstillingspanel med faner) en overskrift.
• Til kortkomponenter, der fungerer som samlinger af lignende sektioner, giv hvert kort en overskrift på det rette niveau.
• Valider overskriftsoutlinen med HTML5-outline-algoritmen (axe DevTools, headingsMap-browserudvidelse eller W3C-validatoren).

Typiske fejl

• Fede afsnit forklædt som overskrifter — typografisk overbevisende, men usynlige for en skærmlæsers overskriftsliste.
• Overskriftsniveauer springes over (<h1> hopper til <h4>), fordi CMS-teamet valgte niveauer efter skriftstørrelse frem for hierarki.
• Flere <h1>-elementer på én side (acceptabelt i HTML5-outlines, men ødelægger navigation i de fleste hjælpeteknologier).
• Alle sektioner mærket <h2> uanset indlejringsdybde, hvilket fladgør outlinen.
• Heltetekst markeret som <h1>, mens den faktiske sidetitel sidder nedenfor som <h2>.

Hvorfor det er vigtigt

For skærmlæserbrugere er overskriftsoutlinen indholdsfortegnelsen. JAWS og NVDA viser den i en dialog (Insert+F6 i JAWS); VoiceOver viser den i rotoren. En side uden overskrifter — eller med overskrifter udelukkende til visuel vægtning — tvinger disse brugere til at scrolle linje for linje. Selv for teams, der kun formelt forpligter sig til AA, giver det afkast på tværs af SEO, indholdsgenanvendelse og redaktørens arbejde at behandle sektionsoverskrifter som en basislinje i skriveprocessen.