WCAG 2.4.9: Länksyfte (endast länk)

Vad den här regeln innebär

\n

WCAG 2.4.9 — Länksyfte (endast länk) är ett framgångskriterium på nivå AAA enligt WCAG 2.1 och 2.2. Det kräver att syftet med varje länk kan fastställas enbart utifrån länktexten. Till skillnad från motsvarigheten på nivå AA, WCAG 2.4.4 (Länksyfte — i kontext), som tillåter att länksyftet härleds från omgivande kontext såsom en rubrik, ett stycke eller en tabellcell, är 2.4.9 avsevärt striktare: länktexten i sig måste vara helt självbeskrivande, utan något som helst beroende av omgivande innehåll.

\n

Kriteriet gäller alla hyperlänkar som skapas med elementet <a>, samt alla interaktiva element som har ett tillgängligt namn och beter sig som en länk. Detta inkluderar bildlänkar (där bildens alt-attribut eller ett aria-label ger det tillgängliga namnet), knappstylade länkar och SVG-baserade länkar. Länkens tillgängliga namn — beräknat utifrån dess synliga text, aria-label, aria-labelledby eller alternativtext för bild — måste i sig självt kommunicera vart länken leder eller vad den gör.

\n

Vad som räknas som godkänt: En länk uppfyller 2.4.9 när en användare som endast läser länktexten — och inget annat på sidan — med säkerhet kan förstå länkens mål eller funktion. Till exempel uppfyller en länk med texten ”Ladda ner årsrapporten om tillgänglighet 2024 (PDF, 2,4 MB)” kravet eftersom all relevant information finns i själva länktexten. En länk med texten ”Läs hela artikeln: Hur du skriver tillgänglig länktext” är också godkänd. En bildlänk med alt='Visa prisplaner' är godkänd eftersom alt-texten är fullt beskrivande.

\n

Vad som räknas som underkänt: Länkar vars text är ”klicka här”, ”läs mer”, ”lär dig mer”, ”detta”, ”här” eller någon annan fras som bara är meningsfull i kontext uppfyller inte kriteriet. På samma sätt underkänns en länk som omsluter en bild vars alt-attribut är tomt eller saknas, vilket lämnar länken utan tillgängligt namn. Länkar som använder aria-label eller aria-labelledby men vars beräknade tillgängliga namn ändå är vagt underkänns också.

\n

Officiella undantag: WCAG anger uttryckligen ett undantag — när länkens syfte avsiktligt är tvetydigt för alla användare, inte bara för personer med funktionsnedsättning. Till exempel skulle en teaser-länk i ett mysteriumspel med texten ”Fortsätt” (där tvetydigheten är en avsiktlig del av designen) inte betraktas som ett fel, förutsatt att tvetydigheten gäller universellt. Detta undantag är snävt och bör inte användas som kryphål för dålig praxis kring länktexter.

\n\n

Varför det är viktigt

\n

Meningsfull länktext är en av de mest effektfulla tillgänglighetsförbättringar en webbplats kan göra. De grupper som påverkas mest direkt av vag länktext är skärmläsaranvändare, användare som navigerar med tangentbord, användare med kognitiva funktionsnedsättningar och användare av röststyrningsprogram.

\n

Skärmläsaranvändare — vanligtvis personer som är blinda eller har grav synnedsättning — navigerar ofta på en sida genom att ta fram en lista över alla länkar. Populära skärmläsare som NVDA, JAWS och VoiceOver erbjuder alla den här funktionen, som extraherar varje länks tillgängliga namn och presenterar dem som en fristående lista. När länkarna lyder ”klicka här”, ”läs mer” eller ”detaljer” blir den här listan en serie identiska, meningslösa poster. Användaren har inget sätt att avgöra vilken länk som ska aktiveras utan att läsa den omgivande texten för var och en — en långsam, frustrerande och ofta omöjlig uppgift, särskilt på sidor med dussintals länkar.

\n

Enligt Världshälsoorganisationen har cirka 2,2 miljarder människor världen över någon form av synnedsättning, varav minst 1 miljard har ett tillstånd som hade kunnat förebyggas eller ännu inte har åtgärdats. Även bland användare utan synnedsättning gynnas motoriskt funktionsnedsatta användare som är beroende av switch-styrning eller röstnavigering (med verktyg som Dragon NaturallySpeaking) i hög grad av beskrivande länktext, eftersom de kan aktivera en länk direkt genom att säga eller välja dess namn. Grupper med kognitiva funktionsnedsättningar — inklusive användare med uppmärksamhetsproblem, minnesnedsättningar eller lässvårigheter — gynnas också eftersom tydliga länktexter minskar den kognitiva belastningen och behovet av att läsa om kontext.

\n

Fundera på ett scenario i verkligheten: en turkisk medborgare som besöker en offentlig sjukhuswebbplats för att boka en tid. Sidan har tre tjänstknappar, som alla innehåller frasen ”Randevu Al” (Boka tid) utan ytterligare kontext i länktexten. En blind användare som öppnar sin skärmläsares länklista ser ”Randevu Al”, ”Randevu Al” och ”Randevu Al” — tre oskiljbara alternativ. Hen kan inte avgöra vilken länk som gäller kardiologi, vilken som gäller allmänmedicin och vilken som gäller radiologi utan att gå tillbaka till kontexten. För att uppfylla WCAG 2.4.9 skulle varje länk behöva lyda ”Randevu Al — Kardiyoloji”, ”Randevu Al — Genel Pratisyen” och ”Randevu Al — Radyoloji”, så att syftet är entydigt enbart utifrån länktexten.

\n

Utöver tillgänglighet har beskrivande länktext betydande SEO-värde. Sökmotorers crawlers viktar ankartext när sidor indexeras, och beskrivande länkar förbättrar relevanssignalerna både för källsidan och målsidan. Att ersätta generisk ankartext med meningsfulla fraser förbättrar upptäckbarheten och minskar avvisningsfrekvensen, vilket gynnar alla användare.

\n\n

Relaterade Axe-core-regler

\n

WCAG 2.4.9 kräver manuell testning eftersom automatiserade verktyg inte kan avgöra betydelse eller avsikt — de kan markera avsaknad av ett tillgängligt namn, men de kan inte bedöma om ett givet tillgängligt namn är tillräckligt beskrivande.

\n

\n
• Manuell testning krävs — link-name (axe-regel): Axe-core-regeln link-name upptäcker länkar som helt saknar tillgängligt namn (till exempel ett <a>-element utan textinnehåll, utan aria-label, utan aria-labelledby och utan bild med ett icke-tomt alt-attribut). Även om den här regeln fångar helt tomma länkar kan den inte utvärdera om det tillgängliga namn som faktiskt finns är meningsfullt. En länk med texten ”här” kommer att godkännas av den automatiserade regeln link-name eftersom den tekniskt sett har ett tillgängligt namn — men den underkänns enligt WCAG 2.4.9 eftersom namnet inte är självbeskrivande. Det är just därför 2.4.9 markeras som något som kräver manuell granskning: en människa måste läsa varje länktext och bedöma om den kommunicerar syftet i isolering.
\n
• Manuell testning krävs — identical-links-same-purpose: Axe-core innehåller en regel som markerar grupper av länkar med identiska tillgängliga namn men olika mål. Detta är en heuristik som lyfter fram potentiella överträdelser av 2.4.9 — till exempel flera ”Läs mer”-länkar som pekar på olika artiklar. Men även den här regeln kräver mänsklig bekräftelse, eftersom identiska namn som pekar på samma mål inte är ett fel. Regeln lyfter kandidater för granskning, inte definitiva fel.
\n
• Varför automatisering är otillräcklig: För att bedöma länksyfte krävs förståelse av naturligt språk. Ett automatiserat verktyg kan beräkna att en länks tillgängliga namn är strängen ”detaljer” men kan inte veta att den här strängen inte beskriver ett mål. På samma sätt kan ett verktyg inte avgöra om ”Visa” är tillräckligt (kanske är det det, i ett mycket specifikt, snävt avgränsat gränssnitt) eller om ”Visa den finansiella rapporten för Q3” är bättre. Mänsklig bedömning, helst i kombination med testning med skärmläsare, är den enda tillförlitliga metoden.
\n

\n\n

Hur du testar

\n

\n
1. Automatiserad skanning som baslinje: Kör axe DevTools (webbläsartillägg) eller Lighthouse på målsidan. I axe DevTools letar du efter eventuella överträdelser av regeln link-name — dessa representerar länkar utan något tillgängligt namn alls och är garanterade överträdelser av 2.4.9. Exportera resultaten och notera alla flaggade länkar. Detta steg slutför inte din 2.4.9-granskning; det identifierar bara de mest uppenbara felen.
\n
2. Generera en länklista med en skärmläsare: Öppna sidan i Firefox med NVDA installerat. Tryck Insert + F7 (NVDAs genväg för elementlistan) och välj ”Länkar” i dialogrutan. Gå igenom den fullständiga listan med länktexter. Fråga dig själv: skulle en användare som bara läser den här listan förstå målet eller funktionen för varje länk? Upprepa testet i JAWS genom att trycka Insert + F7 för att öppna dialogrutan Länkar, och i VoiceOver i Safari (macOS) genom att trycka VO + U för att öppna Rotor och navigera till Länkar. Markera alla länkar vars etikett är tvetydig, duplicerad med ett annat mål eller helt består av en URL-sträng.
\n
3. Granskning genom tabbnavigering: Navigera på sidan enbart med tangenten Tabb. Varje gång fokus hamnar på en länk läser du bara det fokuserade elementets synliga text (eller lyssnar på skärmläsarens uppläsning). Utan att titta på omgivande innehåll avgör du om länkens syfte är tydligt. Dokumentera varje länk där syftet inte framgår av länktexten ensam.
\n
4. Kontroll av bildlänkar: Identifiera alla länkar som bara innehåller en bild (ingen synlig text). Inspektera varje länk med webbläsarens utvecklarverktyg för att verifiera att bilden har ett icke-tomt, beskrivande alt-attribut, eller att länken har ett beskrivande aria-label. Beräkningen av det tillgängliga namnet ska resultera i en meningsfull fras.
\n
5. Kontroll av duplicerad länktext: Sök i sidans HTML efter flera förekomster av samma länktext (till exempel flera ”Läs mer”- eller ”Köp nu”-ankare). Kontrollera om dessa länkar pekar på samma mål (acceptabelt) eller olika mål (en överträdelse av 2.4.9 om de inte särskiljs via aria-label eller aria-labelledby).
\n
6. Test med röststyrning: Använd Dragon NaturallySpeaking eller Windows Voice Access och försök att aktivera länkar genom att säga deras synliga etikett. Om den uttalade etiketten är tvetydig och flera kandidater dyker upp (till exempel om du säger ”Klicka Läs mer” och flera länkar markeras) bekräftar detta ett verkligt användbarhetsproblem i linje med 2.4.9.
\n

\n\n

Hur du åtgärdar

\n

Generisk ”Läs mer”-länktext — Felaktig

\n

<!-- Fails 2.4.9: link purpose cannot be determined from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

Generisk ”Läs mer”-länktext — Korrekt

\n

<!-- Passes 2.4.9: link purpose is fully clear from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternative: visually show short text but provide full accessible name -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

Endast bildlänk med saknad alt-text — Felaktig

\n

<!-- Fails 2.4.9: image link has no accessible name; screen readers announce URL or nothing -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Endast bildlänk med saknad alt-text — Korrekt

\n

<!-- Passes 2.4.9: alt text gives the link a fully descriptive accessible name -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternative using aria-label on the anchor -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' hides decorative image from AT; aria-label on <a> provides the name -->\n</a>

\n\n

Flera identiska ”Satın Al” (Köp nu)-länkar — Felaktigt

\n

<!-- Fails 2.4.9: three identical link labels pointing to different products -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Flera identiska ”Satın Al” (Köp nu)-länkar — Korrekt

\n

<!-- Passes 2.4.9: each link has a unique, descriptive accessible name via aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternative: use visually hidden text inside the anchor -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>\n\n<p><em>(Content truncated due to token limit — please retry this article.)</em></p>