Skjemaelementer mangler merkelapp (label)

Hva betyr dette?

WCAG 3.3.2 Ledetekster eller instruksjoner krever at skjemafelt har synlige ledetekster eller instruksjoner som forklarer hva brukeren forventes å fylle inn. I tillegg krever WCAG 1.3.1 at disse ledetekstene er programmatisk koblet til feltene, slik at hjelpeteknologi forstår sammenhengen.

I praksis betyr dette at hvert <input>, <select> og <textarea> på nettsiden din skal ha et tilhørende <label>-element som er koblet til feltet med for- og id-attributter. Uten denne koblingen ser feltet kanskje riktig ut visuelt, men skjermlesere klarer ikke å fortelle brukeren hva feltet er til for.

Dette kravet er nivå A og er et av de vanligste tilgjengelighetsproblemene på norske nettsider. Kontaktskjemaer, påmeldingsskjemaer, søkefelt og innloggingsformularer er typiske steder der labels mangler eller er feil koblet.

Hvorfor er det viktig?

Skjermleserbrukere trenger labels

Når en blind eller svaksynt bruker navigerer til et skjemafelt, leser skjermleseren opp den tilknyttede labelen. Det er slik brukeren vet om feltet er for fornavn, etternavn, e-post eller telefonnummer. Uten en koblet label hører brukeren ofte bare «redigerbart tekstfelt» - uten noen indikasjon på hva de skal skrive inn.

Tenk deg at du fyller ut et skjema med lukkede øyne og det eneste du hører er «tekstfelt, tekstfelt, tekstfelt, nedtrekksliste, tekstfelt». Du ville ikke hatt noen sjanse til å fylle det ut riktig.

Labels gjør skjemaer enklere for alle

En riktig koblet label har en ekstra fordel som mange overser: den gjør klikkflaten større. Når en <label> er koblet til en avkrysningsrute eller radioknapp, kan brukeren klikke på teksten - ikke bare den lille boksen. Dette er spesielt nyttig på mobil, der små treffområder er en vanlig kilde til frustrasjon.

Placeholder er ikke en erstatning

Mange nettsider bruker placeholder-attributtet i stedet for en label. Det fungerer dårlig av flere grunner:

• Plassholderteksten forsvinner så fort brukeren begynner å skrive, og da har de ingen referanse for hva feltet handler om
• Plassholdertekst har som oftest for lav kontrast (lysegrå på hvitt)
• Ikke alle skjermlesere leser opp plassholdertekst konsekvent
• Brukere med kognitive utfordringer kan bli forvirret når teksten plutselig forsvinner

Placeholder kan brukes som et tillegg til en label - for eksempel for å vise et eksempelformat - men aldri som erstatning.

Hvordan fikser jeg det?

Grunnmetoden: label med for/id

Den sikreste og mest anbefalte metoden er å bruke et <label>-element med for-attributt som peker til feltets id:

<div class="skjema-felt">
  <label for="fornavn">Fornavn</label>
  <input type="text" id="fornavn" name="fornavn">
</div>

<div class="skjema-felt">
  <label for="epost">E-postadresse</label>
  <input type="email" id="epost" name="epost" placeholder="navn@eksempel.no">
</div>

Merk at for-attributtet på <label> må ha nøyaktig samme verdi som id-attributtet på <input>. Det er denne koblingen som gjør at skjermleseren forstår sammenhengen.

Alternativ: Innpakket label

Du kan også pakke input-feltet inne i <label>-elementet. Da trengs ikke for/id-koblingen, fordi sammenhengen er implisitt:

<label>
  Fornavn
  <input type="text" name="fornavn">
</label>

Denne metoden fungerer fint teknisk, men den eksplisitte for/id-metoden er generelt anbefalt fordi den gir mer fleksibilitet i layout og styling.

Avkrysningsruter og radioknapper

For checkboxer og radioknapper er labels spesielt viktige, fordi de gjør klikkflaten mye større:

<fieldset>
  <legend>Hvordan vil du bli kontaktet?</legend>
  
  <div>
    <input type="radio" id="kontakt-epost" name="kontakt" value="epost">
    <label for="kontakt-epost">E-post</label>
  </div>
  
  <div>
    <input type="radio" id="kontakt-telefon" name="kontakt" value="telefon">
    <label for="kontakt-telefon">Telefon</label>
  </div>
  
  <div>
    <input type="checkbox" id="nyhetsbrev" name="nyhetsbrev">
    <label for="nyhetsbrev">Ja, jeg vil motta nyhetsbrev</label>
  </div>
</fieldset>

Merk bruken av <fieldset> og <legend> for å gruppere relaterte felt. Dette gir skjermleseren ekstra kontekst - brukeren hører «Hvordan vil du bli kontaktet? E-post, radioknapp» i stedet for bare «E-post, radioknapp».

Skjulte labels med aria-label

I noen tilfeller passer det ikke med en synlig label - for eksempel et søkefelt der søke-knappen allerede gjør det tydelig hva feltet er for. Da kan du bruke aria-label:

<div class="sok-felt">
  <input type="search" aria-label="Søk på nettsiden" placeholder="Søk...">
  <button type="submit">Søk</button>
</div>

Bruk denne teknikken med forsiktighet. En synlig label er alltid å foretrekke, fordi den hjelper alle brukere - ikke bare de som bruker skjermlesere.

Et komplett skjemaeksempel

Her er et eksempel på et godt strukturert kontaktskjema:

<form action="/send-melding" method="post">
  <div class="skjema-felt">
    <label for="navn">Fullt navn</label>
    <input type="text" id="navn" name="navn" required 
           autocomplete="name">
  </div>
  
  <div class="skjema-felt">
    <label for="epost">E-postadresse</label>
    <input type="email" id="epost" name="epost" required 
           autocomplete="email" placeholder="navn@eksempel.no">
  </div>
  
  <div class="skjema-felt">
    <label for="melding">Din melding</label>
    <textarea id="melding" name="melding" rows="5" required></textarea>
  </div>
  
  <button type="submit">Send melding</button>
</form>

Vanlige feil å unngå

• Bare placeholder, ingen label - placeholder forsvinner når brukeren skriver
• Label uten for-attributt - da er den ikke koblet til feltet
• Feil id i for-attributtet - for="navn" fungerer bare hvis input har id="navn"
• Div eller span brukt som label - bare <label>-elementet gir riktig semantikk
• Duplikate id-er - hvis to felt har samme id, blir koblingen feil

God merking av skjemafelt gjør at alle brukere kan fylle ut skjemaene dine trygt og effektivt. Det handler om å gi folk den informasjonen de trenger, når de trenger den.