Aussagekräftigen Linktext schreiben

Was diese Prüfung macht

Inspiziert jedes <a href> auf der Seite und ermittelt den zugänglichen Namen (sichtbarer Text, aria-label oder Alt-Text eines Kind-<img>). Die Prüfung fällt durch, wenn:

• Der Name leer ist (ein nacktes <a><svg/></a> ohne Text oder Label).
• Der Name eine generische Phrase ist: „hier klicken”, „hier”, „mehr erfahren”, „weiterlesen”, „mehr”, „dies”.
• Derselbe generische Name an verschiedenen Stellen der Seite auf unterschiedliche URLs zeigt — eine Person mit Screenreader, die alle Links aufzählt, hört „hier klicken, hier klicken, hier klicken” ohne Möglichkeit, sie zu unterscheiden.

Warum es wichtig ist

Screenreader-Nutzer navigieren über Linklisten. In NVDA: Einfg+F7. In VoiceOver: Ctrl+Option+U → Links. Der Linktext erscheint kontextlos, alphabetisch sortiert, und die Person wählt einen aus. „Mehr erfahren” liefert dabei keinerlei Information.

• Sehende Nutzer scannen auch. Eyetracking-Studien (Nielsen Norman, jede Replikation) zeigen: Nutzer scannen zuerst Linktexte und überspringen den umliegenden Fließtext. Aussagekräftige Links sind gleichzeitig Wegweiser.
• Suchranking. Interner Anchor-Text gehört zu den wenigen Textsignalen, denen Google noch vertraut. Ein „Hier klicken”-Link zu deiner Preisseite verschenkt diesen Platz; „MetricSpot Preise” nicht.
• KI-Zitate. ChatGPT, Perplexity und Google AI Overviews zitieren Anchor-Text, wenn sie einen Link in einer Quelle nennen. „Hier klicken” ergibt ein Zitat ohne Vorschau auf den Inhalt.

Wie du es behebst

Schreibe jeden Linktext so, dass er das Ziel beschreibt — auch außerhalb seines Kontexts.

Schlecht:

<p>Um mehr über unsere Preise zu erfahren, <a href="/pricing/">hier klicken</a>.</p>

Gut:

<p>Sieh dir unsere <a href="/pricing/">Preispläne und kostenlose Testphase</a> an.</p>

Icon-Links — aria-label verwenden:

<a href="https://twitter.com/metricspot" aria-label="MetricSpot auf X">
  <svg aria-hidden="true">…</svg>
</a>

aria-hidden="true" auf dem SVG verhindert, dass dessen zugänglicher Inhalt durchsickert; aria-label liefert den Namen. Ohne das sagen Screenreader nur „Link” mit den Pfaddaten an, die sie extrahieren können.

„Mehr erfahren”-Karten (Blogpost-Listen). Den Anchor entweder über die ganze Karte ziehen oder den Titel verlinken:

<!-- Schlecht: jedes „Mehr erfahren" ist identisch -->
<article>
  <h3>Warum deine CWV abrutschen</h3>
  <p>Drei Muster, die wir sehen…</p>
  <a href="/blog/cwv/">Mehr erfahren</a>
</article>

<!-- Besser: Titel wird zum Link -->
<article>
  <h3><a href="/blog/cwv/">Warum deine CWV abrutschen</a></h3>
  <p>Drei Muster, die wir sehen…</p>
</article>

<!-- Oder: visuell verborgenen Kontext anhängen -->
<a href="/blog/cwv/">Mehr erfahren<span class="sr-only"> über Core Web Vitals</span></a>

Mehrere identische Links zu verschiedenen Zielen. Hast du in einer Tabelle mehrere „Bearbeiten”-Buttons, hänge den Zeilenkontext unsichtbar an:

<a href="/users/42/edit">Bearbeiten<span class="sr-only"> Jane Patel</span></a>
<a href="/users/43/edit">Bearbeiten<span class="sr-only"> Alex Diaz</span></a>

Linter. eslint-plugin-jsx-a11y liefert eine anchor-has-content-Regel. Ergänze sie um eine eigene Regel, die wortwörtliches „hier klicken” / „mehr erfahren” als Anchor-Text verbietet — beides sind zu 100 % rote Flaggen.

Häufig gestellte Fragen

Ist „Mehr erfahren →” okay, wenn er visuell an einer Überschrift hängt?

Sehende Nutzer verbinden ihn mit der Überschrift darüber; Screenreader-Nutzer hören ihn isoliert. Mach die Überschrift selbst zum Link (am besten) oder hänge <span class="sr-only"> über [Beitragstitel]</span> an, um das Design zu behalten und Kontext zu liefern.

Was ist mit Icons für externe Links?

Das Icon ist dekorativ; entweder mit aria-hidden="true" ausblenden oder „(externer Link)” als visuell verborgenen Text ergänzen. Verlass dich für Screenreader-Nutzer nicht auf das Icon allein.

Zählt es als beschreibend, wenn der Link in einem neuen Tab öffnet?

Nein — target="_blank" ist ein Verhalten, kein Name. Soll der Screenreader es ankündigen, ergänze „(öffnet in neuem Tab)” als sichtbaren oder sr-only Text. Viele Nutzer mögen überraschendes Neue-Tab-Verhalten nicht; wenn du es einsetzt, signalisiere es.