Linklisten dienen der gruppierten Darstellung von Hyperlinks zu verschiedenen Bereichen oder Funktionen einer Anwendung. Sie gehen damit über die einfache Auszeichnung als Liste hinaus und stellen ein eigenständiges Gestaltungsmuster mit dem Charakter einer strukturierten Navigation dar.
Sie können optional mit sinnbildenden Icons versehen werden, um die Erfassbarkeit zu unterstützen und den Zweck des Linkziels zu kommunizieren. Die Zustände von Hyperlinks in Linklisten weichen von herkömmlichen Links in Fließtexten ab, da sie als eigenständiges Navigationselement erkennbar sein sollen.
Innerhalb einer Linkliste müssen immer alle Links mit einem Icon, oder alle Links ohne ein Icon stehen, Mischformen sind nicht zulässig.
Design
Typografie
Typografische Elemente der Linkliste
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Eingebettete Komponente: Link (Standard). Diese Komponente kann mit und ohne Icon (links) verwendet werden. Icon (rechts) darf nicht verwendet werden. Besonderheit: Nicht nur der eingebettete Link ist klickbar, sondern das gesamte Listenelement löst Hover- und Focus-Zustände aus.
Eingebettete Komponente: Link (Standard). Diese Komponente kann mit und ohne Icon (links) verwendet werden. Icon (rechts) darf nicht verwendet werden. Besonderheit: Nicht nur der eingebettete Link ist klickbar, sondern das gesamte Listenelement löst Hover- und Focus-Zustände aus.
Zustände
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Bei allen interaktiven Elementen muss vor dem Hintergrund von Touch-UI-basierten Geräten darauf geachtet werden, dass ausreichend große klickbare Flächen mit genügend großen, nicht-interaktiven Zwischenräumen bereit gestellt werden.
Bei gestalteten interaktiven Elementen wie den Links einer Linkliste muss darauf geachtet werden, dass die klickbare Fläche mindestens 24×24px beträgt. Darüber hinaus müssen Abfolgen von interaktiven Elementen einen Zwischenabstand von mindestens 24px zueinander haben, wenn die Elemente selbst kleiner als 24×24px sind.
Wenn Elemente über :hover-Effekte verfügen, dann muss die gesamte hervorgehobene Fläche klickbar sein. Inaktive Flächen dürfen keinen :hover-Effekt haben.
2.5.8 Target Size (neu in WCAG 2.2, Link führt zur englischen Fassung)
Testhinweise & Akzeptanzkriterien
Name:
Linktexte müssen das Linkziel beschreiben. Ausnahmen sind zulässig, wenn sich das Linkziel aus dem umgebenden Kontext des Links erschließen lässt.
Rolle:
Identifiziert sich selbst als (Hyper)link.
Wert:
Das href-Atrribut zeigt auf einen gültigen URL.
Zustände:
default, hover, focus, active (optional); nicht visited
Fokus:
Erhält bei Tastaturfokus zusätzlich zum Farbwechsel eine 2px breite abgesetzte Outline bzw. einen deutlichen visuellen Fokus-Indikator bei Swipe auf Touch-UIs.
Aktion:
Erreichbar per Tab-Taste bzw. Swipe auf Touch-UIs, Auslösen des Links per Enter-Taste (wenn fokussiert), Klick oder Tap (bzw. Doppel-Tap bei Touch-UIs mit aktiviertem Screenreader).
Name:
Der Linktext korrespondiert mit dem Titel der Zielseite.
Darstellung:
Die Textgröße kann system- oder browserseitig um bis zu 200 % geändert werden, ohne dass Informationen verloren gehen. Auch im Kontrastmodus oder Dark Mode werden Icons im benutzerdefinierten Farbschema wahrnehmbar und ausreichend kontrastierend dargestellt.
