Länktext som är begriplig utanför sitt sammanhang

Hur skärmläsaranvändare faktiskt navigerar

Innan vi pratar om hur man skriver länktext hjälper det att förstå hur människor faktiskt använder länkar när de inte kan se sidan.

Skärmläsare erbjuder en genväg som de flesta seende användare inte vet finns: genom att trycka på en enda tangent (vanligtvis bokstaven L i de flesta skärmläsare) bläddrar man igenom alla länkar på sidan, som läses upp en efter en, utanför sitt sammanhang. Användare utnyttjar detta för att snabbt skanna en sida, på samma sätt som en seende användares öga kanske skummar rubrikerna och uppmaningsknapparna.

Om din sida har tolv länkar som säger “Läs mer” är den listan meningslös. Användaren hör: “Läs mer. Läs mer. Läs mer. Läs mer …” De kan inte avgöra vart någon av dem leder.

Detta är det grundläggande problemet som tillgänglighet i länktext försöker lösa: varje länk måste vara självbeskrivande, eftersom sammanhanget försvinner när du navigerar genom länkar.

Vad WCAG säger

2.4.4 Länkens syfte (i sammanhang) på nivå A kräver att syftet med varje länk kan avgöras utifrån länktexten enbart, eller utifrån länktexten tillsammans med dess omgivande sammanhang (stycket, listobjektet, tabellcellen eller rubriken den sitter i).

2.4.9 Länkens syfte (endast länken) på nivå AAA går längre och kräver att länkens syfte framgår av länktexten enbart utan att förlita sig på sammanhang. Att sträva efter detta är en bra idé även om du bara siktar på AA-efterlevnad.

2.5.3 Etikett i namn (nivå A) kräver att när en länk eller knapp har en synlig textetikett ska det tillgängliga namnet börja med den texten. En ikonknapp med etiketten “Läs mer om tillgänglighet” och en aria-label som lyder “Klicka här” misslyckas med detta kriterium.

Vanliga fel och vad du ska göra i stället

”Klicka här” och “Läs mer”

Dessa är de mest utbredda felen inom länktillgänglighet på webben.

<!-- Misslyckas: ingen innebörd utanför sammanhanget -->
<a href="/blog/wcag-compliance">Läs mer</a>

<!-- Godkänt: självbeskrivande -->
<a href="/blog/wcag-compliance">Läs vår guide till WCAG 2.2-efterlevnad</a>

Åtgärden är nästan alltid enkel: ersätt den vaga frasen med text som beskriver destinationen eller handlingen.

Generiska “här”-länkar

“Klicka här för att ladda ner rapporten” misslyckas av samma skäl — själva länkordet är bara “här”.

<!-- Misslyckas -->
<p>För de fullständiga resultaten, klicka <a href="/report.pdf">här</a>.</p>

<!-- Godkänt: länktexten beskriver vad som länkas -->
<p>Ladda ner <a href="/report.pdf">2025 års tillgänglighetsgranskningsrapport (PDF)</a>.</p>

Notera PDF-indikatorn inom parentes — detta är god praxis för att informera användare om att länken kommer att öppna en PDF snarare än en webbsida.

Länkar till samma destination med olika text, eller olika destinationer med samma text

Båda skapar förvirring. Om fem navigationslänkar alla säger “Läs mer” men pekar på olika tjänstesidor kan användare inte förutsäga vart de hamnar. Omvänt är två olika länkar som säger “Guide till WCAG-efterlevnad” men går till olika sidor lika förvirrande.

Länkar och knappar med enbart ikoner

En länk eller knapp som endast innehåller en ikon — ingen synlig text — måste ha ett tillgängligt namn som tillhandahålls genom aria-label eller aria-labelledby. Utan det meddelar skärmläsare filnamnet på ikonbilden eller ingenting alls.

<!-- Misslyckas: meddelas som "länk, grafik" eller SVG-filnamnet -->
<a href="/social/twitter">
  <svg><!-- twitter-ikon --></svg>
</a>

<!-- Godkänt: aria-label tillhandahåller det tillgängliga namnet -->
<a href="/social/twitter" aria-label="QualiBooth på Twitter">
  <svg aria-hidden="true"><!-- twitter-ikon --></svg>
</a>

aria-hidden="true" på SVG:n förhindrar att skärmläsare meddelar SVG:ns titel eller innehåll — eftersom länken själv redan har en etikett är ikoninnehållet överflödigt.

Att använda aria-label för att komplettera synlig text

När en sida har flera “Ladda ner”-länkar och du inte kan ändra den synliga texten (en designbegränsning) kan aria-label utöka det tillgängliga namnet:

<!-- Den synliga texten är "Ladda ner" men det tillgängliga namnet är hela strängen -->
<a href="/report-2025.pdf" aria-label="Ladda ner 2025 års tillgänglighetsrapport PDF">
  Ladda ner
</a>

En varning här: WCAG 2.5.3 kräver att det tillgängliga namnet börjar med den synliga texten. “Ladda ner 2025 års tillgänglighetsrapport PDF” börjar med “Ladda ner” — bra. “2025 års tillgänglighetsrapport — Ladda ner PDF” gör det inte — dåligt.

Länkar som öppnas i en ny flik

Att öppna en ny flik utan förvarning desorienterar användare, särskilt de med kognitiva funktionsnedsättningar eller skärmläsaranvändare som kanske inte inser vad som hände. Ange beteendet med ny flik i länktexten eller med en visuellt dold notering.

<!-- Signalerar beteende med ny flik visuellt och till hjälpmedelsteknik -->
<a href="https://example.com" target="_blank">
  Visa exempelrapport
  <span class="sr-only">(öppnas i ny flik)</span>
</a>

När länktext fungerar utan att vara uppenbar

Sammanhanget kan legitimt tillhandahålla den saknade innebörden enligt WCAG 2.4.4. En “Ladda ner”-länk är godtagbar om den sitter i en tabellcell vars kolumnrubrik säger “Årsrapport” och vars radrubrik säger “2025”. Sammanhanget gör syftet tydligt.

Detta skiljer sig från en “Läs mer”-länk i slutet av ett fristående stycke. Stycket ger sammanhang, men “Läs mer” misslyckas ändå eftersom länktexten skulle kunna gälla vilket stycke som helst — den identifierar inte unikt destinationen.

Bildlänkar

När länkinnehållet är en bild snarare än text blir bildens alt-attribut länkens tillgängliga namn. Alt-texten ska beskriva länkens destination, inte bilden i sig.

<!-- Alt beskriver länkens destination, inte bildens utseende -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Tjänster för tillgänglighetsgranskning">
</a>

Om bilden är rent dekorativ och åtföljs av synlig text i samma länk ska bilden ha alt="" för att undvika att samma text meddelas två gånger.

En snabb granskning du kan göra själv

Öppna din sida och ta fram listan över länkar med hjälp av din skärmläsare (eller installera det kostnadsfria webbläsartillägget HeadingsMap eller WAVE för att se länkar extraherade från sitt sammanhang). Läs igenom listan. Om du inte kan avgöra vart varje länk går utifrån texten enbart behöver den bearbetas.

Den vanligaste åtgärden är att lägga till en <span class="sr-only"> (visuellt dold, tillgänglig för skärmläsare) med ytterligare sammanhang, eller att helt enkelt skriva om länktexten helt. Att skriva om är alltid att föredra — det förbättrar ofta användbarheten för alla, inte bara för skärmläsaranvändare.

För en grundlig granskning av din webbplats länkar och andra WCAG-kriterier täcker våra manuella tillgänglighetsgranskningar länkens syfte som en del av en bredare granskning av testare som använder hjälpmedelsteknik varje dag.