Roll Widget

`link`

Markerar ett element som en hyperlänk — en kontroll som navigerar till en ny resurs när den aktiveras. Använd det inbyggda HTML-elementet <a href> i första hand; välj role="link" på ett <span> eller <div> bara när det inbyggda elementet inte kan användas.

När ska det användas

Nästan aldrig — använd <a href="...">. Det inbyggda ankarelementet ger dig fokus, tangentbordsaktivering med Enter, besökt-tillståndet, högerklick för att öppna i ny flik, dra-till-bokmärke och en riktig URL som användaren kan dela. role="link" på en <div> kastar bort allt detta.

De enda legitima fallen:

Ett tredjepartsdesignsystem levererar en icke-ankar-”länk”-komponent som du inte kan ersätta.
Du lappar en otillgänglig <div onclick> medan en omfaktorisering pågår.

Om du ändå använder role="link" måste du också:

Göra elementet fokuserbart med tabindex="0".
Koppla keydown för Enter (länkar aktiveras INTE med Blanksteg — det är ett knappbeteende).
Tillhandahålla ett verkligt sätt för användaren att se mål-URL:en vid hover/fokus, eftersom det inte finns något href.

Vanliga fel

<a> utan href. Utan href finns elementet inte i tabb-ordningen och skärmläsare meddelar det inte som en länk.
<a href="#" onclick="..."> används som en knapp. Använd <button> i stället — länkar navigerar, knappar agerar.
role="link" som aktiveras med Blanksteg. Blanksteg scrollar sidan; länkar aktiveras enbart med Enter.
Länktext som är “klicka här” eller “läs mer”. Skärmläsaranvändare som tar fram en länklista ser bara länktexten — gör den beskrivande.
Saknat aria-current="page" på länken som representerar den aktuella sidan i en navigering.

Exempel

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

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