link

Wanneer te gebruiken

Vrijwel nooit — gebruik <a href="...">. Het native ankerelement geeft focus, toetsenbordactivering via Enter, de bezochte toestand, rechtsklikken voor openen in nieuw tabblad, slepen naar bladwijzer en een echte URL die de gebruiker kan delen. role="link" op een <div> gooit dit allemaal weg.

De enige legitieme gevallen:

• Een ontwerpsysteem van derden levert een niet-anker-”koppeling”-component die niet kan worden vervangen.
• Een ontoegankelijke <div onclick> wordt tijdelijk gepatcht terwijl een refactoring wordt uitgevoerd.

Bij gebruik van role="link" moet ook:

• Het element focusbaar worden gemaakt met tabindex="0".
• keydown voor Enter worden gekoppeld (koppelingen activeren NIET op Spatiebalk — dat is het gedrag van een knop).
• Een echte manier worden geboden voor de gebruiker om de doel-URL bij hoveren/focussen te zien, omdat er geen href is.

Veelvoorkomende fouten

• <a> zonder href. Zonder href staat het element niet in de tabvolgorde en kondigen schermlezers het niet aan als koppeling.
• <a href="#" onclick="..."> gebruikt als knop. Gebruik in plaats daarvan <button> — koppelingen navigeren, knoppen handelen.
• role="link" dat activeert op Spatiebalk. Spatiebalk scrollt de pagina; koppelingen activeren alleen op Enter.
• Koppelingstekst die “klik hier” of “lees meer” zegt. Schermlezers die een koppelingslijst openen, zien alleen de koppelingstekst — maak deze beschrijvend.
• Ontbrekend aria-current="page" op de koppeling die de huidige pagina vertegenwoordigt in een navigatie.

Voorbeeld

<!-- Voorkeur -->
<a href="/toolkit/standards/wcag/">WCAG 2.2-naslag</a>

<!-- Alleen wanneer <a href> niet mogelijk is -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>