Components Hyperlinks Links

Status: Backlog
Design System Barrierefreiheit Fertigstellungsgrad
100% V25 100% 100%

Info:

Disabled Farbe wegen Barrierefreiheit(Kontrast) von #B3B3B3 zu #767676 geendert

Hyperlinks führen zu einer anderen Seite oder zu weiteren Informationen.

HYPERLINK TYPES

Standard

Link

Hover

Link
Hover-Farbe ist kein fester Wert, der wird um 10% heller dargestellt als die Link-Farbe und sommit automatisch berechnet.

Keyboard-Focus

Link
Link-Farbe wie bei Hover!

Disabled

Um einen Link zu deaktivieren, ist die Verwendung des deaktivierten Attributs nicht erlaubt. Es ist immer noch möglich, einen Link zu deaktivieren, indem Sie die folgenden 3 Schritte ausführen:

  • Entfernen Sie das href-Attribut, damit es den Fokus nicht mehr erhalten kann
  • fügen Sie ein role="link" hinzu, damit es von Screenreadern immer als Link betrachtet wird
  • fügen Sie ein Attribut aria-disabled="true" hinzu, damit es als deaktiviert angezeigt wird
Disabled Link

Es gibt keinen Visited Status. Alle Links werden ohne Berücksichtigung des Visited Status einheitlich nach den oben vorgestellten Regeln dargestellt.

OSI Hilfe Dialog