Retningslinje

1.4.5 Bilder av tekst

Bruk tekst. Unngå bilder av tekst.

Oppdatert 19. november 2024

Dersom teknologien som brukes kan håndtere den visuelle presentasjonen, brukes det tekst i stedet bilder av tekst til å formidle informasjon, unntatt i følgende tilfeller: […]

Avgjørende: En bestemt presentasjon av tekst er avgjørende for informasjonen som formidles.

Merknad: Logoer (tekst som utgjør en del av en logo eller et varemerkenavn) anses som avgjørende.

Hvorfor er suksesskriteriet viktig?

Noen har behov for å tilpasse tekst for å gjøre den lettere å lese, for eksempel ved å justere skriftstørrelse, linjeavstand eller ved å bruke skjermlesere for å konvertere tekst til tale. Hvis innholdet er presentert som et bilde av tekst og ikke kodet som tekst, blir det vanskeligere å gjøre disse justeringene. Derfor unngår vi å bruke bilder av tekst, med mindre dette er absolutt nødvendig.

Piksellert tekst som er zoomet inn — Bilder av tekst blir vanskelig å lese når man zoomer inn på dem.

Ekte tekst zoomet inn — Tekst kodet som tekst forblir skarp og leselig når den er zoomet inn.

Anbefalinger

Bruk CSS til å lage effekter som tidligere krevde bilder av tekst, for eksempel skygger, gradienter eller custom typografi.

3D CSS tekst — Mye kult kan oppnås med CSS.Kilde: Noah Blon

Vanlige misforståelser

Noen tror at kravet betyr at det ikke er lov å bruke bilder av tekst i det hele tatt, men det er innafor å bruke bilder av tekst der er essensielt at teksten blir vist på en bestemt måte. Dette betyr at f.eks. logoer og tekst i infografikk kan vises ved hjelp av bilder.

Hvordan teste kravet

Kjernespørsmålet

Er bilder av tekst kun brukt der det er nødvendig?

Innhold du må teste

Alt som ser ut som tekstlig innhold.

Testmetode

Marker innholdet på siden, eller bruk verktøy som ARC Toolkit eller Web Developer Toolbar for å fremheve alle bilder. Hvis det finnes bilder av tekst, må minst ett av følgende kriterier være oppfylt:

En bestemt presentasjon er nødvendig.
Brukere kan tilpasse teksten i bildet til sine behov.
Informasjonen i bildet er også tilgjengelig et annet sted på siden som tekst.

Et skjermbilde av ARC Toolkit på nav.no — ARC Toolkit viser at Nav-logoen er et bilde av tekst, men siden bildet er en logo, er det unntatt kravet.

Et skjermbilde fra kunnskapsbanken.no — Når vi markerer teksten, ser vi at teksten "e-læring" er et bilde. Den er ikke dekorativt, og den er heller ikke avhengig av en bestemt presentasjon. Bildet bryter dette kravet.

Ofte-stilte spørsmål

Tekst i <canvas>-elementer og tekst i SVG-er inkludert med <img> regnes som bilder av tekst og må oppfylle kravet. Det samme gjelder for tekst som er en del av en <path> i inline SVG-er.

Tekst i inline SVG-er som er kodet med <text>-elementer er derimot direkte tilgjengelig for hjelpemiddelteknologi og kan tilpasses av brukeren. Disse elementene regnes som tekst og oppfyller dermed kravet automatisk.

Lenker

Medvirkende

Sarah Brodwall

Innspill til artikkelen

Logg inn med Nav SSO for å gi innspill til artikkelen

Logg inn med Nav SSO