Link Barrierefreiheit

Was ist Barrierefreiheit von Links?

Die Barrierefreiheit von Links stellt sicher, dass Hyperlinks auf einer Website beschreibend und kontextbezogen sind und von Benutzern von Tastaturen und Bildschirmlesegeräten vollständig bedient werden können. Barrierefreie Links geben klar an, wohin der Link führt oder was er bewirkt, so dass jeder, auch Menschen mit visuellen, motorischen oder kognitiven Behinderungen, sicher durch digitale Inhalte navigieren können.

Beispiel (barrierefrei):

 

<a href="/Preise">Ansicht unserer Preispläne</a>

 

Beispiel (unzugänglich):

 

<a href="/Preise">Klicken Sie hier</a> 

 

Schlechte Praxis, kein Kontext.

Warum die Barrierefreiheit von Links wichtig ist

Für Benutzer, die auf Bildschirmlesegeräte angewiesen sind, werden Links oft aus dem Kontext gerissen. Tools wie JAWS oder NVDA bieten Optionen zur Auflistung aller Links auf einer Seite. Wenn auf allen Links "Hier klicken" oder "Mehr lesen" steht, ist es unmöglich, deren Zweck zu verstehen.

Richtige Barrierefreiheit von Links unterstützt:

  • WCAG-Konformität (Leitlinie 2.4.4 - Zweck von Links)
  • ADA (U.S.) undBFSG (Deutschland) gesetzliche Barrierefreiheit standards
  • Digitale Integration, Unterstützung von Nutzern mitSehbehinderungen,FarbenblindheitoderMobilitätsproblemen

Barrierefreie Links sind der Schlüssel zur Erfüllung Ihrer Ziele in Bezug auf Barrierefreiheit und zum Aufbau einer benutzerfreundlichen Website.

Bildschirmlesegeräte und Link-Navigation

Bildschirmlesegeräte ziehen Links oft in eine Liste und entfernen dabei den umgebenden Inhalt. Das bedeutet, dass Links für sich allein stehen müssen.

❌ "Klicken Sie hier" - lässt die Benutzer im Unklaren 
✅ "Laden Sie den Jahresbericht über Barrierefreiheit herunter" - beschreibt die Aktion und den Inhalt

Auch für Bildschirmleser:

  • Kennzeichnen Sie Links als solche ("Link: [Text]")
  • Ankündigung, wenn ein Link in einer neuen Registerkarte/einem neuen Fenster geöffnet wird (wenn richtig kodiert mit aria-label oder sichtbarem Text)

CMS Best Practices für die Barrierefreiheit von Links (TYPO3, WordPress)

TYPO3-Tipps:

  • Verwenden Sie den Rich Text Editor (RTE), um aussagekräftigen Linktext hinzuzufügen, und vermeiden Sie das Einfügen von URLs oder allgemeinen Phrasen.
  • Verwenden Sie title- oder aria-label-Attribute, wenn zusätzlicher Kontext benötigt wird, aber halten Sie sie kurz.

WordPress-Tipps:

  • Schreiben Sie in Gutenberg immerbeschreibenden Ankertext.
  • Vermeiden Sie es, Links so einzustellen, dass sie in neuen Tabs geöffnet werden, es sei denn, dies ist notwendig,warnen Sie den Nutzer mit sichtbarem Text oder Anweisungen nur für Bildschirmleser.

Universelle Strategien:

  • ✅ Platzieren Sie Links inlogischer Tab-Reihenfolge
  • ✅ Links in der Navigation und in den Seitenleisten klar gruppieren
  • ✅ Vermeiden Sie es, Links so subtil zu gestalten, dass sie nicht anklickbar erscheinen (z. B. keine Unterstreichung, gleiche Farbe wie der Text)

Häufige Fehler und wie man sie behebt

❌ "Hier klicken" oder "Mehr lesen" ohne Kontext 
✔️ Abhilfe: Detail hinzufügen - "Lesen Sie mehr über bewährte Praktiken zur Barrierefreiheit von Formularen"

Verwendung roher URLs 
✔️ Behebung: Lesbaren Ankertext verwenden - anstelle von example.com/form-guide, "Download the Form Guide PDF" verwenden

Ausblenden von Links mit schlechtem Kontrast oder reinen Hover-Styles 
✔️ Abhilfe: Verwenden Sie sichtbares Styling und stellen Sie sicher, dass der Farbkontrast den WCAG 2.1 AA Richtlinien entspricht.

Ähnliche Begriffe erforschen: Screen Reader, WCAG, Fokus indikator, Tastatur navigation, Web Barrierefreiheit.

Wichtigste Erkenntnis

Jeder Link sollte eine Geschichte erzählen, auch wenn er allein gelesen wird. Barrierefreie Links verbessern die Benutzerfreundlichkeit für alle und sind von grundlegender Bedeutung für Barrierefreiheit, SEO und Compliance. Wenn sich Ihre Links nicht von selbst erklären, ist es Zeit für eine Überarbeitung.

Möchten Sie die Barrierefreiheit von Links auf Ihrer Website überprüfen?

Führen Sie einen Link-Test mit dem T3AA Accessibility Analyzer durch oder laden Sie unsere Link Accessibility Checklist herunter, um loszulegen.