Link-Texte: Barrierefreiheit und User Experience

Als Link-Text versteht man den Text-Inhalt eines Links, also der Text, der geklickt werden kann, um dem Link zu folgen. Jeder Link sollte einen Link-Text haben. Technisch ist es auch möglich nur ein Icon als Link-Inhalt zu verwenden. Dieses sollte dann aber unbedingt eine textliche Beschreibung in Form eines Alt-Textes haben. Nur so sind die Links für Nutzer*innen von Barrierefreiheitstechnologien sinnvoll nutzbar. 

Zum einen sind gute Link-Texte wichtig, damit Links auch bei der Nutzung von Barrierefreiheitstechnologien sinnvoll nutzbar sind. Der Link-Text ist oft der wichtigste Hinweis auf das Ziel eines Links und über die Funktionen eines Screenreaders kann man sich alle Links einer Seite anzeigen lassen. Dann ist es hilfreich, wenn die Links aussagekräftig beschriftet sind.  

Zum anderen profitieren aber auch andere Besucher*innen von guten Link-Texten. Die Nielsen Norman Group zeigt in ihrem Artikel „Writing Hyperlinks: Salient, Descriptive, Start with Keyword“ (engl.) eindrücklich, dass Links neben Überschriften eines der Hauptmerkmale sind, nach denen eine Seite überflogen wird.  

Nutze aussagekräftige Link-Texte. Der Link-Text sollte nicht einfach nur „hier“ lauten. Das Ziel des Links sollte anhand des Link-Textes erkennbar sein. 

Am einfachsten lässt sich das umsetzen, wenn man den Titel der Ziel-Seite verwendet. Wenn Link und Titel übereinstimmen oder sehr ähnlich sind, sorgt das für Kontinuität zwischen dem „angeklickten“ Link und der Website, auf welcher der Benutzer landet. 

Ein Beispiel aus der Praxis? Dieser Text wurde so ähnlich in unserem Unternehmenschat gepostet:

Der Autor hat sogar erkannt, dass die Links hervorgehoben werden müssen. Besser wäre es gewesen, das Ziel der Links zu beschreiben. 

Bei einer Call-to-Action wird gerne ein Text verwendet wie »Hier klicken für eine Demo«, um die Nutzer zur Interaktion zu animieren. Besser ist es jedoch, nicht das Werkzeug zu beschreiben, das möglicherweise genutzt wird, sondern die Aktion oder Zweck der erreicht werden soll. Aus dem genannten Beispiel wird dann beispielsweise »Erhalte eine Demo« – genauso auffordernd, inkludiert aber auch Endgeräte mit Touch-Input oder andere Input-Devices. 

Wer kennt sie nicht, die Links auf Blogs oder Unternehmensseiten, die mit mehr lesen beschriftet sind? Naturgemäß kommen diese Links auch immer mehrfach auf einer Seite vor – den Weiterlesen-Link braucht man ja gerade bei Artikel-Listen oder ähnlichem. Für einen Screenreader-Nutzer, der sich alle Links auf einer Seite auflisten lässt, sind diese Links aber nicht hilfreich. Ja, es ist minimal besser als „hier“, weil zumindest die Aktion beschrieben wird, durch die Häufung geht die Nützlichkeit aber verloren. 

Da ist es hilfreich, wenn der Titel des Beitrags mit in den Link-Text eingeschlossen wird. Mit dem Attribut aria-label="Mehr lesen über <Titel des Artikels>" lassen sich die Links unterscheiden und sichtbar im Layout ist dennoch nur der kurze Text, sodass Nutzer, die den Kontext aus der visuellen Nähe erkennen können, nicht so viel lesen müssen. 

Der Nachteil an der Lösung: Wenn die Link-Label jetzt durch einen Screenreader vorgelesen werden, wiederholt sich immer wieder der Text "Mehr lesen über". Das ist bei wenigen Links noch in Ordnung, sobald es aber mehr als drei werden, ist das ganz schön nervig. Deshalb sollten, wenn man mit solchen Links arbeiten möchte, die wiederholenden Bestandteile am Ende des Link-Textes platziert werden. Zum Beispiel „<Titel des Artikels>“ weiterlesen. So kann der Nutzer schnell weiterspringen und muss sich nicht jedes Mal den gleichen Text anhören, bevor der unterscheidbare Teil des Link-Textes kommt. 

Grundsätzlich sollten doppelte Links im Accessibility Tree vermieden werden. Beispielsweise genügt es bei einem klassischen Blog auf einer Archiv-Seite die jeweiligen Artikel einmal zu verlinken. Wenn alle Artikel mehrfach verlinkt sind, ist das eher verwirrend, wenn man Features wie den VoiceOver Web Rotor nutzt. Oft sieht man, dass das Artikel-Bild, der Titel und der Weiterlesen-Link zu selben Ziel führen. Also gleich dreimal der gleiche Link – das ist ganz schön viel. 

Wie kann dieses Problem gelöst werden, ohne die UX für andere Nutzer einzuschränken? Für Maus-Nutzer ist es ja sehr praktisch, mehrere Optionen zu haben. 

Eine Strategie wäre es, einen der Links als primär anzusehen (bspw. den Titel) und die anderen Links mithilfe von aria-hidden="true" und tabindex="-1" für A11y-Tools zu verstecken. Damit wird aber auch der Alt-Text des Bildes versteckt und dass der Weiterlesen-Link nicht mehr über die Tab-Taste fokussiert werden kann, kann Keyboard-Nutzer irritieren.

Alternativ kann das ganze Element als ein Link behandelt werden. So erscheint der Link nur einmal im Accessibility Tree und auf Touch-Geräten ist die nutzbare Fläche auch direkt größer. Aber auch bei dieser Strategie gibt es einiges zu beachten. Der Link-Text ist dann der gesamte Inhalt (das lässt sich über ein aria-labeled-by recht einfach lösen) und verschachtelte interaktive Elemente (wie Buttons oder andere Links) sind umständlicher. Diese Strategie hat Tina Reis in ihrer Session beim WP Accessibility Day 2024 mit vielen kleinen Hinweisen vorgestellt. Für mich ist das in vielen Fällen die beste Lösung. 

Manche Links wird es natürlich trotzdem mehrfach geben. In der Liste der Blog-Artikel tauchen die Links zu den Kategorien bestimmt öfter auf. Wobei man sich hier auch die Frage stellen kann, ob beispielsweise der Link zum Autor in der Übersicht überhaupt benötigt wird. Vermutlich werden die meisten Nutzer zunächst den Beitrag lesen und erst bei Gefallen mehr von diesem Autor lesen wollen. Der Link zum Autor in der Einzelansicht des Artikels wäre also ausreichend. 

Ein anderes Beispiel sind mehrere Navigations-Menüs auf der Website. Oft ist im Footer einer Website nochmal eine Navigation eingebunden, welche die wichtigsten Seiten der Webpräsenz enthält. 

Wenn doppelte Links also nicht vermeidbar oder sogar sinnvoll sind, sollten Links mit dem gleichen Ziel auch gleich beschriftet werden. Es ist nicht hilfreich, wenn es die Links "Support" und "Kontakt" gibt, die am Ende aber beide zum selben Ziel führen. 

Im Web gehen die meisten Nutzer*innen davon aus, das Links zu einer anderen Website führen. Daher sollten Links zu beispielsweise PDF-Dateien entsprechend markiert werden. 

Technisch umgesetzt werden kann das über ein Icon mit einem Alt-Text (der Alt-Text eines Bildes innerhalb des a-Tags ist Teil der Linkbeschriftung) oder, indem der Text direkt als Teil des Links angegeben wird: 

Zum Thema warum Links nicht in neuem Tab geöffnet werden sollten habe ich bereits einen eigenen Artikel geschrieben. In kurz: Überlasse dem Nutzer die Wahl, wie er Links benutzen möchte. Es gibt viele Möglichkeiten, wie Nutzer selbst entscheiden können, einen Link in einem neuen Tab zu öffnen, aber keine sinnvolle Möglichkeit, einen immer im gleichen Tab zu öffnen. Und: Setze das Target-Attribut nur in wenigen Ausnahmefällen. Die meisten Argumente, die man hört, sind Scheinargumente und nicht sinnvoll. Mehr zu den Hintergründen kannst du im erwähnten Artikel nachlesen. 

Wenn ein Link doch in einem neuen Tab geöffnet werden muss, ist es wichtig diese wenigstens eindeutig und verständlich zu markieren. In der Regel mit einem textlichen Hinweis oder einem Icon (Alt-Text nicht vergessen!). Auch dazu mehr im Blog-Artikel zu Link-Targets. 

Noch ein kleiner Tipp zum Abschluss, der zwar nicht direkt mit Link-Texten zu tun hat, in den Kontext aber trotzdem interessant ist. 

Platziere den Link an der Stelle, an der der Nutzer die Aktion durchführen möchte: 

Der Leser liest den Text und denkt sich „oh cool, Updates“, muss dann aber im Text wieder zurückspringen, um den Link zu finden. Besser wäre also: 

Für weitere Updates folgt mir auf meinem LinkedIn-Account. 

Gute Link-Texte zu erstellen, ist gar nicht so schwer – ein paar einfache Regeln reichen oft schon aus. Wichtig ist vor allem, dass sowohl die Technik stimmt als auch die Redakteur*innen wissen, worauf es ankommt. Mit einem passenden Theme oder Template und etwas Aufmerksamkeit bei der Erstellung der Inhalte lässt sich die User Experience für alle deutlich verbessern.

• W3C: Link Purpose in Context
• W3C: Link Purpose Link Only
• NNGroup: Writing Links/