Verständliche Linktexte: Links ohne erkennbaren Namen beheben
Links ohne aussagekräftigen Text verraten Screenreader-Nutzern nicht, wohin sie führen. So geben Sie jedem Link — auch Icon-only-Links — einen klaren Namen.
Inhaltsverzeichnis
Einige Links Ihrer Seite — häufig reine Symbol-Links — haben keinen für Vorlese-Software erkennbaren Namen. Blinde Besucher erfahren dann nicht, wohin sie führen. EverAudit prüft jeden Link automatisiert gegen WCAG 2.4.4 (Link Purpose) und meldet fehlende Namen als kritischen Befund.
Was ist das Problem?#
Ein Link braucht — genau wie ein Button — einen zugänglichen Namen, damit ein Screenreader ihn sinnvoll ankündigen kann. Dieser Name entsteht aus dem sichtbaren Linktext, einem aria-label, aria-labelledby oder einem beschrifteten Kind-Element (z. B. einem Bild mit gefülltem alt-Attribut). Fehlt all das — etwa bei einem reinen Icon-Link ohne begleitenden Text —, bleibt der Link für Vorlese-Software praktisch unsichtbar oder wird nur mit der rohen URL angesagt.
Typische Fundorte: Social-Media-Icons im Footer, ein Pfeil-Link „weiter" ohne Text, ein verlinktes Logo ohne Alt-Text auf dem umschließenden Bild.
Warum prüft EverAudit das?#
link-name wird als prio1-Befund geführt, weil ein unbenannter Link eine Navigationsmöglichkeit vollständig blockiert — Screenreader-Nutzer, die sich per Tab von Link zu Link bewegen oder sich eine Liste aller Links vorlesen lassen, können bei fehlendem Namen nicht entscheiden, ob sie dem Link folgen wollen. Da Icon-Links meist aus wiederverwendeten Header-, Footer- oder Card-Komponenten stammen, betrifft ein Fund häufig viele Seiten gleichzeitig.
Welche Auswirkung hat das?#
Betroffene Besucher können diesen Links nicht folgen und erreichen die dahinterliegenden Inhalte nicht — im Footer etwa Ihre Social-Media-Profile, in einer Produktliste die Detailseite hinter einem verlinkten Bild. Für Suchmaschinen ist ein unbenannter Link ebenfalls ein schwächeres Signal: Ohne aussagekräftigen Ankertext fehlt der Kontext, worum es auf der Zielseite geht.
Wie beheben Sie unbenannte Links?#
Geben Sie jedem <a>-Element einen zugänglichen Namen — bevorzugt sichtbaren Text, sonst aria-label:
<!-- Icon-only-Link ohne Namen -->
<a href="/warenkorb"><svg aria-hidden="true">…</svg></a>
<!-- korrigiert: aria-label -->
<a href="/warenkorb" aria-label="Warenkorb öffnen">
<svg aria-hidden="true">…</svg>
</a>Bei einem verlinkten Bild reicht ein aussagekräftiger alt-Text am Bild selbst:
<!-- Logo-Link ohne Namen -->
<a href="/"><img src="logo.svg" alt=""></a>
<!-- korrigiert -->
<a href="/"><img src="logo.svg" alt="Zur Startseite"></a>Konkretes Vorgehen:
- Icon- und Bild-Links identifizieren — EverAudit listet jeden Fund mit Selektor.
- Sichtbaren Text bevorzugen, wo möglich (auch visuell versteckt via
sr-only-Klasse). aria-labelfunktionsbeschreibend formulieren — „Warenkorb öffnen", nicht „Icon" oder „Link".- Bei verlinkten Bildern den
alt-Text des Bildes als Namen nutzen, statt ein zusätzlichesaria-labelam<a>zu duplizieren. - In der Komponente fixen, nicht an jeder einzelnen Fundstelle — Social-Icons und Card-Links kommen fast immer aus einer gemeinsamen Vorlage.
Fazit#
Ein Link ohne erkennbaren Namen ist eine Sackgasse für Screenreader-Nutzer und ein schwaches Signal für Suchmaschinen zugleich. Meist genügt ein präzises aria-label an der Icon- oder Logo-Komponente, um den Fehler dort zu beheben, wo er entsteht — im Design-System, nicht an jeder einzelnen Fundstelle.
Häufige Fragen
Was zählt als erkennbarer Name für einen Link?
Der zugängliche Name eines Links ergibt sich aus sichtbarem Linktext, einem aria-label, aria-labelledby oder einem beschrifteten Kind-Element wie einem Bild mit alt-Text. Ohne eines davon liest ein Screenreader den Link nicht aus oder gibt nur die Ziel-URL an.
Warum sind Icon-only-Links die häufigste Ursache?
Social-Media-Icons, Warenkorb-Symbole oder Pfeil-Links tragen visuell keine Textbeschriftung. Fehlt zusätzlich ein aria-label, bleibt der Link für Screenreader anonym — sichtbar ist das Symbol, technisch fehlt der Name.
Ist ein Linktext wie 'hier klicken' technisch ein Verstoß gegen link-name?
Nein, das ist ein eigenes Problem — link-name prüft, ob überhaupt ein Name vorhanden ist. Nichtssagende Linktexte wie 'hier' oder 'mehr' sind zwar formal benannt, aber inhaltlich schlecht — das behandelt die verwandte Regel link-text separat.
Hilft ein aussagekräftiger Linktext auch der SEO?
Ja. Suchmaschinen nutzen den Linktext als Signal dafür, worum es auf der Zielseite geht — ein präziser Ankertext stärkt damit sowohl Barrierefreiheit als auch interne Verlinkung.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.