Hva kreves i praksis?
Struktur som overskrifter, lister, tabeller og skjemarelasjoner skal ligge i koden, ikke bare i det visuelle utseendet. Kravet gjelder sider som brukes i Norge, uavhengig av om du er offentlig virksomhet, butikk eller byrå som leverer nettsiden.
Vanlige feil og avvik
- Overskrifter stylet som <div> eller <p> med stor font i stedet for h1–h6.
- Lister laget med <br> og bindestreker i stedet for <ul>/<ol>.
- Skjemafelt uten <label> knyttet til input.
Før og etter — kodeeksempler
Eksemplene er forenklet. Lim inn mønsteret, ikke nødvendigvis klassenavnene, i din egen kodebase.
Feil kode — bryter WCAG
Visuelt ser det ut som en overskrift og en liste, men koden er flat. Skjermlesere får ingen struktur.
Feil eksempel
<p class="text-2xl font-bold">Priser</p>
<p>- Starter: 490 kr</p>
<p>- Byrå: 1 490 kr</p>
<input type="email" placeholder="E-post">Riktig kode — utbedret
Ekte overskrift, liste og label gjør relasjonene tilgjengelige for hjelpemidler og automatiske tester.
Riktig eksempel
<h2>Priser</h2>
<ul>
<li>Starter: 490 kr</li>
<li>Byrå: 1 490 kr</li>
</ul>
<label for="epost">E-post</label>
<input id="epost" type="email" autocomplete="email">Hvordan UUvakta tester dette
Skanningen slår ut på manglende label, ødelagte lister, heading-order, tomme overskrifter og landemerker (main, nav). Du ser hvilke sider som later som de har struktur, men mangler den i HTML. Visuell-only hierarki krever fortsatt manuell sjekk.