Barrierefreiheit ist kein Nice-to-have – sie ist seit Juni 2025 für viele Websites in der EU gesetzlich vorgeschrieben. Einer der häufigsten Stolpersteine in der Praxis: Links, die für Screenreader schlicht unverständlich sind. Ich zeige dir, wie du ARIA richtig einsetzt, um Links zugänglich zu machen – und wann du ARIA besser weglässt.
Warum Links oft ein Barrierefreiheitsproblem sind
Screenreader lesen den sichtbaren Linktext vor. Klingt simpel – wird aber zum Problem, wenn der Linktext „hier klicken“, „mehr erfahren“ oder ein nacktes Icon ohne Text ist. Ein Nutzer, der sich per Tab durch die Seite bewegt, hört dann eine Liste von „mehr erfahren, mehr erfahren, mehr erfahren“ – ohne Kontext, wohin der Link führt.
ARIA – Accessible Rich Internet Applications – bietet hier gezielte Werkzeuge. Aber: ARIA sollte immer die letzte Option sein. Zuerst kommt semantisch sauberes HTML.
Die Grundregel: erst HTML, dann ARIA
Bevor ich ARIA einsetze, prüfe ich immer: Lässt sich das Problem mit sauberem HTML lösen? Ein beschreibender Linktext ist immer besser als ein generischer Text mit ARIA-Ergänzung.
<!-- Schlecht -->
<a href="/kontakt">hier klicken</a>
<!-- Gut -->
<a href="/kontakt">Kontaktformular öffnen</a>Ist der Linktext aus gestalterischen Gründen nicht änderbar, kommt ARIA ins Spiel.
aria-label: einen eigenen Namen vergeben
aria-label überschreibt den sichtbaren Linktext für Screenreader komplett. Nützlich bei Icon-Links oder wenn der sichtbare Text zu kurz ist.
<a href="/kontakt" aria-label="Kontaktformular öffnen">
<svg aria-hidden="true" focusable="false">...</svg>
</a>Wichtig: aria-hidden="true" auf dem SVG verhindert, dass der Screenreader das Icon zusätzlich vorliest. focusable="false" ist für ältere IE-Versionen nötig, schadet aber nie.
aria-labelledby: auf vorhandenen Text verweisen
Statt einen neuen Label-Text zu schreiben, kann ich auf ein bestehendes Element verweisen. Das ist besonders praktisch bei Karten-Layouts, wo ein Bild-Link und ein Text-Link zum selben Ziel führen.
<article>
<h2 id="projekt-titel">ROFRA Glasmanufaktur – Website Redesign</h2>
<p>Komplette Neugestaltung der Website mit modernem Layout.</p>
<a href="/projekte/rofra" aria-labelledby="projekt-titel">
Projekt ansehen
</a>
</article>Der Screenreader liest jetzt „ROFRA Glasmanufaktur – Website Redesign“ als Linkname vor – obwohl der sichtbare Text „Projekt ansehen“ lautet.
aria-describedby: zusätzlichen Kontext liefern
Während aria-labelledby den Namen des Links ersetzt, ergänzt aria-describedby eine zusätzliche Beschreibung. Gut geeignet für Links mit Warnhinweisen oder externen Zielen.
<a href="https://woocommerce.com/document/hooks/"
target="_blank"
aria-describedby="extern-hinweis">
WooCommerce Hook-Referenz
</a>
<span id="extern-hinweis" class="visually-hidden">
Öffnet in einem neuen Tab
</span>Der Linkname bleibt „WooCommerce Hook-Referenz“ – der Screenreader liest aber zusätzlich „Öffnet in einem neuen Tab“ vor.
Visuell verstecken ohne aria-hidden
Hilfstexte für Screenreader sollen sichtbar versteckt, aber für Screenreader zugänglich sein. Die .visually-hidden-Klasse ist dafür der Standard – kein display: none und kein visibility: hidden, denn beide verstecken das Element auch vor Screenreadern.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Häufige Fehler im Überblick
aria-label auf Links mit bereits beschreibendem Text – unnötig und verwirrend. Wenn der Linktext bereits klar ist, kein ARIA drauf.
aria-hidden auf dem Link selbst – macht den Link für Screenreader unsichtbar und damit nicht bedienbar. aria-hidden gehört auf dekorative Elemente innerhalb des Links, nicht auf den Link selbst.
role=“link“ auf einem <a>-Element – ein <a href> ist bereits ein Link. Die Rolle nochmal zu setzen ist redundant.
Leere Links ohne Label – ein <a href> ohne Text, ohne aria-label und ohne aria-labelledby ist für Screenreader komplett stumm.
<!-- Schlecht: leerer Link -->
<a href="/home">
<img src="logo.png">
</a>
<!-- Gut: Alt-Text am Bild oder aria-label am Link -->
<a href="/home">
<img src="logo.png" alt="Zur Startseite">
</a>Fazit
ARIA ist kein Allheilmittel – es ist ein Ergänzungswerkzeug für Fälle, in denen semantisches HTML allein nicht ausreicht. Für Links gilt: zuerst einen beschreibenden Linktext schreiben, dann aria-label oder aria-labelledby als Fallback. Dekorative Elemente innerhalb des Links mit aria-hidden="true" verstecken, Hilfstexte mit .visually-hidden zugänglich machen. So sind Links für alle Nutzer verständlich – ob mit Maus, Tastatur oder Screenreader.
