Hopp til hovedinnhold
UUKontroll logo UUKontroll

Bruk ekte tekst, ikke bilder av tekst (WCAG 1.4.5)

Bruk ekte tekst i stedet for bilder av tekst, slik at innholdet kan tilpasses og leses av hjelpemidler.

wcag niva-aa tekst-og-bilder design

Det er fristende å bruke et pent designet bilde for en overskrift, en knapp eller et banner. Men tekst som er «bakt inn» i et bilde, kan ikke forstørres, oversettes, tilpasses eller leses av hjelpemidler på en god måte. WCAG 1.4.5 handler om å bruke ekte tekst der det er mulig - fordi ekte tekst er fleksibel og tilgjengelig for alle.

Hva sier kravet?

WCAG 1.4.5 Bilder av tekst krever at hvis teknologien som brukes kan oppnå den ønskede visuelle presentasjonen, skal ekte tekst brukes i stedet for bilder av tekst. Unntakene er:

  • Tilpassbart: Bildet av tekst kan tilpasses visuelt etter brukerens behov (noe som i praksis er svært vanskelig å oppnå med bilder).
  • Vesentlig: Den spesifikke presentasjonen av teksten er vesentlig for informasjonen som formidles - for eksempel en logo eller et varemerke.

Kravet er nivå AA. For norske virksomheter betyr dette at du som hovedregel skal bruke HTML-tekst med CSS-styling, ikke bilder av tekst.

Hvorfor er dette viktig?

Forstørring og zoom

Brukere med nedsatt syn bruker ofte forstørring for å lese innhold. Ekte tekst kan forstørres uendelig uten å bli uklar - den rendres alltid skarpt av nettleseren. Bilder av tekst blir pikselerte og uleselige ved forstørring, spesielt hvis de er lagret i lav oppløsning.

Skjermlesere

Skjermlesere kan lese ekte tekst direkte. For bilder av tekst er de avhengige av alt-tekst, som ofte mangler, er ufullstendig eller ikke oppdateres når bildet endres. Resultatet er at skjermleserbrukere enten hører feil informasjon eller ingenting i det hele tatt.

Brukertilpasning

Mange brukere tilpasser hvordan tekst vises - de endrer skrifttype, størrelse, farge eller avstand gjennom nettleserinnstillinger eller egne stilark. Disse tilpasningene har ingen effekt på tekst i bilder. En bruker med dysleksi som bruker en spesialtilpasset skrifttype, vil fortsatt se den opprinnelige skriften i bildet.

Oversettelse

Automatisk oversettelse i nettleseren (Google Translate, Safari Translation) fungerer bare med ekte tekst. Tekst i bilder kan ikke oversettes, noe som stenger ute brukere som ikke behersker norsk.

Ytelse og vedlikehold

Bilder av tekst er tyngre å laste enn ren tekst. Og når du må oppdatere teksten - endre en pris, en dato eller en setning - må du lage et nytt bilde i stedet for å bare redigere koden. Det er tungvint og fører ofte til at informasjon blir utdatert.

Slik oppfyller du kravet

Erstatt bilder av tekst med HTML og CSS

Med moderne CSS kan du oppnå nesten alle visuelle effekter uten å bruke bilder. Her er noen vanlige eksempler:

Dekorativ overskrift:

/* I stedet for et bilde av en fancy overskrift */
.hero-tittel {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  color: #1a1a2e;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: -0.02em;
}

Knapper med gradient og effekter:

/* I stedet for et bilde av en knapp */
.cta-knapp {
  background: linear-gradient(135deg, #0066cc, #0044aa);
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cta-knapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
}

Tekst over bakgrunnsbilde:

<!-- Dårlig: Alt er ett bilde, inkludert teksten -->
<img src="banner-tilbud.jpg" alt="Sommertilbud - 30% rabatt på alle kurs">

<!-- Bra: Ekte tekst over bakgrunnsbilde -->
<div class="banner" role="img" aria-label="Sommerbanner">
  <h2>Sommertilbud</h2>
  <p>30 % rabatt på alle kurs</p>
</div>

.banner {
  background-image: url('sommer-bakgrunn.jpg');
  background-size: cover;
  padding: 3rem;
  position: relative;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.banner h2,
.banner p {
  position: relative;
  color: white;
}

Logoer og varemerker er unntatt

Logoer, varemerker og annen tekst der den spesifikke visuelle fremstillingen er vesentlig, er unntatt fra kravet. Du kan for eksempel ha firmalogoen som et bilde - men sørg for god alt-tekst:

<img src="logo.svg" alt="UU Kontroll">

Sosiale medier-bilder med tekst

Mange lager bilder for sosiale medier med tekst innebygd (sitater, kampanjer, infografikk). Hvis du bruker disse bildene på nettsiden, sørg for at den samme informasjonen finnes som ekte tekst i nærheten av bildet, eller som fyldig alt-tekst.

Skann nettsiden din

Gå gjennom nettsiden din og se etter bilder som inneholder tekst. Vanlige steder å finne dem:

  • Bannerbilder og hero-seksjoner
  • Kampanjebilder og tilbud
  • Infografikk og illustrasjoner med tekst
  • Knapper og navigasjonselementer (sjeldnere i dag, men forekommer)
  • PDF-dokumenter som er skannet uten OCR

Vanlige feil

  • Bannerbilder med kampanjetekst der all informasjon ligger i bildet og ikke som ekte tekst.
  • Infografikk uten tekstalternativ - komplekse bilder med mye tekst som hverken har god alt-tekst eller en tilhørende HTML-versjon.
  • Navigasjonselementer som bilder - menypunkter lagret som bilder i stedet for HTML-lenker.
  • Sosiale medier-innlegg gjenbrukt på nettsiden der teksten bare finnes i bildet.
  • Skannede PDF-er som i praksis er bilder av tekst uten OCR-behandling.
  • Stiliserte overskrifter som bilder - i stedet for å bruke webfonter og CSS.

Bruk ekte tekst så langt det er mulig. Med webfonter, CSS-gradienter, skygger og animasjoner finnes det svært få situasjoner der du faktisk trenger et bilde av tekst. Resultatet er en nettside som er raskere, mer tilgjengelig, enklere å vedlikeholde - og som fungerer for alle brukere.