TILLGÄNGLIGHET ≠ OVERLAY · 37
Tillgängliga länkar: veta vart du kommer innan du klickar
📅 10 november 2026 · ⏱ 6 min läsning
En länk ska hjälpa människor att välja, inte tvinga dem att gissa. Text, sammanhang och beteende avgör om någon kan orientera sig med skärmläsare, tangentbord, röststyrning eller förstoring.
01. När alla vägar heter ”här”
Föreställ dig en tjänstesida med åtta länkar som heter ”mer information”. När hela sidan syns kan du kanske koppla varje länk till kortet runt den. Den som lyssnar på en länklista kan däremot höra åtta identiska namn. Personen måste gå tillbaka till innehållet, hitta varje block och återskapa sambandet med destinationen. En enkel handling blir en onödig sökning.
Det berör inte bara blinda besökare. Vid förstoring kanske endast en liten del av kortet syns. Den som använder tangentbord måste bedöma om varje stopp är relevant. Beskrivande länkar minskar arbetet redan före aktivering. Frågan är vad personen kan förutse med den information som faktiskt finns tillgänglig, inte vad formgivaren vet utifrån hela sidans utseende.
02. Beskriv syftet i stället för en tom uppmaning
”Se öppettider för support” ger en tydligare förväntan än ”klicka här”. ”Ladda ned anmälningsguiden” säger mer än ”ladda ned”. Varje länk behöver inte bli en ändlös mening. Välj orden som skiljer resursen från andra och undvik att upprepa hela stycket. Korthet fungerar när den viktiga informationen finns kvar.
Texten måste motsvara innehållet på målsidan. Om ”Priser för tjänsten” öppnar en reklamsida utan priser hjälper etiketten inte personen att slutföra uppgiften. Kontrollera länkar efter dokumentbyten och omorganisationer. Ett tidigare korrekt namn kan bli missvisande trots att adressen fortfarande fungerar. Redaktionell precision hör till tillgänglighet och löpande underhåll. Länknamnen behöver granskas tillsammans med de resurser som de beskriver.
03. Giltigt sammanhang och förståelse utan sammanhang
WCAG 2.2 skiljer mellan att förstå länkens syfte i sitt sammanhang och det strängare kravet att förstå det enbart genom namnet. Kriterium 2.4.4 på nivå A tillåter länktext tillsammans med ett sammanhang som programvara kan fastställa. Ett tillhörande stycke, listobjekt eller en tabellcell kan ge relevant information.
”Läs mer” är alltså inte automatiskt ett fel i varje situation. Undersök den faktiska kopplingen, inte bara den visuella närheten. Även när sammanhanget uppfyller kriteriet brukar ett specifikt namn underlätta länklistor och snabb utforskning. Skilj överensstämmelsebedömningen från valet att erbjuda en tydligare upplevelse. Gör inte en nyttig rekommendation till en påhittad regel, och anta inte att ett snyggt kort bevisar en programmatisk relation.
04. Synliga och upplästa namn måste passa ihop
En länks tillgängliga namn kan komma från text, en bild eller en mekanism som aria-label. Om den synliga etiketten säger ”Kontakta” men det tillgängliga namnet är helt annorlunda kan någon med röststyrning få svårt att aktivera länken genom att säga det som syns. Kriterium 2.5.3 kräver att namnet innehåller den synliga etikettens text där det är tillämpligt.
Förstahandsvalet är ofta att förbättra den synliga texten för alla. Lägg inte till långa dolda beskrivningar överallt utan att granska det slutliga namnet. Attributet title bör inte heller vara den enda platsen där destinationen förklaras: åtkomsten varierar mellan enheter. Kontrollera det beräknade namnet och lyssna på uppläsningen i den verkliga gränssnittsmiljön, inklusive upprepningar eller oväntade formuleringar.
05. En länkad bild behöver också ett syfte
Om en bild är länkens enda innehåll ska textalternativet förmedla länkens funktion. För en logotyp som leder till startsidan är navigeringen viktig, inte beskrivningen av varje linje i bilden. Ett länkat förstoringsglas bör inte få ett filnamn som ”ikon-slutlig-2.svg” som namn. Beskriv den funktion besökaren faktiskt kan välja.
När bild och text ingår i samma länk och texten redan förklarar syftet kan en dekorativ bild ha ett tomt textalternativ för att undvika upprepning. Granska också kort med bild, rubrik och knapp till samma mål. Flera länkar i följd kan skapa onödiga stopp. Hitta en konsekvent lösning utan nästlade länkar eller att en hel behållare förlorar sin semantik och inbyggda interaktion.
06. Länkar och knappar har olika uppgifter
En länk leder till en resurs eller plats. En knapp utför en handling, exempelvis öppnar en panel eller skickar ett formulär. De kan se likadana ut men beteenden och förväntningar skiljer sig. Använd inbyggda HTML-element som passar funktionen. En länk utan ett riktigt mål är ingen universallösning för alla kontroller.
Ersätt inte den grunden med en div som har en klickhändelse och en improviserad roll. Då måste även fokus, tangentbordsaktivering och andra beteenden som det inbyggda elementet redan ger implementeras. Kontrollera att länkar fungerar med Enter och knappar följer förväntad interaktion. Tekniken ska stödja uppgiften, inte kräva att människor upptäcker ett nytt beteende i varje komponent. Likartat utseende får inte dölja oförutsägbar hantering.
07. Förutsägbara nedladdningar och sammanhangsbyten
När en länk leder till ett dokument ska ämnet framgå tydligt. Format och, när det är användbart, filstorlek hjälper människor att avgöra om de vill öppna resursen i mobilen eller med begränsad uppkoppling. ”Anmälningsguide, PDF” förklarar mer än en lång adress eller en oförklarad ikon.
Öppna inte nya flikar av gammal vana. Finns ett skäl hjälper en förvarning personen att behålla orienteringen. Den goda rekommendationen måste skiljas från påståendet att varje ny flik automatiskt bryter mot WCAG. En tydlig länk gör inte heller målfilen tillgänglig. En PDF utan struktur skapar fortfarande hinder trots ett perfekt namn. Granska hela vägen från valet av resurs till användningen av innehållet.
08. Synlighet, fokus och utrymme att aktivera
Länkar i stycken ska kunna identifieras utan att enbart förlita sig på färg. Understrykning är ofta en tydlig och stabil lösning. Kontrollera kontrast och se till att besökta eller fokuserade tillstånd inte gör texten oläslig. Interaktionen ska kunna kännas igen innan en muspekare förs över den.
Gå igenom länkarna med Tab och Skift+Tab. Fokusindikatorn ska vara synlig, och en komponent som får fokus får inte döljas helt av innehåll som webbplatsen skapat; WCAG 2.2 behandlar det sista fallet i 2.4.11. Granska också avstånd och tillämpliga krav på målstorlek med deras undantag. Ett större klickområde får inte skapa överlappningar som av misstag aktiverar en annan destination.
09. Testa beslutet före klicket
Välj en verklig uppgift: hitta öppettider eller nå supportens kontaktuppgifter. Läs länkarnas namn utan att aktivera dem och anteckna vilken destination du förväntar dig. Följ sedan vägen och jämför förväntan med resultatet. Upprepa med skärmläsare, länklista, tangentbord och förstoring där det är relevant.
Automatiska verktyg kan upptäcka vissa saknade namn eller kontrastproblem, men avgör inte om ”mer information” utlovar rätt resurs eller om en översättning behåller betydelsen. Dokumentera tvetydigheter med plats, uppläst namn och förväntat mål. Bedöm inte hela webbplatsen utifrån en ensam länk. Menyer, kort, sidfot och redaktionellt innehåll kommer ofta från olika komponenter och behöver granskas var för sig.
10. Rätta källan och bevara tydligheten
I WordPress och Divi behöver både redigerarens text, den färdiga HTML-koden och det tillgängliga namnet granskas. Rätta den gemensamma modulen när många kort upprepar samma problem. Översätt namnen och kontrollera destinationsspråket. En svensk etikett hjälper lite om resursen oväntat växlar till ett annat språk efter aktivering.
En overlay känner inte självständigt till varje länks redaktionella avsikt och garanterar inte att ett allmänt namn beskriver rätt innehåll. Visuella inställningar kan komplettera arbetet men ersätter inte det beslutet. Lägg till en enkel fråga i granskningen: kan personen välja med kunskap före aktivering? Tillgängligheten förbättras när människor vet vart de är på väg, når förväntat innehåll och kan fortsätta självständigt.