Hopp til hovedinnhold
UUKontroll logo UUKontroll

Mangler hovedinnhold (main)

Uten et tydelig hovedinnholdsområde må skjermleserbrukere lete seg gjennom hele siden. Lær hvordan HTML-landemerker gjør navigasjon raskere og enklere.

wcag koding navigasjon

Når du besøker en nettside, ser du med en gang hvor hovedinnholdet er – det er gjerne den store tekstblokken i midten, under menyen. Men for en skjermleserbruker er siden bare en lang sekvens av elementer. Uten tydelige landemerker må de bla gjennom header, logo, meny, søkefelt og annet gjentakende innhold for å finne det de egentlig er ute etter.

Hva betyr dette?

HTML5 introduserte semantiske elementer som <main>, <header>, <nav>, <footer> og <aside>. Disse fungerer som «landemerker» (landmarks) som deler siden inn i meningsfulle områder. Skjermlesere bruker disse landemerkene til å lage en slags innholdsfortegnelse som brukeren kan navigere mellom.

Det viktigste landemerket er <main> – elementet som omslutter sidens hovedinnhold. WCAG-suksesskriterier som 1.3.1 «Informasjon og relasjoner» og 2.4.1 «Hoppe over blokker» støtter bruk av landemerker for å gjøre navigasjonen lettere. I tillegg markerer dette som beste praksis i ARIA landmarks-spesifikasjonen.

Hvorfor er det viktig?

Raskere navigasjon med skjermleser

Skjermlesere som NVDA, JAWS og VoiceOver har snarveier for å hoppe mellom landemerker. I NVDA kan du for eksempel trykke «D» for å hoppe til neste landemerke, eller bruke elementlisten (Insert+F7) for å se alle landemerker på siden og hoppe direkte til det du vil.

Uten et <main>-element har skjermleserbrukeren ingen snarvei til hovedinnholdet. De må bla gjennom alt det gjentakende innholdet på toppen av hver side – noe som er slitsomt og tidkrevende.

Bedre struktur for alle

Landemerker gjør ikke bare livet enklere for skjermleserbrukere. De gir også koden din en tydeligere struktur som er lettere å vedlikeholde. Når utviklere ser en <main>-tag, vet de umiddelbart at dette er sidens primære innhold.

SEO-fordeler

Søkemotorer bruker også semantiske HTML-elementer for å forstå sidens struktur. Et tydelig <main>-element hjelper Google med å identifisere hva som er det viktigste innholdet på siden, noe som kan påvirke rangeringen positivt.

Hvordan fikser jeg det?

Legg til <main>-elementet

Omslutt sidens hovedinnhold med en <main>-tag. Det skal bare være ett synlig <main>-element per side.

<body>
  <header>
    <a href="/" class="logo">Firma AS</a>
    <nav>
      <ul>
        <li><a href="/">Hjem</a></li>
        <li><a href="/tjenester">Tjenester</a></li>
        <li><a href="/om">Om oss</a></li>
        <li><a href="mailto:kontakt@uukontroll.no">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Velkommen til Firma AS</h1>
    <p>Her er sidens hovedinnhold...</p>
  </main>

  <aside>
    <h2>Siste nytt</h2>
    <p>Relatert innhold i sidekolonnen...</p>
  </aside>

  <footer>
    <p>&copy; 2026 Firma AS</p>
  </footer>
</body>

Alle HTML5-landemerker du bør kjenne

Her er en oversikt over de viktigste landemerkene og når du bør bruke dem:

HTML-element ARIA-rolle (tilsvarende) Bruksområde
<main> role="main" Sidens hovedinnhold (kun ett per side)
<header> role="banner" Sidens øverste del med logo og navigasjon
<nav> role="navigation" Navigasjonsmenyer
<footer> role="contentinfo" Bunntekst med kontaktinfo, lenker, copyright
<aside> role="complementary" Tilleggsinnhold, sidekolonne
<form> (med navn) role="form" Et navngitt skjema
<section> (med navn) role="region" Et navngitt innholdsområde

Viktig: Du trenger normalt ikke å legge til ARIA-roller på disse elementene. Nettleseren mapper HTML5-elementer til riktige roller automatisk. <nav> har allerede role="navigation" innebygd. Å legge til rollen manuelt er overflødig:

<!-- Unødvendig – nav har allerede riktig rolle -->
<nav role="navigation">...</nav>

<!-- Tilstrekkelig -->
<nav>...</nav>

Navngi landemerker når det er flere av samme type

Hvis du har flere <nav>-elementer på siden (for eksempel en hovedmeny og en fotseksjonsmeny), bør du gi dem unike navn med aria-label:

<nav aria-label="Hovedmeny">
  <ul>
    <li><a href="/">Hjem</a></li>
    <li><a href="/tjenester">Tjenester</a></li>
  </ul>
</nav>

<!-- ... innhold ... -->

<nav aria-label="Bunntekst-navigasjon">
  <ul>
    <li><a href="/personvern">Personvern</a></li>
    <li><a href="/vilkar">Vilkår</a></li>
  </ul>
</nav>

Skjermleseren vil da annonsere «Hovedmeny, navigasjon» og «Bunntekst-navigasjon, navigasjon», slik at brukeren kan skille dem.

Unngå overbruk av landemerker

Ikke pakk alt inn i landemerker. Hvis hele siden består av landemerker, mister de sin navigasjonsverdi. Bruk dem for de hovedområdene på siden – header, meny, hovedinnhold, sidepanel og bunntekst.

Et annet vanlig feil er å nøste landemerker unødvendig:

<!-- Unødvendig nøsting -->
<main>
  <section role="region" aria-label="Artikkel">
    <article>
      <section role="region" aria-label="Innledning">
        <p>Tekst her...</p>
      </section>
    </article>
  </section>
</main>

<!-- Enklere og bedre -->
<main>
  <article>
    <p>Tekst her...</p>
  </article>
</main>

Slik tester du

  1. Skjermleser: Åpne siden i en skjermleser og bruk landemerke-navigasjonen. Kan du hoppe direkte til hovedinnholdet?
  2. Nettleserverktøy: I Chrome DevTools kan du åpne Accessibility-panelet og se «Accessibility Tree» som viser hvilke landemerker nettleseren har oppdaget.
  3. Automatiske verktøy: UUKontroll og lignende verktøy rapporterer manglende <main>-element og andre landmark-problemer.

Å legge til riktige landemerker tar bare noen minutter og gjør en enorm forskjell for brukere som navigerer med skjermleser. Start med <main> – det er det viktigste landemerket, og sannsynligvis den enkleste endringen du kan gjøre for tilgjengeligheten på nettsiden din.