Der <a>Tag und Barrierefreiheit: Worauf man achten sollte
Der <a>-Tag ist eines der wichtigsten HTML-Elemente im Web. Er dient dazu, Verlinkungen zwischen Seiten, Dokumenten oder externen Inhalten herzustellen. Damit Websites barrierefrei im Sinne des Barrierefreiheitsstärkungsgesetzes (BFSG) und der EU-Richtlinie EN 301 549 gestaltet sind, muss auch der Einsatz von Links bestimmte Anforderungen erfüllen.
In diesem Artikel zeigen wir, wie man <a>-Elemente zugänglich gestaltet – für Menschen mit und ohne Einschränkungen.
1. Aussagekräftiger Linktext
Der Text innerhalb des <a>-Tags sollte klar und selbsterklärend sein – auch außerhalb des Kontexts.
❌ Schlecht:
<a href="/infos">Mehr</a>
✅ Besser:
<a href="/infos">Mehr Informationen über unser Unternehmen</a>
Screenreader-Nutzer:innen können sich alle Links auf einer Seite vorlesen lassen. „Mehr“ oder „Hier klicken“ sagt dann nichts über den Zielinhalt aus.
2. Verwendung des title-Attributs
Das Attribut title kann hilfreiche Zusatzinfos geben – aber nicht als alleinige Beschreibung!
<a href="/downloads/agb.pdf" title="AGB als PDF-Datei (öffnet in neuem Fenster)" target="_blank" rel="noopener"> Allgemeine Geschäftsbedingungen </a>
Hinweis: Das title-Attribut sollte nicht die einzige Informationsquelle sein, da es
- nicht zuverlässig von Screenreadern vorgelesen wird
- auf Touch-Geräten schwer zugänglich ist
3. Visuell versteckter, aber lesbarer Text (.sr-only)
Wenn du z. B. nur ein Icon als Link verwendest, kannst du einen für Screenreader sichtbaren, aber für Sehende unsichtbaren Text ergänzen:
<a href="/login"> 🔐 <span class="sr-only">Login für Franchisepartner</span> </a>
Beispiel-Stil für .sr-only:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
Damit bleibt der Text für Screenreader zugänglich, ohne das Layout zu beeinflussen.
4. Nutzung von aria-label oder aria-describedby
Was ist aria-label?
aria-label wird verwendet, um einem Element – z. B. einem Link oder Button – eine alternative, beschreibende Bezeichnung zu geben, die von Screenreadern vorgelesen wird, aber nicht sichtbar ist.
Wann verwenden?
- Wenn der sichtbare Inhalt nicht aussagekräftig genug ist (z. B. nur ein Icon).
- Wenn man einen alternativen Text für Screenreader angeben möchte.
Beispiel:
<a href="/profil" aria-label="Benutzerprofil aufrufen"> <img src="profil-icon.svg" alt=""> </a>
Hinweis: Verwende aria-label nicht gleichzeitig mit sichtbarem Text, denn Screenreader nutzen dann nur das Label und ignorieren den sichtbaren Linktext.
Was ist aria-describedby?
aria-describedby verknüpft ein Element mit einem anderen Element, das zusätzliche erklärende Informationen enthält. Diese Infos werden zusätzlich zum eigentlichen Text vorgelesen, wenn das Element fokussiert wird.
Wann verwenden?
- Wenn du ergänzende Beschreibungen hast, z. B. zu einem Link, Button oder Formularfeld.
- Wenn du Tooltips oder versteckte Beschreibungen zugänglich machen möchtest.
Beispiel:
<a href="/kontakt" aria-describedby="kontaktinfo">Kontakt</a> <p id="kontaktinfo" hidden> Unsere Kontaktseite enthält E-Mail-Adressen, Telefonnummern und Öffnungszeiten. </p>
So funktioniert das: Screenreader lesen zuerst „Kontakt“, danach auch den versteckten Text im Element mit der ID kontaktinfo.
5. Zielverhalten klar machen:
Wenn ein Link ein neues Fenster oder einen externen Inhalt öffnet, sollte das für Nutzer:innen klar erkennbar sein – idealerweise visuell und programmatisch:
<a href="https://externe-seite.de" target="_blank" rel="noopener" title="Externe Seite – öffnet in neuem Fenster"> Externe Seite <span aria-hidden="true">🔗</span> <span class="sr-only">(öffnet in neuem Fenster)</span> </a>
Fazit
Barrierefreie Links verbessern nicht nur die Zugänglichkeit für Menschen mit Einschränkungen – sie machen jede Website verständlicher, klarer und benutzerfreundlicher. Ein sauber gestalteter <a>-Tag ist ein kleiner, aber entscheidender Baustein für inklusive Webentwicklung.