Links

Wohin gelange ich oder was passiert beim Klick?

„Weitere Informationen finden Sie hier“: Sicher haben Sie diesen Satz mit einem verlinkten „hier“ schon einmal gelesen. Doch was erwartet Sie genau, wenn Sie auf „hier“ klicken? Öffnet sich eine neue Unterseite? Werden Sie auf eine völlig neue, externe Seite weitergeleitet oder öffnet sich vielleicht eine PDF-Datei? Oft kann diese Frage nur im Kontext mit dem umliegenden Text beantwortet werden. Wir zeigen Ihnen in diesem Artikel, was Sie bei „hier“-Links und auch anderen Links beachten müssen.

Links können auf einer Webseite auf verschiedene Weise eingesetzt werden. So können nicht nur Wörter oder Sätze, sondern auch Bilder und Grafiken verlinkt werden. Aber auch das Lupensymbol neben einer Suchleiste ist ein Link. Für Nutzende muss erkennbar sein, wohin Sie gelangen oder was passiert, wenn Sie einen Link anklicken.

Textlinks

Insbesondere Menschen mit einer Sehbehinderung lassen sich Links separat auflisten, um sich diese mit einem Screenreader vorlesen zu lassen. Hören sie dann nur eine Liste von Links mit dem Namen „hier“, können sie nicht nachvollziehen, wohin dieser Link genau führt. Sie sollten daher alle Links auf Ihrer Webseite eindeutig benennen. Dies gelingt im besten Fall bereits durch den Linknamen selbst.

Andernfalls ist die Anforderung an die Barrierefreiheit dennoch erfüllt, wenn im Kontext auf den Zweck des Links geschlossen werden kann. Gibt es also eine sinnvolle Überschrift oder wird im selben Absatz durch eine Textbeschreibung das Ziel des Links deutlich, so ist die Anforderung ebenfalls erfüllt.

Hinweis: Achten Sie zudem darauf, dass Links nicht ausschließlich über einen Farbunterschied zum Text erkennbar sind. Links können zum Beispiel über eine Unterstreichung oder ein zusätzliches Symbol erkennbar sein. Dies kann zum Beispiel ein Pfeil sein. Weitere Details dazu erhalten Sie in der Checkliste Farben.

Beispiele

Folgender Beispiele zeigen eine gute Umsetzung:

• Unter Kontakt finden Sie unsere Ansprechpartnerinnen und Ansprechpartner.
• Hier finden Sie unsere Vorlage zur Erstellung der Erklärung zur Barrierefreiheit (Dokument öffnet in neuem Fenster).

Verlinkte Bilder und Grafiken

Auch verlinkte Grafiken müssen bei der barrierefreien Umsetzung berücksichtigt werden. So müssen etwa Icons und Symbole ebenfalls beschrieben werden. Dies kann zum Beispiel ein Drucker- oder Lupensymbol sein. Hierbei handelt es sich um sogenannte Bedienelemente. Wichtig ist bei Icons und Symbolen, die als Bedienelement (Button) dienen, nur die Aktion zu beschreiben. Bei einem Lupensymbol neben einem Suchfeld kann diese zum Beispiel „Suche starten“ lauten. Eine Beschreibung der Lupe als Alternativtext ist hier nicht erforderlich. Bei verlinkten Grafiken und Bildern muss das Linkziel im Alternativtext erkennbar sein.

Beispiel

Wenn das Logo verlinkt ist, dann könnte der Alternativtext so lauten: „Wappen Land Sachsen-Anhalt – Zur Startseite“. Das Linkziel wird also am Ende ergänzt.

Weitere Informationen zu den Anforderungen an Barrierefreiheit

Die Checkliste auf dieser Seite soll Ihnen als erster Einstieg in das Thema dienen. Sie gewährleistet keinen Anspruch auf Vollständigkeit. Zentrale Regelwerke mit weiterführenden Informationen finden Sie:

• in der Europäischen Norm (EN) 301 549 (externes Dokument öffnet in englischer Sprache in neuem Fenster) und
• in der Richtlinie der Web Content Accessibility Guidelines (externer Link öffnet in englischer Sprache in neuem Fenster), kurz WCAG 2.1.

Weitere Informationen zur EN 301 549 und zum Aufbau der WCAG finden Sie auch in unseren Normen und Richtlinien zur Barrierefreiheit.

Erfolgskriterien der WCAG zum Thema Links

Die Anforderungen an die Barrierefreiheit sind in den WCAG als Erfolgskriterien festgeschrieben. Ein Thema kann dabei auch in mehrere Erfolgskriterien behandelt werden. Im Folgenden erhalten Sie eine Übersicht der erforderlichen WCAG-Kriterien zum Thema Links.

• WCAG Erfolgskriterium 2.4.4 „Linkzweck im Kontext“ (externer Link öffnet in englischer Sprache in neuem Fenster)
• WCAG Erfolgskriterium 1.4.1 „Ohne Farben nutzbar“ (externer Link öffnet in englischer Sprache neuem Fenster)