Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Retningslinje

1.1.1 Ikke-tekstlig innhold

Tilby et tekstlig alternativ for ikke-tekstlig innhold.

Suksess

Suksesskriterium 1.1.1 Ikke-tekstlig innhold (Nivå A)

All ikke-tekstlig innhold som presenteres for brukeren, har et tekstalternativ med samme formål, med unntak av situasjonene som er beskrevet nedenfor.

[…]

  • Dekorasjon, formatering, usynlig: Dersom det ikke-tekstlige innholdet er ren dekorasjon, brukes utelukkende til visuell formatering eller ikke presenteres for brukerne, skal det implementeres på en slik måte at det kan ignoreres av hjelpemiddelteknologi.

Se ofte-stilte spørsmål for mer informasjon om unntak.

WCAG definerer et tekstalternativ slik:

  • tekst som er programmatisk knyttet til ikke-tekstlig innhold, eller
  • tekst som det henvises til fra tekst som er programmatisk knyttet til ikke-tekstlig innhold

Hvorfor er suksesskriteriet viktig?

Tekstalternativer sikrer at ikke-tekstlig innhold er tilgjengelig for alle, også de som ikke ser. De gir skjermleser- og leselistbrukere tilgang til ikke-tekstlig innhold. De kan også brukes av søkemotorer for å indeksere grafiske elementer. Dessuten vises alternativtekst når bilder ikke lastes inn, for eksempel ved dårlig nettforbindelse.

Suksesskriteriet krever også at grafisk innhold uten meningsbærende funksjon skjules for hjelpemiddelteknologi. Dette reduserer unødvendig støy for brukere.

Anbefalinger

Spør deg selv, «dersom jeg ikke hadde mulighet til å bruke et bilde i denne konteksten og måtte bruke tekst istedenfor, hva skulle teksten vært»? Svaret gir deg en clue om et godt alternativtekst til grafikken.

Vanlige misforståelser

Kan jeg ikke bare si hva det er et bilde av?

Mange tenker at tekstalternativet skal gjengi det som er avbildet. Dette er ikke alltid riktig. Et godt tekstalternativ skal tjene det samme formålet som grafikken, i akkurat den konteksten der bildet er brukt.

Gjør
Jason Eppinks passfoto
I konteksten av en side som lister opp alle ansatte i et selskap ville det gi mening å bruke navnet til mannen i bildet. I konteksten av en side som viser passfotoregler, kunne et godt alternativtekst være «Et godkjent passfoto». Foto: Jason Eppink, lisensiert under CC BY 2.0.
Gjør
Skjermbilde av nettleserens tab-bar og settings-meny
Edge bruker det samme plussikonet på to forskjellige steder i grensesnittet. Dersom alternativteksten til ikonet bare beskrev det ikonet avbilder, «pluss», ville det vært lite intuitivt hva formålet med knappene er. Ved å gi ikonet tekstalternativet «Ny fane» eller «Zoom inn», basert på ikonets formål i konteksten det brukes i, blir det tydelig hva knappene gjør.

Vi snakker vel bare om alt-attributtet?

alt-attributtet er den vanligste måte å gi et bilde et tekstalternativ. Det er dette attributtet du skal bruke for å knytte tekstalternativet programmatisk til et bilde kodet med en img-tag. Tekstalternativer er imidlertid ikke begrenset til alt-attributtet. title-elementet til en SVG og attributtene aria-label, aria-labelledby og aria-describedby er andre metoder for å knytte tekstalternativer til grafisk innhold.

Jeg skal jo ikke utelate noen bilder?

Mange tenker det er uhøflig hvis skjermleserbrukere ikke får med seg alle de grafiske elementene på siden. Sannheten er at ikke alle bilder er meningsbærende—noen tilfører ingen ekstra mening til innholdet og blir bare støy. Dette gjelder for eksempel ikoner som allerede er forklart med tekst, dekorative elementer og bakgrunnsbilder. Når du skjuler slike bilder fra hjelpemiddelteknologi, gjør du faktisk brukerne en tjeneste ved å gjøre brukeropplevelsen mye mer effektiv.

Tips

«Meningsbærende» refererer til innhold eller funksjonalitet som er en del av sidens formål. Ordet brukes ofte for å skille slikt innhold fra rent dekorative elementer, det vil si pynt. Dekorativt innhold kan skjules for hjelpemiddelteknologi uten at det påvirker sidens formål eller funksjonalitet. Meningsbærende innhold må derimot være tilgjengelig for alle brukere.

Hvordan teste kravet

Kjernespørsmålene

  • Har meningsbærende ikke-tekstlig innhold et tekstlig alternativ?
  • Er ikke-meningsbærende ikke-tekstlig innhold skjult fra hjelpemiddelteknologi?

Innhold du må teste

Ikke-tekstlig innhold som ikke dekkes av andre krav:

  • Bilder og ikoner
  • Animasjoner og bakgrunnsbilder
  • Infografikk, grafer og visualiseringer
  • Grafiske elementer brukt til dekorasjon eller formatering

Testmetode

  1. Start med et automatisk testverktøy som ARC Toolkit. Slike verktøy kan avdekke mange feil relatert til tekstalternativer, som manglende alt-attributter.
  2. Fortsett med å evaluere innholdet i tekstalternativene. Du kan gjøre dette på to måter:
    • Bruk en skjermleser til å navigere gjennom siden, eller
    • Bruk et verktøy som ARC Toolkit eller Web Developer Toolbar for å fremheve alle bilder på siden.
ARC Toolkits første panel
Velg "Highlight" knappen.
ARC Toolkits Highlight-panel
Velg "Images" fra "Medias"-seksjonen. Bildene markeres på siden, og i høyre panel vises bildene med alternativtekstene sine.

For hvert bilde, verifiser:

  • Meningsbærende grafikk: Finnes det et programmatisk tilknyttet kort tekstalternativ som gir samme informasjon som bildet?
  • Komplekse grafikk: Finnes det et programmatisk tilknyttet kort tekstalternativ som henviser til et utfyllende tekstalternativ som gir samme informasjon som bildet?
  • Grafikk brukt som lenker: Kan brukere forstå lenkens mål ut fra bildets alternativtekst og eventuell lenketekst?
  • Grafikk brukt til pynt: Er disse skjult fra hjelpemiddelteknologi?

Ofte-stilte spørsmål

Medvirkende

Sarah Brodwall

Innspill til artikkelen

Logg inn med Nav SSO for å gi innspill til artikkelen

Logg inn med Nav SSO
1.1.1 Ikke-tekstlig innhold - Aksel.nav.no