Rolle Widget

`link`

Kennzeichnet ein Element als Hyperlink — ein Steuerelement, das beim Aktivieren zu einer neuen Ressource navigiert. Das native HTML-Element <a href> sollte die erste Wahl sein; role="link" auf einem <span> oder <div> kommt nur in Betracht, wenn das native Element nicht verwendbar ist.

Verwendung

Fast nie — es empfiehlt sich, <a href="..."> zu verwenden. Das native Anchor-Element liefert Fokus, Tastaturaktivierung per Enter, den Besuchsstatus, das Kontextmenü „In neuem Tab öffnen“, Drag-to-Bookmark und eine echte URL, die weitergegeben werden kann. role="link" auf einem <div> verzichtet auf all das.

Die einzigen legitimen Anwendungsfälle:

Ein Design-System eines Drittanbieters stellt eine Link-Komponente bereit, die kein echtes Anchor-Element ist und nicht ersetzt werden kann.
Ein unzugängliches <div onclick> wird überbrückt, während ein Refactoring noch aussteht.

Wird role="link" dennoch eingesetzt, sind folgende Maßnahmen erforderlich:

Das Element muss mit tabindex="0" fokussierbar gemacht werden.
keydown muss für Enter verdrahtet werden (Links aktivieren sich nicht per Leertaste — das ist ein Button-Verhalten).
Den Nutzenden muss es möglich sein, die Ziel-URL beim Hovern oder Fokussieren zu sehen, da kein href vorhanden ist.

Häufige Fehler

<a> ohne href. Ohne href befindet sich das Element nicht in der Tab-Reihenfolge, und Screenreader kündigen es nicht als Link an.
<a href="#" onclick="..."> als Button-Ersatz verwenden. Stattdessen sollte <button> genutzt werden — Links navigieren, Buttons lösen Aktionen aus.
role="link", das auf die Leertaste reagiert. Die Leertaste scrollt die Seite; Links aktivieren sich nur per Enter.
Linktext wie „hier klicken“ oder „mehr lesen“. Screenreader-Nutzende, die eine Linkliste aufrufen, sehen nur den Linktext — er muss aussagekräftig sein.
Fehlendes aria-current="page" am Link, der die aktuelle Seite in einer Navigation repräsentiert.

Beispiel

<!-- Bevorzugt -->
<a href="/toolkit/standards/wcag/">WCAG 2.2-Referenz</a>

<!-- Nur wenn <a href> nicht möglich ist -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>