Klicken Sie hier oder hier um etwas darüber zu lernen, wie sie einen barrierefreien Linktext verfassen.
Meinen Sie, diese Links waren jetzt wirklich barrierefrei? Hätten Sie gewusst, was sich hinter den Links verbirgt? Ein kleines Indiz hätte sicherlich der Satz drum rum geliefert, doch die Links selbst geben keinerlei Hinweis auf die verlinkte Seite. Nutzer von Screenreadern trifft das besonders, denn unter Umständen hören diese nur den Linktext. Hören Sie dann mehrmals „hier“, „mehr lesen“ oder „Details“, dann ist das nicht hilfreich. Genau so sehen Links in Teasern zu News, Blogs, oder Stellenanzeigen aber häufig aus. Lassen Sie uns jetzt also wirklich schauen, wie man barrierefreie Linktexte schreiben und an Screenreader ausgeben kann.
Klaren und beschreibenden Linktext verfassen
Linktexte sollten auch ohne den umgebenden Kontext verständlich sein. Sie müssten eine Schablone um ihren Link legen können und noch genau wissen, wohin dieser Link sie führen wird. Steht dann nur noch „hier“ oder „mehr lesen“, dann bleiben Nutzer im Unklaren über den Zweck des Links. Und auch Suchmaschinen bewerten sprechende Links postiv, solang diese mit dem Inhalt der verlinkten Seite zusammenhängen.
Versuchen Sie also, das Linkziel zu beschreiben. Statt „mehr erfahren“ würde „mehr über barrierefreie Linktexte erfahren“ doch gut funktionieren. Nutzen Sie dabei gern die Keywords der verlinkten Seite, denn Suchmaschinen bringen Linktexte mit den verlinkten Seiten in Zusammenhang.
Gleicher Text für gleiche Links
Versuchen Sie bei der Wahl Ihrer Linktexte möglichst konsistent zu bleiben. Sie werden zwar verschiedene Linktexte für eine Inhaltsseite verwenden, vermeiden Sie aber, dieselben Linktexte für unterschiedliche Seiten einzusetzen. Wenn ein Nutzer einmal gelernt hat, welche Seite sich hinter dem Linktext „Barrierefreiheit“ befindet, dann sollte dort auch nur die entsprechende Seite erreicht werden und nicht, je nach Laune des Autors, auch einmal die Informationsseite der WCAG. Sie verbessern so die Nutzungserfahrung erheblich und fördern gleichzeitig Ihre Suchmaschinenoptimierung.
Was erwartet den Nutzer
Neben einer Beschreibung des Inhaltes des Linkziels sollten Sie bei Bedarf auch wichtige Informationen dazu geben, was den Nutzer erwartet. Das heißt, immer wenn das Linkziel keine Website ist, sollten Sie das Dateiformat hinzufügen. Handelt es sich um eine pdf? Einen Dateidownload? Wenn beim Klick auf den Link die Sprache gewechselt wird, dann informieren Sie am besten auch darüber. Nutzer sollten schon vorm Klick wissen, ob sie mit dem Ergebnis etwas anfangen können oder nicht.
Länge des Linktextes
Die Länge des Linktextes spielt eine wichtige Rolle bei der Nutzererfahrung. Ein guter Linktext sollte kurz und prägnant sein, um schnell verstanden zu werden. Zu lange Linktexte können unübersichtlich wirken und den Lesefluss stören.
Als Faustregel gilt: der Linktext sollte so kurz wie möglich, aber so lang wie nötig sein, um den Inhalt klar zu vermitteln. Es gibt Versuche von Experten, die nahelegen, dass Google nur die ersten 50-55 Zeichen eines Linktextes auswertet. Das wären etwa 7-8 Wörter und damit schon ganz schön lang. In den meisten Fällen werden Sie einen guten Linktext auch in 1-3 Wörtern verfassen können. Dadurch bleibt der Text übersichtlich und leicht verständlich, und die Nutzer können schnell erfassen, wohin der Link führt.
Lange Sätze oder ganze Absätze als Linktexte sollten vermieden werden, da sie die Lesbarkeit beeinträchtigen und den Nutzer verwirren können. Kurze, prägnante Linktexte erleichtern die Navigation auf Ihrer Website und tragen dazu bei, dass die Nutzer schnell und effizient finden, wonach sie suchen.
Vermeidung redundanter Links
Redundante Links sind solche, die mehrfach auf einer einzelnen Seite existieren. Das heißt, dieselbe Seite wird beispielsweise über einen Textlink und das Icon daneben verlinkt. Achten Sie darauf, dass jede Seite in Ihrem Text nur über einen, klar zu identifizierenden, Link verknüpft wird. Nicht jedes Auftreten des Wortes „Barrierefreiheit“ muss mit der passenden Seite verknüpft werden, es dauert dann nur länger, bis Nutzer die für sie wichtigen Links gefunden haben.
Screenreader-kompatible Linktexte ausgeben
Screenreader können grundsätzlich alle gut gepflegten Linktexte lesen. Es kann jedoch passieren, dass Sie keinen (oder einen kürzeren) sichtbaren Linktext nutzen wollen. Für Screenreader sollte dann ein sprechender Linktext zur Verfügung stehen. Das ist beispielsweise dann der Fall, wenn Grafiken als Link verwendet werden sollen. Aber auch dann, wenn aus gestalterischen Gründen kein Platz für einen ausreichend sprechenden Linktext ist.
Dazu bieten sich die folgenden zwei Methoden an:
Ausgeblendete Texte als Linktext
Texte können mithilfe von CSS ausgeblendet werden. Wichtig ist aber, eine dafür geeignete Methode zu wählen. Diese Methode eigenet sich besonders gut bei verlinkten Grafiken, die mit CSS als Hintergrundbild eingebunden werden und ersetzt den Alternativtext.
falsch
.hidden { display: none }Mit display: none ausgeblendeter Text ist auch für Screenreader nicht zugänglich. Diese Methode eignet sich, um Inhalte vorrübergehend ganz zu entfernen und beispielsweise mittels eines Buttons erst einzublenden.
richtig
.screenreader-only {
position: absolute;
top: -10000em;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}Mithilfe dieses, zugegebenermaßen etwas umständlich anmutenden, CSS-Codes lassen sich Texte für sehende Nutzer zuverlässig ausblenden. Für Screenreader bleiben sie jedoch „sichtbar“ und werden gelesen.
HTML-Attribute und ARIA
Eine weitere Möglichkeit, Linktexte für Screenreader zu erweitern, sind passende HTML-Attribute. Für einen erweiterten Linktext eignen sich folgende zwei Attribute:
title
Das title-Attribute kann an nahezu allen HTML-Elementen vergeben werden um diesen einen Titel zu geben. Dieser wird vom Screenreader vorgelesen. Zusätzlich nutzen alle gängigen Browser ihn aber auch, um einen kleinen Tooltip anzuzeigen, wenn man die Maus über das Element bewegt. Allerdings ist die Gestaltung dieses Tooltips vom Browser abhängig und kann nicht beeinflusst werden.
aria-label
Eine Möglichkeit, Screenreader direkt anzusprechen, ist die Vergabe von geeigneten ARIA-Attributen. Was genau das ist und wie man sie gut einsetzt kann im Blog-Beitrag zu ARIA-Attributen und Rollen noch einmal nachgelesen werden.
ARIA-Attribute dienen direkt zur Steuerung von Assistenzsystemen und werden vom Browser weitestgehend ignoriert. Sie geben Screenreadern aber wichtige Informationen. Mithilfe von aria-label kann genauso wie mit title ein Titel oder eine Beschriftung für jedes Element vergeben werden. Jedoch ist dieses standardmäßig unsichtbar. Ein nach eigenen Wünschen gestalteter Tooltip auf Basis dieses Elementes müsste selbst implementiert werden.
Einen barrierefreien Linktext verfassen – Fazit
Bei so vielen Möglichkeiten, barrierefreie Linktexte zur Verfügung zu stellen, sollte der Umsetzung eigentlich nichts im Wege stehen. Aus Sicht eines Gestalters kann ich verstehen, dass man Buttons möglichst kurz halten möchte und ein einheitliches Bild mit vielen „Mehr lesen“-Links geschaffen wird. Aus Sicht der Barrierefreiheit ist das aber schwierig. Verfassen Sie Ihren Linktext deshalb gern von Anfang an barrierefrei und stellen Sie sich vor, wie dieser sich für einen Screenreader-Nutzer anfühlt. Ist klar, wohin der Link führt und ist er von anderen Links auf der Seite unterschiedbar?
Passen Sie die Gestaltung der Barrierefreiheit an und wählen Sie im Notfall eine Variante, um verdeckt zusätzliche barrierefreie Linktexte zur Verfügung zu stellen.