2.4.4 Zweck der Verknüpfung (im Kontext)

WCAG – Definition

Der Zweck jedes Links muss aus dem Linktext selbst oder dem Kontext klar erkennbar sein. Nutzer sollen vor dem Aktivieren wissen, wohin der Link führt.

Bedeutung

  • Screenreader-Nutzer lassen sich oft alle Links vorlesen – dann darf nicht überall „Hier klicken“ stehen.

  • Klare Links helfen auch Menschen mit kognitiven Einschränkungen und verbessern SEO.

  • Alle profitieren: schnellere Orientierung, mehr Vertrauen in die Inhalte.

Ausreichende Techniken

Aussagekräftiger Linktext

<a href="/kontakt">Kontakt aufnehmen</a>

statt

<a href="/kontakt">Hier klicken</a>

Kontext durch umgebenden Text

<p>Mehr Informationen über unsere <a href="/produkte">Produkte</a>.</p>

Linktext „Produkte“ ist eindeutig.

Screenreader-Only Text ergänzen

Für Links, die mehrfach vorkommen („Mehr erfahren“), kann ein unsichtbarer Zusatz helfen:

<a href="/angebot" class="more">
  Mehr erfahren <span class="sr-only">über unser Angebot</span>
</a>

CSS für .sr-only:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

ARIA-Attribute für Klarheit

Wenn Linktext allein nicht reicht:

<a href="/profil" aria-label="Benutzerprofil von Rashid anzeigen">
  <img src="avatar.jpg" alt="">
</a>

Beratungstechnicken

  • Konsistenz: ähnliche Inhalte → ähnliche Linktexte.

  • Länge: so kurz wie möglich, so eindeutig wie nötig.

  • Visuelles Feedback: z. B. title-Attribut sparsam für Tooltipps nutzen.

  • Ikonenlinks: immer mit sichtbarem Text kombinieren oder mit aria-label.

Fehler

  • Linktexte wie „Hier“, „Weiter“, „Mehr“.
  • Identische Links mit unterschiedlichem Ziel.
  • Bildlink ohne alt oder Label.
  • Mehrere Links mit gleichem Text, die auf unterschiedliche Ziele führen.
  • Kontext nur visuell, nicht für Screenreader (z. B. „Mehr erfahren“ unter drei verschiedenen Absätzen).