Barrierefreie Links auf Webseiten

Sicherlich sind Ihnen schon einmal Formulierungen wie „Weitere Informationen finden Sie hier“ begegnet, wobei „hier“ verlinkt ist. Doch was passiert, wenn Sie auf „hier“ klicken? Wird eine neue Unterseite geöffnet? Gelangen Sie zu einer externen Webseite oder wird eine PDF-Datei heruntergeladen? Oft ist dies nur aus dem Kontext des umgebenden Textes ersichtlich. In diesem Artikel erläutern wir, worauf Sie bei „hier“-Links und anderen Arten von Links achten sollten.

Links können auf einer Webseite auf verschiedene Arten eingebunden werden. So können nicht nur Textelemente, sondern auch Bilder und Symbole verlinkt sein. Beispielsweise ist auch das Lupensymbol neben einem Suchfeld ein Link. Für Nutzende muss stets klar ersichtlich sein, wohin ein Link führt oder welche Aktion er auslöst.

Textlinks

Menschen mit Sehbehinderungen nutzen oft Screenreader, die ihnen eine Liste aller Links auf einer Seite vorlesen. Wenn diese Links jedoch nur „hier“ heißen, ist es für die Betroffenen unmöglich zu erkennen, wohin der Link führt. Daher sollten alle Links auf Ihrer Webseite eindeutig bezeichnet sein, idealerweise bereits durch den Linktext selbst.

Falls dies nicht möglich ist, kann die Barrierefreiheit dennoch gewährleistet sein, wenn der Zweck des Links aus dem Kontext erschlossen werden kann. Eine aussagekräftige Überschrift oder eine erläuternde Textbeschreibung im selben Absatz können dabei helfen, das Linkziel verständlich zu machen.

Ein wichtiger Hinweis: Links sollten nicht ausschließlich durch eine Farbänderung vom restlichen Text abgehoben werden. Eine zusätzliche Kennzeichnung wie eine Unterstreichung oder ein Symbol, beispielsweise ein Pfeil, kann hier hilfreich sein. Weitere Informationen hierzu finden Sie in der Checkliste zum Thema Farben.

Beispiele

Hier einige Beispiele für gut umgesetzte Links:

Unter Kontakt finden Sie unsere Ansprechpartnerinnen und Ansprechpartner.
Laden Sie unsere Broschüre zur Barrierefreiheit (PDF öffnet in neuem Fenster) herunter.
Lesen Sie mehr über unsere Datenschutzrichtlinien auf unserer Infoseite.

Verlinkte Bilder und Grafiken

Auch bei verlinkten Grafiken muss Barrierefreiheit berücksichtigt werden. Icons und Symbole, wie etwa ein Drucker- oder Lupensymbol, müssen ebenfalls beschrieben werden. Diese als Bedienelemente dienenden Icons sollten dabei nur die ausgeführte Aktion beschreiben. Beispielsweise könnte ein Lupensymbol neben einem Suchfeld mit „Suche starten“ beschrieben werden. Ein Alternativtext, der die Lupe selbst beschreibt, ist hier nicht nötig. Bei verlinkten Bildern und Grafiken sollte das Linkziel im Alternativtext ersichtlich sein.

Beispiel

Logo der Stadt Berlin

Ist das Logo verlinkt, könnte der Alternativtext beispielsweise lauten: „Wappen der Stadt Berlin – Zur Startseite“. Hier wird das Linkziel am Ende ergänzt. tartseite“. Hier wird das Linkziel am Ende ergänzt.

<a href="https://www.berlin.de">
  <img src="berlin-logo.png" alt="Wappen der Stadt Berlin – Zur Startseite">
</a>

Checkliste - Links

Stellen Sie sicher, dass alle Textlinks aussagekräftige Bezeichnungen tragen.
Vermeiden Sie Links mit den Bezeichnungen „hier“, „mehr“ oder „weiterlesen“.
Wenn solche Bezeichnungen nicht vermeidbar sind, sorgen Sie für einen aussagekräftigen Kontext, etwa durch passende Überschriften oder ausführliche Textbeschreibungen vor dem Link.
Links sollten nicht nur durch eine andere Farbe erkennbar sein. Zusätzliche Kennzeichnungen wie Unterstreichungen oder Symbole, etwa ein Pfeil, sind empfehlenswert.
Achten Sie bei verlinkten Bildern und Grafiken darauf, dass der Alternativtext entweder das Linkziel beschreibt oder die auszuführende Aktion.