Hopp til hovedinnhold
UUKontroll logo UUKontroll

Sørg for at tekstavstand kan justeres (WCAG 1.4.12)

Brukere må kunne overstyre tekstavstand uten at innhold eller funksjonalitet går tapt.

wcag niva-aa design koding

Noen brukere med dysleksi, nedsatt syn eller kognitive utfordringer trenger mer luft mellom bokstaver, ord og linjer for å kunne lese tekst komfortabelt. WCAG 1.4.12 sørger for at nettsider tåler at brukerne justerer tekstavstanden - uten at innhold forsvinner eller overlapper.

Hva sier kravet?

WCAG 1.4.12 Tekstavstand krever at ingen innhold eller funksjonalitet går tapt når brukeren setter alle følgende verdier samtidig:

  • Linjehøyde (line-height) til minst 1,5 ganger skriftstørrelsen
  • Avstand etter avsnitt (margin-bottom/padding-bottom) til minst 2 ganger skriftstørrelsen
  • Bokstavavstand (letter-spacing) til minst 0,12 ganger skriftstørrelsen (0.12em)
  • Ordavstand (word-spacing) til minst 0,16 ganger skriftstørrelsen (0.16em)

Kravet er nivå AA og gjelder tekst satt med vanlige skriftteknologier (HTML/CSS). Tekst i bilder og tekst i videoer er unntatt. Kravet sier ikke at du må sette disse verdiene som standard - bare at nettsiden din må tåle det uten å gå i stykker når brukeren gjør det.

Hvorfor er dette viktig?

Dysleksi og lesevansker

Omtrent 5–10 prosent av befolkningen har dysleksi. For mange av disse er tett tekst ekstra vanskelig å lese. Økt avstand mellom bokstaver og linjer gjør det lettere å skille bokstaver fra hverandre og følge linjen man leser.

Nedsatt syn

Svaksynte brukere som forstørrer teksten, trenger ofte også mer avstand for å holde oversikten. Uten tilstrekkelig avstand flyter teksten sammen ved forstørring, og det blir vanskelig å skille ord og linjer.

Kognitive utfordringer

For brukere med konsentrasjonsvansker eller kognitive utfordringer kan tett tekst virke overveldende. Bedre avstand gir en visuell «pustepause» som gjør innholdet lettere å fordøye.

Eldre brukere

Med alderen blir det ofte vanskeligere å lese tett tekst. Større avstand mellom linjer og ord forbedrer lesbarheten betydelig for eldre.

Slik oppfyller du kravet

Unngå faste høyder på tekstelementer

Den vanligste årsaken til at nettsider feiler på dette kravet, er elementer med fast høyde (height) eller fast linjehøyde (line-height i piksler) som ikke tilpasser seg økt tekstavstand:

/* Dårlig: Fast høyde gjør at tekst kuttes av */
.kort-tittel {
  height: 48px;
  overflow: hidden;
  line-height: 24px;
}

/* Bra: Fleksibel høyde som tilpasser seg innholdet */
.kort-tittel {
  min-height: 48px;
  line-height: 1.5;
}

Forskjellen er subtil men avgjørende: min-height lar elementet vokse hvis tekstavstanden øker, mens height kutter innhold som ikke får plass.

Bruk relative enheter for avstand

Bruk em eller rem for avstandsverdier knyttet til tekst, ikke piksler:

/* Dårlig: Pikselverdier som ikke skalerer */
p {
  line-height: 20px;
  letter-spacing: 0px;
  margin-bottom: 16px;
}

/* Bra: Relative verdier som skalerer med teksten */
p {
  line-height: 1.5;
  letter-spacing: normal;
  margin-bottom: 1.5em;
}

Ikke bruk overflow: hidden på tekstelementer

overflow: hidden klipper bort innhold som ikke passer i containeren. Når brukeren øker tekstavstanden, kan tekst forsvinne:

/* Dårlig: Klipper tekst som vokser */
.boks {
  height: 100px;
  overflow: hidden;
}

/* Bra: Lar innholdet vokse */
.boks {
  min-height: 100px;
  overflow: visible;
}

Unngå tekstklipping i knapper og navigasjon

Knapper og menyelementer med fast størrelse er spesielt utsatte. Tekst som øker i avstand kan flyte over kantene eller bli usynlig:

/* Dårlig: Fast bredde og høyde */
.meny-lenke {
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}

/* Bra: Fleksibel størrelse med padding */
.meny-lenke {
  display: inline-block;
  padding: 0.5em 1em;
  text-align: center;
}

Test med et bookmarklet

Den enkleste måten å teste WCAG 1.4.12 på er å bruke et bookmarklet som setter alle de fire tekstavstandsverdiene samtidig. Du kan lage et selv med denne JavaScript-koden:

javascript:void(function(){
  var s = document.createElement('style');
  s.textContent = '* { line-height: 1.5 !important; ' +
    'letter-spacing: 0.12em !important; ' +
    'word-spacing: 0.16em !important; } ' +
    'p { margin-bottom: 2em !important; }';
  document.head.appendChild(s);
})();

Kjør bookmarkleten på nettsiden din og sjekk:

  1. Er all tekst fortsatt synlig? Ingen tekst som er kuttet av eller forsvunnet?
  2. Overlapper tekst andre elementer?
  3. Kan du fortsatt bruke alle knapper og lenker?
  4. Er skjemaer fortsatt funksjonelle?

Gode standardverdier

Selv om kravet ikke pålegger deg å bruke disse verdiene som standard, er det god praksis å starte med lesbare verdier:

body {
  line-height: 1.6;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}

p + p {
  margin-top: 1.5em;
}

Disse verdiene er komfortable for de fleste brukere og gir en god lesbarhet uten at brukeren trenger å overstyre noe.

Vanlige feil

  • Faste høyder (height) på tekstelementer som gjør at tekst kuttes av når avstanden øker.
  • overflow: hidden på containere med tekst - skjuler innhold i stedet for å la det flyte.
  • Fast linjehøyde i piksler (line-height: 18px) som ikke skalerer med bokstavavstand og skriftstørrelse.
  • Knapper med fast bredde der teksten flyter ut eller kuttes av ved økt bokstavavstand.
  • Navigasjonsmenyer som brekker - menypunkter som hopper til ny linje og overlapper hverandre.
  • Vertikal tekst i tabellceller med fast høyde - teksten forsvinner nedover når linjehøyden øker.
  • Tooltip-bokser med fast størrelse - teksten flyter ut av boksen ved økt avstand.

God praksis er å bygge layouten din med fleksibilitet i tankene. Bruk min-height i stedet for height, relative enheter i stedet for piksler, og test regelmessig med økt tekstavstand. En nettside som tåler tekstavstandsendringer, er generelt en mer robust og bedre kodet nettside.