Linktekst, der giver mening uden for kontekst

Hvordan skærmlæserbrugere faktisk navigerer

Før vi taler om, hvordan man skriver linktekst, hjælper det at forstå, hvordan folk faktisk bruger links, når de ikke kan se siden.

Skærmlæsere tilbyder en genvej, som de fleste seende brugere ikke ved eksisterer: ved at trykke på en enkelt tast (typisk bogstavet L i de fleste skærmlæsere) gennemgår man alle links på siden, læser dem ét for ét, uden for kontekst. Brugere benytter dette til hurtigt at skimme en side, på samme måde som en seende brugers øje måske skimmer overskrifterne og call-to-action-knapperne.

Hvis din side har tolv links, der siger “Læs mere”, er den liste meningsløs. Brugeren hører: “Læs mere. Læs mere. Læs mere. Læs mere…” De kan ikke se, hvad nogen af dem fører til.

Dette er det grundlæggende problem, som tilgængelighed af linktekst forsøger at løse: hvert link skal være selvbeskrivende, fordi kontekst forsvinder, når du navigerer via links.

Hvad WCAG siger

2.4.4 Linkformål (i kontekst) på niveau A kræver, at formålet med hvert link kan bestemmes ud fra linkteksten alene eller ud fra linkteksten sammen med dens omgivende kontekst (det afsnit, punkt på en liste, tabelcelle eller den overskrift, det sidder i).

2.4.9 Linkformål (kun link) på niveau AAA går videre og kræver, at linkformålet fremgår af linkteksten alene uden at forlade sig på kontekst. At sigte efter dette er en god idé, selv hvis du kun stiler mod AA-overholdelse.

2.5.3 Etiket i navn (niveau A) kræver, at når et link eller en knap har en synlig tekstetiket, skal det tilgængelige navn starte med den tekst. En ikonknap mærket “Lær mere om tilgængelighed” med en aria-label på “Klik her” fejler dette kriterium.

Almindelige fejl, og hvad du skal gøre i stedet

”Klik her” og “Læs mere”

Disse er de mest udbredte fejl i linktilgængelighed på nettet.

<!-- Fejler: ingen betydning uden for kontekst -->
<a href="/blog/wcag-compliance">Læs mere</a>

<!-- Består: selvbeskrivende -->
<a href="/blog/wcag-compliance">Læs vores guide til WCAG 2.2-overholdelse</a>

Løsningen er næsten altid enkel: erstat den vage frase med tekst, der beskriver destinationen eller handlingen.

Generiske “her”-links

“Klik her for at downloade rapporten” fejler af samme grund — selve linkordet er bare “her.”

<!-- Fejler -->
<p>For de fulde resultater, klik <a href="/report.pdf">her</a>.</p>

<!-- Består: linkteksten beskriver, hvad der linkes til -->
<p>Download <a href="/report.pdf">tilgængelighedsauditrapporten for 2025 (PDF)</a>.</p>

Bemærk PDF-indikatoren i parentes — dette er god praksis for at informere brugere om, at et klik på linket vil åbne en PDF frem for en webside.

Links til den samme destination med forskellig tekst, eller forskellige destinationer med den samme tekst

Begge skaber forvirring. Hvis fem navigationslinks alle siger “Lær mere”, men peger på forskellige servicesider, kan brugerne ikke forudsige, hvor de lander. Omvendt er to forskellige links, der siger “guide til WCAG-overholdelse”, men fører til forskellige sider, lige så forvirrende.

Links og knapper med kun ikon

Et link eller en knap, der kun indeholder et ikon — ingen synlig tekst — skal have et tilgængeligt navn tilvejebragt gennem aria-label eller aria-labelledby. Uden det annoncerer skærmlæsere ikonbilledets filnavn eller slet ingenting.

<!-- Fejler: annonceres som "link, grafik" eller SVG-filnavnet -->
<a href="/social/twitter">
  <svg><!-- twitter-ikon --></svg>
</a>

<!-- Består: aria-label giver det tilgængelige navn -->
<a href="/social/twitter" aria-label="QualiBooth på Twitter">
  <svg aria-hidden="true"><!-- twitter-ikon --></svg>
</a>

aria-hidden="true" på SVG’en forhindrer skærmlæsere i at annoncere SVG-titlen eller -indholdet — da selve linket allerede har en etiket, er ikonindholdet overflødigt.

At bruge aria-label til at supplere synlig tekst

Når en side har flere “Download”-links, og du ikke kan ændre den synlige tekst (en designbegrænsning), kan aria-label udvide det tilgængelige navn:

<!-- Den synlige tekst er "Download", men det tilgængelige navn er den fulde streng -->
<a href="/report-2025.pdf" aria-label="Download tilgængelighedsrapport 2025 PDF">
  Download
</a>

En advarsel her: WCAG 2.5.3 kræver, at det tilgængelige navn starter med den synlige tekst. “Download tilgængelighedsrapport 2025 PDF” starter med “Download” — godt. “2025 tilgængelighedsrapport — Download PDF” gør ikke — dårligt.

Links, der åbner i en ny fane

At åbne en ny fane uden advarsel desorienterer brugere, især dem med kognitive handicap eller skærmlæserbrugere, som måske ikke er klar over, hvad der skete. Angiv adfærd med ny fane i linkteksten eller med en visuelt skjult note.

<!-- Signalerer adfærd med ny fane visuelt og til hjælpeteknologi -->
<a href="https://example.com" target="_blank">
  Se eksempelrapport
  <span class="sr-only">(åbner i ny fane)</span>
</a>

Når linktekst fungerer uden at være oplagt

Kontekst kan legitimt tilvejebringe den manglende betydning under WCAG 2.4.4. Et “Download”-link er acceptabelt, hvis det sidder i en tabelcelle, hvis kolonneoverskrift siger “Årsrapport”, og hvis rækkeoverskrift siger “2025”. Konteksten gør formålet klart.

Dette er forskelligt fra et “Læs mere”-link i slutningen af et selvstændigt afsnit. Afsnittet giver kontekst, men “Læs mere” fejler stadig, fordi linkteksten kunne gælde for ethvert afsnit — den identificerer ikke entydigt destinationen.

Billedlinks

Når linkindholdet er et billede frem for tekst, bliver billedets alt-attribut det tilgængelige navn på linket. Alt-teksten skal beskrive linkets destination, ikke selve billedet.

<!-- Alt-teksten beskriver linkets destination, ikke billedets udseende -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Tjenester til tilgængelighedsaudit">
</a>

Hvis billedet er rent dekorativt og ledsaget af synlig tekst i samme link, bør billedet have alt="" for at undgå at annoncere den samme tekst to gange.

En hurtig audit, du selv kan køre

Åbn din side og hent listen over links op ved hjælp af din skærmlæser (eller installer den gratis HeadingsMap- eller WAVE-browserudvidelse for at se links trukket ud af kontekst). Læs listen igennem. Hvis du ikke kan se, hvor hvert link fører hen, ud fra teksten alene, skal det forbedres.

Den mest almindelige løsning er at tilføje en <span class="sr-only"> (visuelt skjult, tilgængelig for skærmlæsere) med yderligere kontekst, eller simpelthen at omskrive linkteksten helt. Omskrivning er altid at foretrække — det forbedrer ofte brugervenligheden for alle, ikke kun skærmlæserbrugere.

For en grundig gennemgang af dit websites links og andre WCAG-kriterier dækker vores manuelle tilgængelighedsaudits linkformål som en del af en bredere gennemgang af testere, der bruger hjælpeteknologi hver dag.