Links ohne erkennbaren Namen – „hier klicken" führt ins Leere

Ein Link braucht einen Namen, den man auch ohne den umgebenden Text versteht. Symbole ohne Beschriftung haben gar keinen – für ein Vorleseprogramm ist das ein Link ins Nichts.

Wie der Mangel entsteht

Fast immer durch Symbole: ein Briefumschlag, ein Telefonhörer, die Zeichen der sozialen Netzwerke im Fußbereich. Optisch klar, technisch leer – im Link steht nur eine Grafik ohne Text.

Die zweite Quelle sind Linktexte wie „hier", „mehr" oder „weiterlesen". Wer sich die Links einer Seite der Reihe nach vorlesen lässt – eine übliche Art, sich zu orientieren –, hört dann zwölfmal „mehr".

So beheben Sie es

Bei Symbolen den Namen mitliefern:

<a href="/kontakt" aria-label="Zum Kontaktformular">
  <svg aria-hidden="true" …></svg>
</a>

Oder mit sichtbar verstecktem Text, der vorgelesen, aber nicht angezeigt wird:

<a href="/kontakt"><svg aria-hidden="true" …></svg>
  <span class="nur-vorlesen">Zum Kontaktformular</span></a>

Bei Bild-Links gehört der Zweck in den Alternativtext – nicht die Bildbeschreibung:

<a href="/preise"><img src="preise.png" alt="Zur Preisübersicht"></a>

Die Faustregel

Decken Sie den Rest der Seite ab und lesen Sie nur den Linktext. Wissen Sie dann, wohin er führt, ist er gut. „Preisübersicht öffnen" besteht diesen Test, „hier klicken" nicht.

Häufige Fragen

Warum ist „hier klicken" ein Problem?

Vorleseprogramme können sich alle Links einer Seite als Liste ausgeben lassen. Aus dem Zusammenhang gerissen sagt „hier" nichts über das Ziel aus.

Wie beschrifte ich einen Symbol-Link?

Mit aria-label am Link oder mit einem visuell versteckten Textelement im Link. Das Symbol selbst wird mit aria-hidden="true" ausgeblendet.

Weitere Befunde aus dem Bereich Barrierefreiheit

← Alle Befunde im Überblick