4️⃣ 2.4.9 - Linkzweck (nur Link)
AAA 2.1
Umsetzung, Design
Ziel
Sicherstellen, dass der Zweck jedes Links allein anhand des Linktexts erkannt werden kann, um die Verständlichkeit und Barrierefreiheit der Navigation zu erhöhen.
Beschreibung
- Bereitstellung aussagekräftiger Linktexte, die den Linkzweck ohne Kontext erklären.
- Einheitliche Benennung für Links mit gleichem Ziel und differenzierte Benennung für unterschiedliche Ziele.
- Integration von Mechanismen, die es ermöglichen, zwischen kurzen und langen Linktexten zu wählen.
- Unterstützung von unterstützenden Technologien wie Screenreadern durch klare und präzise Linktexte.
Anforderungen
- Verwendung gut sichtbarer und kontrastreicher Links.
- Vermeidung allgemeiner Linktexte wie „hier klicken“ oder „mehr“.
- Einheitliche Gestaltung und Benennung von Links mit identischem Zweck.
- Einsatz semantisch korrekter
<a>-Elemente mit präzisenhref-Attributen. - Nutzung von
aria-label, um zusätzliche Kontextinformationen für unterstützende Technologien bereitzustellen. - Dynamische Anpassung der Linktexte per Skript, falls erforderlich.
- Prägnante und beschreibende Linktexte verfassen, die den Inhalt der Zielseite widerspiegeln.
- Vermeidung von Abkürzungen, sofern sie nicht allgemein bekannt sind.
- Konsistenz in der Verwendung von Begriffen bei internen und externen Verlinkungen.
- Überprüfung der Linktexte auf Verständlichkeit ohne zusätzlichen Kontext.
- Einsatz von Accessibility-Tests zur Sicherstellung der Screenreader-Kompatibilität.
- Validierung der Linkkonsistenz durch manuelle Tests und automatisierte Prüfwerkzeuge.
Code-Beispiele
Verwendung von aria-label:
<a href="/downloads/leitfaden.pdf" aria-label="Leitfaden für barrierefreies Webdesign als PDF herunterladen">PDF herunterladen</a>