WCAG 2.4.9: Doel van de link (alleen link)

Wat Deze Regel Betekent

\n

WCAG 2.4.9 — Linkdoel (alleen link) is een succescriterium op niveau AAA onder WCAG 2.1 en 2.2. Het vereist dat het doel van elke link kan worden bepaald op basis van alleen de linktekst. In tegenstelling tot de tegenhanger op niveau AA, WCAG 2.4.4 (Linkdoel — in context), die toestaat dat het linkdoel wordt afgeleid uit de omringende context zoals een kop, alinea of tabelcel, is 2.4.9 aanzienlijk strenger: de linktekst zelf moet volledig zelfbeschrijvend zijn, zonder enige afhankelijkheid van omringende inhoud.

\n

Het criterium is van toepassing op alle hyperlinks die zijn gemaakt met het element <a>, evenals op elk interactief element dat een toegankelijke naam heeft en zich gedraagt als een link. Dit omvat afbeeldingslinks (waarbij het alt-attribuut van de afbeelding of een aria-label de toegankelijke naam levert), knoppen die als link zijn gestileerd, en op SVG gebaseerde links. De toegankelijke naam van de link — berekend op basis van de zichtbare tekst, aria-label, aria-labelledby of alternatieve tekst van de afbeelding — moet op zichzelf duidelijk maken waar de link naartoe gaat of wat deze doet.

\n

Wat telt als een voldoende resultaat: Een link voldoet aan 2.4.9 wanneer een gebruiker die alleen de linktekst leest — en niets anders op de pagina — het doel of de functie van de link met vertrouwen kan begrijpen. Zo voldoet een link met de tekst "Download the 2024 Annual Accessibility Report (PDF, 2.4 MB)" omdat alle relevante informatie in de linktekst zelf is opgenomen. Een link met de tekst "Read the full article: How to Write Accessible Link Text" voldoet ook. Een afbeeldingslink met alt='View pricing plans' voldoet omdat de alt-tekst volledig beschrijvend is.

\n

Wat telt als een onvoldoende resultaat: Links waarvan de tekst "click here", "read more", "learn more", "this", "here" of een andere uitdrukking is die alleen in context betekenisvol is, voldoen niet aan dit criterium. Evenzo voldoet een link rond een afbeelding waarvan het alt-attribuut leeg of afwezig is, waardoor de link geen toegankelijke naam heeft, niet. Links die aria-label of aria-labelledby gebruiken maar waarvan de berekende toegankelijke naam nog steeds vaag is, voldoen evenmin.

\n

Officiële uitzonderingen: WCAG vermeldt expliciet één uitzondering — wanneer het doel van de link opzettelijk dubbelzinnig is voor alle gebruikers, niet alleen voor mensen met een beperking. Een voorbeeld is een teaserlink in een mysteriespel met de tekst "Proceed" (waarbij de dubbelzinnigheid een bewuste ontwerpkeuze is); deze wordt niet als een fout beschouwd, mits de dubbelzinnigheid universeel geldt. Deze uitzondering is beperkt en mag niet worden gebruikt als achterdeur voor slechte praktijken rond linktekst.

\n\n

Waarom Het Belangrijk Is

\n

Betekenisvolle linktekst is een van de meest impactvolle toegankelijkheidsverbeteringen die een website kan doorvoeren. De groepen die het meest direct worden getroffen door vage linktekst zijn schermlezersgebruikers, gebruikers die met het toetsenbord navigeren, mensen met cognitieve beperkingen en gebruikers van spraakbesturingssoftware.

\n

Schermlezersgebruikers — meestal mensen die blind zijn of een ernstige visuele beperking hebben — navigeren vaak door een pagina door een lijst met alle links op te vragen. Populaire schermlezers zoals NVDA, JAWS en VoiceOver bieden deze functie, die de toegankelijke naam van elke link extraheert en als een zelfstandige lijst presenteert. Wanneer links "click here", "read more" of "details" luiden, wordt deze lijst een reeks identieke, betekenisloze items. De gebruiker kan niet bepalen welke link hij moet activeren zonder voor elke link de omringende inhoud te lezen — een trage, frustrerende en vaak onmogelijke taak, vooral op pagina's met tientallen links.

\n

Volgens de Wereldgezondheidsorganisatie hebben wereldwijd ongeveer 2.2 miljard mensen een vorm van visuele beperking, van wie er minstens 1 miljard een aandoening heeft die voorkomen had kunnen worden of nog niet is aangepakt. Zelfs onder gebruikers zonder visuele beperking profiteren motorisch beperkte gebruikers die afhankelijk zijn van schakelbediening of spraaknavigatie (met tools zoals Dragon NaturallySpeaking) enorm van beschrijvende linktekst, omdat zij een link direct kunnen activeren door de naam uit te spreken of te selecteren. Groepen met cognitieve beperkingen — waaronder mensen met aandachtsstoornissen, geheugenproblemen of leesmoeilijkheden — profiteren ook, omdat duidelijke linklabels de cognitieve belasting en de noodzaak om context opnieuw te lezen verminderen.

\n

Denk aan een scenario uit de echte wereld: een Turkse burger die de website van een openbaar ziekenhuis bezoekt om een afspraak te maken. De pagina heeft drie serviceknoppen, die elk de tekst "Randevu Al" (Afspraak maken) bevatten zonder verdere context in de linktekst. Een blinde gebruiker die de linklijst van de schermlezer opent, ziet "Randevu Al", "Randevu Al" en "Randevu Al" — drie niet van elkaar te onderscheiden opties. Diegene kan niet bepalen welke link voor cardiologie is, welke voor de huisarts en welke voor radiologie, zonder terug te navigeren naar de context. Om aan WCAG 2.4.9 te voldoen, moet elke link de tekst "Randevu Al — Kardiyoloji", "Randevu Al — Genel Pratisyen" en "Randevu Al — Radyoloji" hebben, zodat het doel ondubbelzinnig is op basis van alleen de linktekst.

\n

Naast toegankelijkheid heeft beschrijvende linktekst aanzienlijke SEO-waarde. Zoekmachinecrawlers wegen ankertekst mee bij het indexeren van pagina's, en beschrijvende links verbeteren de relevantiesignalen voor zowel de bronpagina als de bestemmingspagina. Het vervangen van generieke ankertekst door betekenisvolle uitdrukkingen verbetert de vindbaarheid en verlaagt het bouncepercentage, wat alle gebruikers ten goede komt.

\n\n

Gerelateerde Axe-core-regels

\n

WCAG 2.4.9 vereist handmatige tests omdat geautomatiseerde tools geen betekenis of intentie kunnen bepalen — ze kunnen het ontbreken van een toegankelijke naam signaleren, maar niet beoordelen of een gegeven toegankelijke naam voldoende beschrijvend is.

\n

\n
• Handmatige test vereist — link-name (axe-regel): De axe-core-regel link-name detecteert links die helemaal geen toegankelijke naam hebben (bijvoorbeeld een <a>-element zonder tekstinhoud, zonder aria-label, zonder aria-labelledby en zonder afbeelding met een niet-leeg alt-attribuut). Hoewel deze regel volledig lege links opspoort, kan hij niet beoordelen of de toegankelijke naam die wél bestaat betekenisvol is. Een link met de tekst "here" zal slagen voor de geautomatiseerde link-name-regel omdat er technisch gezien een toegankelijke naam is — maar hij voldoet niet aan WCAG 2.4.9 omdat die naam niet zelfbeschrijvend is. Dit is precies waarom 2.4.9 wordt aangemerkt als een criterium dat handmatige beoordeling vereist: een mens moet elk linklabel lezen en beoordelen of het het doel op zichzelf communiceert.
\n
• Handmatige test vereist — identical-links-same-purpose: Axe-core bevat een regel die sets links markeert met identieke toegankelijke namen maar verschillende bestemmingen. Dit is een heuristiek die mogelijke 2.4.9-overtredingen naar voren brengt — bijvoorbeeld meerdere "Read More"-links die naar verschillende artikelen verwijzen. Maar ook deze regel vereist menselijke bevestiging, omdat identieke namen die naar dezelfde bestemming verwijzen geen overtreding zijn. De regel levert kandidaten voor beoordeling op, geen definitieve fouten.
\n
• Waarom automatisering onvoldoende is: Natuurlijke taalverwerking is nodig om het linkdoel te beoordelen. Een geautomatiseerde tool kan berekenen dat de toegankelijke naam van een link de tekenreeks "details" is, maar kan niet weten dat deze tekenreeks er niet in slaagt een bestemming te beschrijven. Evenmin kan een tool beoordelen of "View" voldoende is (misschien wel, in een zeer specifiek, nauw afgebakend interface) of dat "View the Q3 Financial Statement" beter is. Menselijk oordeel, idealiter gecombineerd met tests met een schermlezer, is de enige betrouwbare methode.
\n

\n\n

Hoe te Testen

\n

\n
1. Geautomatiseerde scan als basislijn: Voer axe DevTools (browserextensie) of Lighthouse uit op de doelpagina. Zoek in axe DevTools naar eventuele overtredingen van de regel link-name — dit zijn links zonder toegankelijke naam en zijn gegarandeerde fouten ten opzichte van 2.4.9. Exporteer de resultaten en noteer alle gemarkeerde links. Deze stap voltooit je 2.4.9-audit niet; hij identificeert alleen de meest voor de hand liggende fouten.
\n
2. Genereer een lijst met links met een schermlezer: Open de pagina in Firefox met NVDA geïnstalleerd. Druk op Insert + F7 (de Elements List-sneltoets van NVDA) en selecteer "Links" in het dialoogvenster. Bekijk de volledige lijst met linklabels. Vraag jezelf af: zou een gebruiker die alleen deze lijst leest het doel of de functie van elke link kunnen begrijpen? Herhaal deze test in JAWS door op Insert + F7 te drukken om het Links List-dialoogvenster te openen, en in VoiceOver op Safari (macOS) door op VO + U te drukken om de Rotor te openen en naar Links te navigeren. Markeer elke link waarvan het label dubbelzinnig is, wordt gedupliceerd met een andere bestemming, of volledig uit een URL-tekenreeks bestaat.
\n
3. Toetsenbord-tabdoorloop-audit: Navigeer door de pagina met alleen de Tab-toets. Telkens wanneer de focus op een link landt, lees je alleen de zichtbare tekst van het gefocuste element (of luister je naar de aankondiging van de schermlezer). Zonder naar de omringende inhoud te kijken, bepaal je of het doel van de link duidelijk is. Documenteer elke link waarvan het doel niet duidelijk is op basis van alleen de linktekst.
\n
4. Controle van afbeeldingslinks: Identificeer alle links die alleen een afbeelding bevatten (geen zichtbare tekst). Inspecteer elke link met de ontwikkelaarstools van de browser om te controleren of de afbeelding een niet-leeg, beschrijvend alt-attribuut heeft, of dat de link een beschrijvend aria-label heeft. De berekening van de toegankelijke naam moet resulteren in een betekenisvolle uitdrukking.
\n
5. Controle op dubbele linktekst: Zoek in de HTML van de pagina naar meerdere instanties van dezelfde linktekst (bijvoorbeeld meerdere "Read More"- of "Buy Now"-ankers). Controleer of deze links naar dezelfde bestemming verwijzen (acceptabel) of naar verschillende bestemmingen (een 2.4.9-fout, tenzij ze worden gedesambigueerd via aria-label of aria-labelledby).
\n
6. Test met spraakbesturing: Probeer met Dragon NaturallySpeaking of Windows Voice Access links te activeren door hun zichtbare label uit te spreken. Als het uitgesproken label dubbelzinnig is en er meerdere kandidaten verschijnen (bijvoorbeeld wanneer "Click Read More" meerdere links markeert), bevestigt dit een reële bruikbaarheidsfout in lijn met 2.4.9.
\n

\n\n

Hoe te Herstellen

\n

Generieke "Read More"-linktekst — Onjuist

\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

Generieke "Read More"-linktekst — Juist

\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

Alleen-afbeeldingslink met ontbrekende alt-tekst — Onjuist

\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

Alleen-afbeeldingslink met ontbrekende alt-tekst — Juist

\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

Meerdere identieke "Satın Al" (Buy Now)-links — Onjuist

\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

Meerdere identieke "Satın Al" (Buy Now)-links — Juist

\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>

(Content truncated due to token limit — please retry this article.)