Overskrifter og struktur

Hva betyr dette?

WCAG 1.3.1 Informasjon og relasjoner krever at informasjon, struktur og relasjoner som formidles visuelt også kan bestemmes programmatisk - altså leses av maskiner. Overskrifter er et av de viktigste eksemplene på dette.

I HTML har vi seks overskriftsnivåer: <h1> til <h6>. Disse skal brukes til å bygge en logisk struktur - som en innholdsfortegnelse - der <h1> er hovedoverskriften, <h2> er hovedseksjoner, <h3> er underseksjoner av <h2>, og så videre.

Kravet er nivå A og handler om to ting: at du faktisk bruker overskriftselementer (ikke bare gjør tekst stor og fet med CSS), og at hierarkiet er logisk uten å hoppe over nivåer.

Hvorfor er det viktig?

Overskrifter er kanskje det viktigste navigasjonsverktøyet for skjermleserbrukere. De fleste skjermlesere har en hurtigtast (ofte «H») som lar brukeren hoppe fra overskrift til overskrift, og de kan hente opp en liste over alle overskrifter på siden - som en slags innholdsfortegnelse.

For skjermleserbrukere

Ifølge WebAIM sin årlige undersøkelse bruker over 67 % av skjermleserbrukere overskrifter som sin primære metode for å navigere sider. Når overskriftshierarkiet er logisk, kan de raskt forstå sidens struktur og hoppe direkte til den seksjonen de er interessert i.

Hvis strukturen er rotete - for eksempel at du hopper fra <h1> til <h4>, eller bruker overskriftsnivåer tilfeldig for å få riktig skriftstørrelse - blir denne navigasjonen ubrukelig. Brukeren vet ikke om de har hoppet over en seksjon, eller om strukturen bare er feil.

For alle brukere

Selv seende brukere leser sjelden en nettside ord for ord. De fleste skanner - øynene hopper mellom overskrifter, bilder og uthevet tekst for å finne det de leter etter. Klare, beskrivende overskrifter i en logisk rekkefølge gjør det lettere for alle å finne informasjonen de trenger.

For søkemotorer

Google bruker overskriftsstrukturen for å forstå innholdet og hierarkiet på siden din. En godt strukturert side med beskrivende overskrifter kan rangere bedre i søkeresultatene, spesielt for spesifikke søk der innholdet i underseksjoner er relevant.

Hvordan fikser jeg det?

Grunnregelen: Én h1, logisk hierarki

Hver side bør ha nøyaktig én <h1> som beskriver sidens hovedinnhold. Under den bruker du <h2> for hovedseksjoner, <h3> for underseksjoner, og så videre - uten å hoppe over nivåer.

Feil - hopper over nivåer:

<h1>Våre tjenester</h1>
<p>Vi tilbyr et bredt spekter av tjenester.</p>

<h4>Rådgivning</h4>  <!-- Hopper over h2 og h3 -->
<p>Vi hjelper deg med...</p>

<h2>Kontakt oss</h2>
<h5>Telefon</h5>  <!-- Hopper over h3 og h4 -->

Riktig - logisk hierarki:

<h1>Våre tjenester</h1>
<p>Vi tilbyr et bredt spekter av tjenester.</p>

<h2>Rådgivning</h2>
<p>Vi hjelper deg med strategi og gjennomføring.</p>

<h3>UU-rådgivning</h3>
<p>Spesialisert rådgivning innen universell utforming...</p>

<h3>SEO-rådgivning</h3>
<p>Vi optimaliserer nettsiden din for søkemotorer...</p>

<h2>Kontakt oss</h2>
<h3>Telefon</h3>
<p>Ring oss på 22 33 44 55</p>

Ikke bruk overskrifter for visuell styling

En vanlig feil er å bruke <h3> fordi du vil ha en bestemt skriftstørrelse, selv om det logisk sett burde vært en <h2>. Bruk alltid riktig overskriftsnivå basert på strukturen, og styr utseendet med CSS:

/* Stil en h2 som ser ut som en h3 visuelt */
.h2-liten {
  font-size: 1.2rem;
  font-weight: 600;
}

<h2 class="h2-liten">Denne ser liten ut, men er en h2 i strukturen</h2>

Bruk semantiske HTML-elementer

I tillegg til overskrifter bør du bruke semantiske HTML-elementer (også kalt «landmarks») for å gi siden en tydelig struktur:

<header>
  <nav aria-label="Hovedmeny">
    <!-- Navigasjonslenker -->
  </nav>
</header>

<main>
  <h1>Våre tjenester</h1>
  
  <section aria-labelledby="raadgivning">
    <h2 id="raadgivning">Rådgivning</h2>
    <p>Vi tilbyr profesjonell rådgivning...</p>
  </section>
  
  <section aria-labelledby="utvikling">
    <h2 id="utvikling">Utvikling</h2>
    <p>Vi bygger tilgjengelige nettsider...</p>
  </section>
</main>

<footer>
  <p>© 2026 Min Bedrift</p>
</footer>

Elementer som <header>, <nav>, <main>, <section>, <aside> og <footer> gir skjermlesere viktig informasjon om sidens oppbygning. Brukeren kan for eksempel hoppe direkte til <main> for å komme forbi navigasjonen, eller til <nav> for å finne menyen.

Sjekk overskriftsstrukturen

Du kan enkelt sjekke overskriftsstrukturen med nettleserens utviklerverktøy. I Chrome kan du installere utvidelsen «HeadingsMap», som viser et tre-diagram over alle overskrifter på siden. Det bør se ut som en logisk innholdsfortegnelse uten hull i nummerrekkefølgen.

Du kan også bruke følgende teknikk: les bare overskriftene fra topp til bunn. Gir de mening alene? Kan du forstå sidens struktur uten å lese noe annet? Hvis ja, har du en god overskriftsstruktur.

Vanlige feil å unngå

• Flere <h1> per side - det bør bare være én, for sidens hovedtittel
• Hopp over nivåer - ikke gå fra <h2> til <h4> uten en <h3> mellom
• Overskrifter brukt for styling - bruk CSS for visuelt utseende, ikke overskriftsnivåer
• Manglende overskrifter - viktige seksjoner uten overskrift gjør navigasjonen vanskeligere
• Tekst som ser ut som overskrift men ikke er det - fet tekst i en <p> er ikke en overskrift for skjermlesere

God struktur er grunnmuren for en tilgjengelig nettside. Det hjelper alle brukere med å forstå og navigere innholdet ditt, og det tar bare litt planlegging for å gjøre riktig.