Link ohne erkennbaren Text (link-name)

Die Regel link-name meldet Links ohne zugänglichen Namen. Ein Screenreader sagt dann „Link“ – oder liest die Webadresse vor –, und niemand weiß, wohin er führt. Meist sind es Icon-Links und Bildlinks, deren Bild kein alt hat. Die Lösung ist Text im Link, ein alt am Bild oder ein aria-label, das sagt, wohin der Link führt.

Was die Regel bedeutet

Jeder Link braucht einen Namen, der sagt, wohin er führt. Bei einem <a href> kommt der Name aus dem Text darin, einschließlich des alt eines Bildes im Link. Die Regel lässt einen Link bestehen, der seinen Namen bekommt über:

• Textinhalt, einschließlich des alt-Texts von Bildern im Link,
• aria-label oder aria-labelledby,
• oder ein title-Attribut.

Gemeldet wird ein Link, bei dem all das leer ist – ein Link um ein SVG mit aria-hidden="true", um ein Bild ohne alt oder mit alt="" oder um gar nichts. Inhalte, die per CSS gezeichnet werden, etwa eine Icon-Schrift oder ein Hintergrundbild, zählen nicht. Ein Link, der sowohl aus der Tab-Reihenfolge als auch aus dem Barrierefreiheitsbaum entfernt ist, wird nicht geprüft; ein <a> ohne href ebenfalls nicht, denn das ist kein Link.

Die Regel prüft nur, dass es einen Namen gibt. „Hier klicken“, „Mehr“ und „Weiterlesen“ bestehen – ob der Text sagt, wohin der Link führt, beurteilt ein Mensch. Deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader, die sich oft über eine Liste aller Links einer Seite bewegen: Ein Link ohne Namen erscheint dort als „Link“ oder als lange Adresse. Wer per Sprache steuert, kann nicht „Klick auf Instagram“ sagen, wenn der Link keinen Namen hat. Auf einer Braillezeile erscheint nur die Rolle. Leere Links gehören zu den häufigsten Fehlern im Web: Die WebAIM Million 2026 fand sie auf 46,3 % der eine Million meistbesuchten Startseiten ^[5].

Warum die Prüfung anschlägt

• Social-Media-Icons im Footer – ein SVG oder eine Icon-Schrift und sonst nichts.
• Logo-Links im Header mit einem Bild ohne alt oder mit alt="".
• Produkt- und Teaser-Karten, bei denen das Bild ein Link ohne Text ist und der Titel ein zweiter Link.
• Icon-Links im Header – Warenkorb, Konto, Merkliste – ohne Text.
• Leere Anker wie <a href="#"></a>, die ein Skript später füllt oder nie.
• Text mit display: none auf kleinen Bildschirmen – damit ist er auch für Screenreader weg.

So beheben Sie es

1. Bei einem Bildlink gehört das Ziel ins alt des Bildes – „Beispiel GmbH – Startseite“, nicht „Logo“.
2. Bei einem Icon-Link ergänzen Sie optisch versteckten Text im Link oder ein aria-label am Link und setzen aria-hidden="true" am Icon.
3. Wo Bild und Titel zum selben Ziel führen, machen Sie daraus einen Link: ein Name, ein Halt in der Tab-Reihenfolge.
4. Beheben Sie es in Header-, Footer- und Karten-Komponenten – sie stehen auf jeder Seite.

<!-- Vorher: ein Icon-Link und ein Bildlink ohne Namen -->
<a class="header-cart" href="/warenkorb/">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M4 4h2l3 12h10l2-8H7"/></svg>
</a>
<a class="social-link" href="https://www.instagram.com/beispiel/">
  <img src="/icons/instagram.svg" width="24" height="24">
</a>

<!-- Nachher: aria-label benennt den Icon-Link, alt den Bildlink -->
<a class="header-cart" href="/warenkorb/" aria-label="Warenkorb">
  <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><path d="M4 4h2l3 12h10l2-8H7"/></svg>
</a>
<a class="social-link" href="https://www.instagram.com/beispiel/">
  <img src="/icons/instagram.svg" width="24" height="24" alt="Beispiel GmbH auf Instagram">
</a>

Ein „Weiterlesen“-Link besteht die Regel, sagt aber nicht, welcher Artikel sich öffnet. Ergänzen Sie den Titel als versteckten Text – das sichtbare Wort bleibt kurz, der Name wird eindeutig:

<a class="teaser__more" href="/blog/barrierefreie-formulare/">
  Weiterlesen<span class="visually-hidden"> über barrierefreie Formulare</span>
</a>

So prüfen Sie es von Hand

1. Öffnen Sie mit einem Screenreader die Liste der Links – NVDA: Einfügen + F7; VoiceOver: den Rotor mit VO + U – und lesen Sie sie, ohne auf die Seite zu schauen. Wissen Sie bei jedem Link, wohin er führt?
2. Achten Sie auf Einträge, die „Link“, einen Dateinamen oder eine Webadresse lauten: Das sind die Links ohne Namen.
3. Wählen Sie Icon- und Bildlinks im Barrierefreiheits-Inspektor Ihres Browsers (Chrome, Edge, Firefox): Der „Name“ darf nicht leer sein.
4. Suchen Sie nach mehreren Links mit gleichem Namen, etwa „Weiterlesen“, die zu verschiedenen Zielen führen.

Zugehöriges WCAG-Kriterium

Die Regel ist zwei Kriterien zugeordnet, beide Stufe A: 2.4.4 Linkzweck (im Kontext), weil ein Link ohne Text nicht sagen kann, wohin er führt, und 4.1.2 Name, Rolle, Wert, weil der Link als Bedienelement keinen Namen hat. Verwandt: 1.1.1 Nicht-Text-Inhalt für das Bild in einem Bildlink und 2.5.3 Beschriftung im Namen – ein aria-label muss den sichtbaren Linktext enthalten.

So meldet Reviseberg diese Regel

Reviseberg führt link-name auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterien und Stufe, der Zahl der betroffenen Links und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und alle betroffenen Seiten. Social-Icons im Footer stehen auf jeder Seite – ein Fix im Template behebt alle Vorkommen.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren, etwa bei einer Einbettung eines Drittanbieters; jede Entscheidung wird protokolliert. Ein Ergebnis ohne Befund markiert 2.4.4 oder 4.1.2 nie als bestanden: Ob jeder Linktext sagt, wohin er führt, prüft ein Mensch.

Verwandte Regeln

• undefined – Bilder ohne Alternativtext, oft der Grund, warum ein Bildlink keinen Namen hat.
• undefined – dasselbe Problem bei Buttons.
• undefined – Links im Fließtext, die sich nur durch Farbe abheben.

Alle leeren Links Ihrer Website finden – kostenloser Scan