Barrierefreie Assets erstellen: Links

Barrierefreie Links helfen allen Nutzerinnen und Nutzern (insbesondere denen, die Bildschirmlesegeräte oder die Tastaturnavigation verwenden) zu verstehen, wohin ein Link führt und wie sie mit ihm interagieren können. In diesem Artikel geht es um Best Practices für das Schreiben klarer Linktexte, die Verwendung von aussagekräftigem Kontext und die Vermeidung von vagen Formulierungen wie “hier klicken” Erfahre, wie du deine Links benutzerfreundlicher und informativer gestaltest und wie du die Standards für Barrierefreiheit einhältst.

Anforderungen

• Links müssen semantisch als solche gekennzeichnet sein.
• Im Idealfall bedeutet das die Verwendung eines <a>-Elements mit einem gültigen href-Wert. Das Setzen von role="link" (und das Hinzufügen aller anderen Aspekte der Link-Funktionalität) kann in seltenen problematischen Fällen akzeptabel sein.
• Ein Link muss einen Text enthalten, den ein Programm nach dem Algorithmus zur Berechnung des zugänglichen Namens erkennen kann.
• Die Einzelheiten zu diesen Informationen werden in anderen Spezifikationen wie WAI-ARIA oder in den jeweiligen Plattformstandards festgelegt.
• Der Zweck eines Links sollte klar sein und sich von anderen Links auf derselben Seite unterscheiden lassen, entweder aus dem Linktext selbst (vorzugsweise) oder aus dem Kontext, in dem der Link steht.
• Es wird empfohlen, Linknamen zu vermeiden wie:
  • Mehr erfahren,
  • Finde mehr heraus,
  • Klicke hier für Details.
• Links, die zu denselben Zielen führen, müssen auf allen Seiten der Website denselben (oder einen sehr ähnlichen) Linktext verwenden
• Links müssen mit der Tastatur fokussiert werden können, ohne dass ein genaues Timing für jeden Tastendruck erforderlich ist.
• Außerdem müssen Links mit der Enter/Return-Taste aktiviert werden können.
• Die Navigationsreihenfolge der fokussierbaren Elemente (Links, Formularelemente usw.) muss logisch und intuitiv sein.
• Die Reihenfolge der Elemente muss eine logische Abfolge haben.
• Links müssen sich visuell vom umgebenden Text unterscheiden.
• Links sollten sich nicht nur durch die Farbe vom umgebenden Text abheben, es sei denn, der Kontrast zwischen ihnen und dem Text ist ausreichend.
• Wenn der Mauszeiger über den Link bewegt wird oder er den Fokus erhält, sollte ein zusätzlicher visueller Hinweis (wie eine Unterstreichung oder ein Umriss) erscheinen.
• Links müssen ein Kontrastverhältnis von 4,5 zu 1 (bei kleinem Text) oder 3 zu 1 (bei großem Text) zu ihrem Hintergrund haben.
• Alle Links müssen einen visuellen Fokusindikator aufweisen, wenn sie scharf gestellt sind.
• Der Kontrast aller visuellen Fokusindikatoren vor dem Hintergrund muss mindestens 3 zu 1 betragen.
• Die Nutzer sollten die Möglichkeit haben, wiederholte Inhaltsblöcke auf mehreren Webseiten zu überspringen (z. B. eine lange Liste von Ablagefächern auf einer E-Commerce-Website, die ein Standardelement auf vielen Seiten ist).
  • Der “Überspringen”-Link sollte das erste fokussierbare Element auf der Seite sein.
  • Der “Skip”-Link muss immer sichtbar sein oder den Fokus der Tastatur haben.
  • “Skip”-Links, Orientierungspunkte (z. B. <nav>, <main> usw.) und Inhaltsverzeichnisse sind allesamt akzeptable Methoden, um die Anforderung der WCAG 2.4.1 zu erfüllen, die es Nutzern ermöglicht, Inhaltsblöcke zu umgehen. Es ist ideal, alle diese Techniken in das Design einzubauen, wenn sie geeignet sind.
• Ein Inhaltsverzeichnis für die Seite kann am Anfang des Inhalts oder in der Kopfzeile platziert werden.
• Idealerweise sollten die Links im Inhaltsverzeichnis mit der Überschriftenstruktur des Seiteninhalts übereinstimmen.

Beispiele

	Auf Wunsch des Nutzers öffnet sich ein Filterfeld, das es ermöglicht, den Inhalt dieser überflüssigen Spalte mit einem Screenreader zu überlesen.
	DON’T: Das folgende Beispiel verwendet fälschlicherweise tabindex, um eine alternative Tab-Reihenfolge festzulegen. Wenn diese Liste mit der Tabulatortaste navigiert wird, wird die Liste in der Reihenfolge Homepage, Kapitel 3, Kapitel 2, Kapitel 1 navigiert, was nicht der Reihenfolge im Inhalt entspricht.
	Wenn Textfelder den Fokus erhalten, wird ein vertikaler Balken im Feld angezeigt, der anzeigt, dass der Benutzer Text einfügen kann, oder der gesamte Text wird hervorgehoben, was anzeigt, dass der Benutzer über den Text tippen kann.
	DON’T: In diesem Beispiel wird bei der Verwendung einer Tastatur die Schaltfläche für die Handlungsaufforderung übersprungen (oder sogar das ganze Element, das dem Nutzer wichtige Informationen gibt).
	NICHT: Alle rot markierten Elemente sehen gleich aus, aber die Preisanzeige ist ein Link. Der Rest des blauen Textes ist nur hervorgehoben. Das bedeutet, dass die Links optisch nicht von dem umgebenden Text, der nicht verlinkt ist, zu unterscheiden sind. DON’T: Gleichzeitig lösen grün markierte Elemente eine Aktion aus, aber sie sehen aus wie normaler Text. Das bedeutet, dass sich die Links optisch nicht von dem sie umgebenden Nicht-Link-Text unterscheiden lassen.