4️⃣ 2.4.9 - Linkzweck (nur Link)
AAA 2.1
Umsetzung, Design
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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „Code-Beispiele“Verwendung von aria-label:
Abschnitt betitelt „Verwendung von aria-label:“<a href="/downloads/leitfaden.pdf" aria-label="Leitfaden für barrierefreies Webdesign als PDF herunterladen">PDF herunterladen</a>