Hopp til hovedinnhold
UUKontroll logo UUKontroll

Unike ID-attributter

Dupliserte ID-er i HTML kan ødelegge skjema, ARIA-koblinger og navigasjon. Lær hvorfor unike ID-er er et krav i WCAG og hvordan du finner og fikser problemet.

wcag niva-a koding

Det er en av de vanligste feilene vi ser når vi tester nettsider: to eller flere HTML-elementer deler samme id-attributt. Det høres kanskje ut som en teknisk detalj, men konsekvensene kan være alvorlige – spesielt for brukere som er avhengige av hjelpemidler.

Hva betyr dette?

HTML-standarden er tydelig: verdien av id-attributtet må være unik innenfor hele dokumentet. Ingen to elementer på samme side skal ha samme ID. Dette er ikke bare god praksis – det er en regel som nettlesere, hjelpemidler og ARIA-attributter er avhengige av for å fungere korrekt.

WCAG 4.1.1 «Parsing» (nivå A) krevde opprinnelig at HTML-koden skulle være korrekt og uten parseringsfeil. I WCAG 2.2 er dette kriteriet markert som alltid oppfylt (fordi nettleserne har blitt bedre til å håndtere feil), men dupliserte ID-er forårsaker fortsatt reelle tilgjengelighetsproblemer gjennom andre kriterier – spesielt 4.1.2 (Navn, rolle, verdi) og 1.3.1 (Informasjon og relasjoner).

Hvorfor er det viktig?

Skjemaer slutter å fungere riktig

Når du bruker en <label> med et for-attributt, peker den på et element via ID. Hvis to elementer har samme ID, kan nettleseren koble labelen til feil felt – eller ingen av dem.

<!-- Problem: To felt med samme ID -->
<label for="navn">Fornavn</label>
<input type="text" id="navn" name="fornavn">

<!-- Lenger ned på siden... -->
<label for="navn">Bedriftsnavn</label>
<input type="text" id="navn" name="bedriftsnavn">

I eksempelet over kan et klikk på «Bedriftsnavn»-labelen flytte fokus til fornavnsfeltet i stedet. For en skjermleserbruker kan feil felt bli lest opp med feil navn, noe som gjør skjemaet svært forvirrende.

ARIA-koblinger brytes

ARIA-attributter som aria-labelledby, aria-describedby og aria-controls bruker ID-er for å referere til andre elementer. Hvis ID-en er duplisert, peker disse attributtene kanskje på feil element.

<!-- Problem: aria-describedby peker på en duplisert ID -->
<input type="password" id="passord" aria-describedby="passord-hjelp">
<p id="passord-hjelp">Minst 8 tegn, inkluder tall og bokstaver.</p>

<!-- Lenger ned... -->
<div id="passord-hjelp">Annen tekst som ikke er relevant.</div>

Skjermleseren kan lese opp «Annen tekst som ikke er relevant» som hjelpetekst for passordfeltet, i stedet for den faktiske instruksjonen.

Interne lenker peker feil sted

Ankerlenker som <a href="#kontakt"> hopper til det første elementet med den angitte ID-en. Hvis du har dupliserte ID-er, kan lenken ta brukeren til feil sted på siden.

JavaScript-feil

document.getElementById() returnerer bare det første elementet med en gitt ID. Hvis du forventer å treffe et bestemt element lenger ned på siden, kan koden din feile stille uten å gi noen synlig feilmelding.

Hvordan fikser jeg det?

Finn dupliserte ID-er

Det enkleste er å bruke et automatisk verktøy. UUKontroll sjekker dette automatisk og rapporterer alle dupliserte ID-er den finner. Du kan også bruke nettleserens utviklerverktøy:

I Chrome DevTools (Console):

// Finn alle dupliserte ID-er på siden
const ids = [...document.querySelectorAll('[id]')].map(el => el.id);
const duplikater = ids.filter((id, i) => ids.indexOf(id) !== i);
console.log('Dupliserte ID-er:', [...new Set(duplikater)]);

Gi elementene unike ID-er

Den vanligste løsningen er å gjøre ID-ene mer spesifikke:

<!-- Feil: Dupliserte ID-er -->
<button id="send">Send bestilling</button>
<button id="send">Send melding</button>

<!-- Riktig: Unike, beskrivende ID-er -->
<button id="send-bestilling">Send bestilling</button>
<button id="send-melding">Send melding</button>

Bruk et system for ID-er

For større nettsider er det lurt å ha en navnekonvensjon for ID-er. En vanlig tilnærming er å bruke seksjonsnavn som prefiks:

<!-- Toppseksjon -->
<input id="header-sok" type="search" name="sok">

<!-- Fotseksjon -->
<input id="footer-sok" type="search" name="sok">

Dynamisk genererte ID-er

Hvis du bruker et rammeverk som React, Vue eller Angular og genererer skjemafelt dynamisk (for eksempel i en loop), sørg for at ID-ene er unike. Bruk gjerne en teller eller en unik nøkkel:

<!-- I en loop – bruk index eller unik nøkkel -->
<label for="produkt-1">Antall</label>
<input id="produkt-1" type="number">

<label for="produkt-2">Antall</label>
<input id="produkt-2" type="number">

I React kan du bruke useId()-hooken som genererer unike ID-er automatisk:

import { useId } from 'react';

function NavneFelt() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Navn</label>
      <input id={id} type="text" />
    </>
  );
}

Tips for forebygging

  • Kjør regelmessige tester. Bruk UUKontroll eller lignende verktøy jevnlig for å fange opp dupliserte ID-er før de havner i produksjon.
  • Bruk HTML-validering. W3Cs HTML-validator fanger også opp dupliserte ID-er.
  • Ha en navnekonvensjon. Enes med teamet om hvordan ID-er skal navngis, slik at sjansen for kollisjoner reduseres.
  • Vær ekstra obs på copy-paste. De fleste dupliserte ID-er oppstår fordi noen kopierer en blokk med HTML og glemmer å endre ID-ene.

Dupliserte ID-er er enkle å fikse, men kan ha overraskende store konsekvenser for tilgjengeligheten. Ta deg tid til å sjekke – brukerne dine vil takke deg.