Springe zur Hauptnavigation

Barrierefreie Links: Worauf man in Webauftritten achten sollte

| |   Digitale Medien | TYPO3 WordPress Webseite Digitale Barrierefreiheit Barrierefreiheit

Links gehören zu den zentralen Navigationselementen im Web – und sie spielen eine entscheidende Rolle für die Barrierefreiheit von Webseiten. Denn nur wenn Links klar, verständlich und technisch sauber umgesetzt sind, können sie von allen Nutzer:innen – auch mit Screenreadern oder eingeschränkter Motorik – problemlos genutzt werden. In diesem Artikel erklären wir, was bei barrierefreien Links zu beachten ist.

1. Warum barrierefreie Links wichtig sind

Für viele Nutzer:innen mit Einschränkungen sind Links das zentrale Mittel zur Navigation:

  • Screenreader-Nutzer:innen lassen sich oft nur die Links einer Seite vorlesen
  • Menschen mit motorischen Einschränkungen verwenden Tastatur oder Assistenzgeräte zur Navigation
  • Kognitive Einschränkungen erfordern klare und verständliche Formulierungen

➡️ Schlechte Linkgestaltung führt zu Orientierungslosigkeit, Frustration und Barrieren im Nutzungserlebnis.

 

 

2. Anforderungen an barrierefreie Links

Aussagekräftiger Linktext

  • Vermeiden Sie generische Texte wie „Hier klicken“ oder „Mehr“
  • Der Linktext muss auch ohne Kontext verständlich sein (z. B. „PDF zum Download: Teilnahmebedingungen“ statt „Download“)
  • Screenreader-Nutzer:innen sollten sofort verstehen, wohin der Link führt

Sichtbarkeit und Unterscheidbarkeit

  • Links sollten klar als solche erkennbar sein (z. B. durch Farbe und/oder Unterstreichung)
  • Auch bei Farbschwäche oder -blindheit muss der Link sich ausreichend abheben – hoher Kontrast ist Pflicht
  • Links sollten sich auch im Fokuszustand (z. B. mit der Tab-Taste) gut sichtbar verändern

Technische Umsetzung

  • Kein Einsatz von JavaScript-only-Links (z. B. onclick ohne href)
  • Verwenden Sie semantisch korrekte <a>-Tags
  • Öffnet ein Link ein neues Fenster, sollte dies angekündigt werden (z. B. „(öffnet in neuem Fenster)“)

Tastaturbedienbarkeit

  • Links müssen über die Tabulator-Taste erreichbar sein
  • Fokus-Elemente sollten visuell hervorgehoben werden (z. B. mit einer Outline)

Einheitliche Gestaltung und Positionierung

  • Konsistente Linkgestaltung innerhalb der Website
  • Vermeidung von Redundanzen („Mehr erfahren“, „Mehr“, „Weitere Infos“ – aber ohne Zusatzinformation)

 

 

3. Barrierefreiheit nach WCAG und BITV

Die Web Content Accessibility Guidelines (WCAG) sowie die BITV 2.0 definieren klare Anforderungen an Links:

  • Erfolgskriterium 2.4.4: Der Zweck eines Links kann aus dem Linktext allein oder aus dem Kontext erschlossen werden
  • Erfolgskriterium 1.4.1: Farbe darf nicht das einzige Mittel sein, um Informationen zu vermitteln
  • Erfolgskriterium 2.1.1: Alle Funktionalitäten müssen mit der Tastatur erreichbar sein

➡️ Diese Vorgaben sind nicht nur „nice to have“, sondern gesetzlich verpflichtend für öffentliche Stellen und ab 2025 auch für viele private Anbieter nach dem Barrierefreiheitsstärkungsgesetz (BFSG).

 

 

4. Best Practices für barrierefreie Links

  • Linktext: „Jetzt Bewerbung als Pflegekraft starten“ statt „Bewerben“
  • Externe Links kenntlich machen: durch Icon oder Zusatztext (z. B. „externer Link“)
  • Vermeidung von zu vielen Links hintereinander ohne Zusammenhang
  • Nutzen von Skip-Links für Screenreader („Zum Hauptinhalt springen“)

 

Fazit: Barrierefreie Links sind ein kleiner Aufwand mit großer Wirkung

Die konsequente Umsetzung barrierefreier Links verbessert nicht nur die Nutzbarkeit für Menschen mit Einschränkungen, sondern erhöht auch die allgemeine Benutzerfreundlichkeit und SEO-Wirkung Ihrer Website. creationell hilft Ihnen dabei, Ihre Webauftritte WCAG- und BITV-konform zu gestalten – durch technische Umsetzung, redaktionelle Beratung und Designlösungen.

FAQ zu barrierefreien Links

Barrierefreie Links ermöglichen Menschen mit visuellen, motorischen oder kognitiven Einschränkungen eine klare und sichere Navigation. Besonders Screenreader-Nutzer:innen und Personen, die mit Tastatur oder Assistenzgeräten navigieren, sind auf verständliche und gut erkennbare Links angewiesen. 

Ein Linktext muss auch ohne Kontext verständlich sein. Generische Formulierungen wie „Hier klicken“ oder „Mehr“ sind ungeeignet. Stattdessen sollten präzise Beschreibungen verwendet werden, z. B. „PDF zum Download: Teilnahmebedingungen“. 

Links sollten sich klar vom restlichen Text unterscheiden – etwa durch Farbe oder Unterstreichung. Ein hoher Farbkontrast ist essenziell, damit auch Personen mit Farbschwächen die Links erkennen. Zusätzlich muss ein Link im Fokuszustand gut sichtbar hervorgehoben werden. 

Barrierefreie Links benötigen semantisch korrekte <a>-Tags und müssen stets über die Tastatur erreichbar sein. JavaScript-only-Links ohne href sollten vermieden werden. Wenn ein Link ein neues Fenster öffnet, muss dies angekündigt werden. 

Relevante Kriterien sind unter anderem WCAG 2.4.4 (Linkzweck erkennbar), 1.4.1 (Farbe nicht als einziges Unterscheidungsmerkmal) und 2.1.1 (Tastaturbedienbarkeit). Diese Vorgaben sind verpflichtend – für öffentliche Stellen und ab 2025 auch für viele private Anbieter nach BFSG. 

Empfehlungen sind u. a.: präzise Linktexte, Kennzeichnung externer Links, Vermeidung von Linklisten ohne Zusammenhang, sowie die Nutzung von Skip-Links wie „Zum Hauptinhalt springen“. Dadurch steigt sowohl die Barrierefreiheit als auch die allgemeine Nutzerfreundlichkeit. 

 

Zurück