Rolle Widget

`link`

Markerer et element som et hyperlink — en kontrol, der navigerer til en ny ressource ved aktivering. Brug det native HTML-element <a href> først; brug kun role="link" på en <span> eller <div>, når det ikke er muligt at bruge det native element.

Hvornår bruges det

Næsten aldrig — brug <a href="...">. Det native ankerelement giver dig fokus, tastaturaktivering med Enter, besøgt-tilstanden, højreklik for at åbne i ny fane, træk-til-bogmærke og en rigtig URL, brugeren kan dele. role="link" på en <div> smider alt det ud.

De eneste legitime tilfælde:

Et tredjeparts designsystem leverer en ikke-anker-”link”-komponent, du ikke kan erstatte.
Du lapper en utilgængelig <div onclick>, mens en refaktorering er undervejs.

Bruger du role="link", skal du også:

Gøre elementet fokuserbart med tabindex="0".
Håndtere keydown for Enter (links aktiveres IKKE med Space — det er knappeadfærd).
Give brugeren en reel mulighed for at se destinations-URL’en ved hover/fokus, da der ikke er noget href.

Hyppige fejl

<a> uden href. Uden href er elementet ikke i tabrækkefølgen, og skærmlæsere annoncerer det ikke som et link.
<a href="#" onclick="..."> brugt som en knap. Brug <button> i stedet — links navigerer, knapper handler.
role="link" der aktiveres med Space. Space scroller siden; links aktiveres kun med Enter.
Linktekst som “klik her” eller “læs mere”. Skærmlæserbrugere, der trækker en linkliste frem, ser kun linkteksten — gør den beskrivende.
Manglende aria-current="page" på linket, der repræsenterer den aktuelle side i en navigation.

Eksempel

<!-- Foretrukket -->
<a href="/toolkit/standards/wcag/">WCAG 2.2-reference</a>

<!-- Kun når <a href> er umulig -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>