Mobil tilgængelighed: Er du klar?

Alt-tekst, eller alternativ tekst, beskriver, hvad der kan ses på et billede. Det bruges til at gøre dit websted tilgængeligt for alle – inklusive blinde eller synshandicappede.

Skærmlæsere læser alt-tekst højt, så brugerne kan forstå, hvad et billede repræsenterer. Det betyder, at alt-tekst direkte bidrager til digital tilgængelighed og hjælper dit websted med at overholde WCAG-retningslinjerne.

Alt-tekst forbedrer ikke kun tilgængeligheden – den styrker også din SEO. Tydelige beskrivelser hjælper søgemaskiner med at forstå, hvad et billede handler om, hvilket understøtter både brugervenlighed og websitets ydeevne.

Kort sagt

• Alt-tekst gør hjemmesider tilgængelige for alle

• Tydelige beskrivelser hjælper søgemaskiner med bedre at forstå dit indhold

• Alt-tekst er afgørende for at overholde retningslinjerne for digital tilgængelighed

Sådan skriver du en god alternativ tekst (alt-tekst)

Du opretter alt-tekst ved at tilføje en kort beskrivelse til det element, du vil tydeliggøre. Dette kan gøres i koden eller via dit CMS (Content Management System). Et CMS giver dig mulighed for at administrere websiteindhold uden at kræve avanceret teknisk viden.

I HTML tilføjer du beskrivelsen ved hjælp af alt-attributten i img-tagget. Dette fortæller brugerne – og hjælpeteknologier – hvad billedet viser. For eksempel:

<img src="flower.jpg" alt="gul tulipan i en vase" title="gul tulipan i en vase>

Udover alt-attributten kan du også bruge titelattribut Dette giver ekstra information, når brugerne holder musen over et element. Nogle skærmlæsere læser titlen i stedet for alt-teksten. Ved at bruge den samme beskrivelse i begge, sikrer du, at ingen information går tabt.

Brug knapper og formularer ARIA-attributter såsom aria-label eller aria-labelledby . Disse beskriver et elements funktion, selv når der ikke er visuelle signaler.

Attribut

Formål

Eksempel

alle

Beskrivelse af et billede

<img alt=" Eye-Able logo">

titel

Yderligere forklaring

<img title="Eye-Able logo">

aria-label

Beskriver knapper eller formularer

<button aria-label="Send formular">

Forskellige typer billeder

Informative billeder

Informative billeder indeholder vigtigt indhold. De hjælper skærmlæserbrugere med at forstå, hvad der vises visuelt.

Et almindeligt eksempel er et logo. Alt-teksten skal kort beskrive, hvad logoet viser, og hvilken organisation det tilhører.

<img src="logo.jpg" alt=" Eye-Able-logoet viser et stiliseret øje "titel=" Eye-Able-logoet viser et stiliseret øje ".">

Undgå vage beskrivelser som "flot billede" eller "foto". Fokuser kun på information, der er relevant.

En skærmlæser læser denne tekst højt, så en person, der ikke kan se billedet, stadig ved, at det er Eye-Able-logoet. Dette gør hjemmesiden tilgængelig og sikrer, at den overholder WCAG-retningslinjerne.

Eksempler:

Dårligt eksempel

Godt eksempel

"Billede af et diagram"

"Søjlediagram, der viser salgstal for 2025"

"Logo"

"Eye-Able logo med et stiliseret blik"

"Foto"

"Portræt af en medarbejder, der arbejder på en bærbar computer"

Diagrammer og diagrammer

Diagrammer viser data og relationer. Alt-teksten skal forklare, hvad diagrammet viser, og hvorfor det er vigtigt.

• For simple diagrammer skal du inkludere nøgledataene direkte i alt-teksten.

• For komplekse diagrammer, beskriv formålet og henvis brugerne til nærliggende tekst for detaljer.

Hvis diagrammet er komplekst, skal du blot beskrive formålet og henvise til en tekst nedenfor for flere detaljer. Dette forhindrer, at alt-teksten bliver for lang.

Eksempel:
<img src="election-chart.jpg" alt="Søjlediagram, der viser valgresultater. Yderligere forklaring følger i teksten.">

Sørg altid for, at nøgletal også er tilgængelige i tekst, så alle kan få adgang til informationen.

Funktionelle billeder

Funktionelle billeder udløser handlinger, såsom knapper, ikoner eller linkede logoer. Alt-teksten skal beskrive hvad billedet gør , ikke hvordan det ser ud.

Eksempel:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Gå til Eye-Able hjemmeside" title="Gå til Eye-Able hjemmeside"</a>

Alt-teksten her angiver, at billedet linker til hjemmesiden. Logoets udseende er ikke vigtigt, men dets funktion er.

Gode eksempler:

• "Start søgning"

• "Indsend formular"

• "Næste side"

Undgå visuelle beskrivelser som "pil" eller "forstørrelsesglas".

Almindelige funktionelle billeder:

Billedtype

Fungere

Eksempel på alt-tekst

Søgeikon

Start en søgning

"Start søgning"

Gem-ikon

Gem dokumentet

"Spare"

Pil til højre

Gå til næste side

"Næste side"

Hjem-ikon

Gå til hjemmesiden

"Hjemmeside"

Denne tilgang sikrer, at alle, inklusive skærmlæserbrugere, forstår, hvad der sker, når de klikker på billedet.

Dekorative billeder

Dekorative billeder tilføjer ikke noget indhold. De er kun der for atmosfære eller design. I dette tilfælde skal alt-attributten være tom:

<img src="baggrundsmønster.jpg" alt="">

Skærmlæsere springer disse billeder over og forhindrer dermed unødvendige afbrydelser.

Brug bevidst dekorative billeder. Hvis et foto eller ikon formidler noget om indholdet, bør det ikke være dekorativt. I så fald bør du tilføje en beskrivelse.

Tjekliste til dekorative billeder:

• Tilføjer billedet mening ?
  Ja → tilføj alternativ tekst.
  Nej → lad alt-attributten være tom.

• Er det udelukkende dekorativt?

  Ja → brug alt="" .

• Er det en del af en knap eller et link?

  Nej → så kan det være dekorativt.

En klar skelnen mellem dekorative og informative billeder er med til at holde din hjemmeside tilgængelig.

Ved at bruge alt-tekst på denne måde gør du din hjemmeside mere forståelig og brugervenlig for alle.

Sådan skriver du effektiv alt-tekst

Gode alt-tekster hjælper folk, der ikke kan se billeder, med at forstå indholdet. Du kan skrive en god alt-tekst ved kort og tydeligt at beskrive, hvad der kan ses på billedet.

Bedste praksis:

• Vær kortfattet og beskrivende

• Undgå sætninger som "billede af" eller "foto af"

• Fokuser på det, der er relevant for konteksten

• Hold alt-teksten mellem 80–120 tegn

• Brug korrekt stavning og grammatik

Oversigt over retningslinjer

Aspekt

Retningslinje

Eksempel

Åbning

Undgå "billede af"

"Blå bil på en landevej"

Længde

80–120 tegn

"To studerende arbejder på bærbare computere på et bibliotek"

Sprog

Klar og korrekt

Ingen forkortelser eller emojis

Fokus

Kun relevant kontekst

Beskriv hvad der er vigtigt

Alt-tekst understøtter også SEO. Søgemaskiner bruger den til at forstå billeder, hvilket forbedrer synligheden i billedsøgeresultaterne uden at skulle overfylde søgeord.

Bed om feedback fra en person, der bruger en skærmlæser, eller som ikke er bekendt med billedet. Deres svar vil vise, om din beskrivelse er tydelig nok. Hvis de forstår, hvad billedet viser, ved du, at din alt-tekst fungerer godt. Dette vil gøre dit websted mere tilgængeligt og brugervenligt for alle.

Hvad sker der, hvis alt-teksten mangler?

Uden alternativ tekst, Skærmlæsere annoncerer filnavne som img123.jpg. Brugere overser vigtige oplysninger, og dit websted kan overtræde WCAG og tilgængelighedslovgivningen.

Konsekvenser af manglende alt-tekst:

• Brugerne forstår ikke indholdet

• Dit websted opfylder ikke WCAG 2.2-kravene

• Organisationer risikerer bøder under tilgængelighedslovgivningen

Alt-tekst sikrer lige adgang og overholdelse af den europæiske tilgængelighedslov (EAA).

Lovgivning om digital tilgængelighed

Lovgivning om digital tilgængelighed kræver, at organisationer gør websteder og apps brugbare for alle, herunder personer med handicap.

• WCAG-retningslinjerne definerer tilgængelighedsstandarder

• Fra 28. juni 2025 , den Den europæiske tilgængelighedslov (EAA) gælder for mange digitale produkter og tjenester

• Håndhævelsen overvåges af en forskelligartet gruppe af (statslige) agenturer eller institutioner.

Vigtigste forpligtelser:

• Overholder EN 301 549

• Udgiv en tilgængelighedserklæring

• Angiv tekstalternativer til billeder og medier

• Overvåg og vedligehold løbende tilgængelighed

WCAG retningslinjer og alt-tekst

WCAG 2.2 præciserer, hvordan alt-tekst skal bruges:

• Ethvert meningsfuldt billede har brug for en beskrivende alt-tekst

• Dekorative billeder bruger alt=""

• Konteksten bestemmer, hvad der er relevant

• Test regelmæssigt med tilgængelighedsværktøjer

Hovedpunkter fra WCAG 2.2:

Retningslinje

Forklaring

Alt-tekster kræves

Hvert meningsfuldt billede får en beskrivende alt-tekst.

Dekorative billeder

Brug tom alt-tekst ( alt="" ) hvis billedet ikke tilføjer nogen information.

Kontekst er vigtig

Beskriv, hvad der er relevant for sidens indhold.

Test dit indhold

Brug en WCAG-tjekker til at kontrollere, at dine alt-tekster opfylder kravene.

Ofte stillede spørgsmål

1. Hvordan tilføjer jeg alt-tekst til billeder?

Tilføj alt-attributten i HTML eller via dit CMS med en kort, tydelig beskrivelse.

2. Hvordan gør jeg alt-tekst tydelig for alle? ?

Brug et enkelt sprog, undgå unødvendige detaljer, og beskriv, hvad brugerne ellers ville gå glip af.

God alt-tekst:

• Beskriver, hvad nogen overser, hvis billedet ikke er synligt.

• Tager hensyn til WCAG' retningslinjer for digital tilgængelighed.

• Passer inden for sidens betydning.

3. Hvilke fejl bør jeg undgå?

Mange lader alt-teksten stå tom eller skriver sætninger, der er for lange. Dette gør hjemmesiden mindre tilgængelig.

Undgå disse fejl:

1. Lader alt-teksten være tom

2. At skrive generiske beskrivelser

3. Søgeordsfyldning

4. Tilføjelse af alt-tekst til rent dekorative billeder

4. Hvordan forbedrer alt-tekst SEO på min hjemmeside?

Alt-tekst hjælper søgemaskiner med at forstå, hvad der er i et billede. Dette kan forbedre dit billedes placering i Google Billeder.

Velskrevet alt-tekst:

• Forbedrer din hjemmesides synlighed.

• Giver kontekst til søgemaskiner.

• Øger sandsynligheden for, at brugerne besøger dit websted.

5. Påvirker manglende alt-tekst tilgængeligheden?

Ja, uden alt-tekst kan skærmlæsere ikke beskrive, hvad der er på billedet. Personer med synshandicap går så glip af information.

Alt-tekst sikrer, at alle forstår det samme indhold, uanset om de kan se det eller ej. Dette gør din hjemmeside mere tilgængelig og brugervenlig.

6. Hvordan kan jeg teste min alt-tekst?

Brug skærmlæsere som NVDA eller VoiceOver, eller tjek dit websted med tilgængelighedsplatformen Eye-Able for øjeblikkeligt at identificere manglende eller uklare alt-tekster.

Du kan også bruge værktøjer, der kontrollerer tilgængelighed, såsom vores Eye-Able-platform. Vi viser dig hurtigt og nemt, om dine alt-tekster mangler eller er uklare.