A11y: Links – Das Barrierefreie Blog

Mit Links kann es viele Probleme geben. Eines der häufigsten entsteht durch Links die ‚hier klicken‘ oder ‚mehr lesen‘ lauten. Screenreader Nutzer wissen nicht, wohin der Link führt, insbesondere wenn sie eine Linkliste benutzen, um durch die Webseite zu navigieren. Weitere Probleme können durch Bilder-Links, visuelle Darstellung, Größe und Abstände entstehen.

Faustregeln für Linktext

Ein Link sollte das Linkziel beschreiben, auch wenn der Text außerhalb des Kontexts steht. Der Nutzer muss wissen was ihn erwartet.

Der Linktext sollte für sich alleine stehen können. Manche assistive Sofware scannt Seiten auf Links und listet diese für den Nutzer auf. In diesen Fällen werden die Links nur außerhalb des Kontexts vorgelesen und deshalb ist es wichtig einen beschreibenden und bedeutungsvollen Linktext zu haben.

Für Menschen mit normaler Sehkraft wird es ebensfalls leichter, den Text zu scannen und die gesuchte Information zu finden.

Linktexte beschreibend machen

Vermeiden von bedeutungslosen Linktextten wie Hier klicken, Download, Info.

Wenn man bedeutungslose Links wie diese verwendet, müssen sehende Nutzer den ganzen Satz lesen, um zu verstehen, wohin der Link führt und Screenreader Nutzer müssen es raten. In beiden Fällen erschwert es dem Nutzer den Inhalt zu erfassen

Fantasie-Worte in Links sollten ebenfalls vermieden werden:

ASCII art, example: \ō͡≡o˞̶
Emoticons, example: <3
Leetspeak, example: m8ts

Nicht jeder Nutzer oder jede Technologie versteht was es bedeutet.

Vermeiden von Linktext in Großbuchstaben. Er ist für Menschen mit Leseschwäche schwieriger zu lesen und manche Screereader halten kurze Worte dann für Abkürzungen und buchstabieren das Wort Buchstabe für Buchstabe. Das ist auch bei Text der Fall, der via CSS großgeschrieben wird.

Vermeiden von kompletten URLs als Linktext. Wenn man ausdrücklich auf eine Web-Adresse verweisen möchte, sollte man es kurz halten: wordpress.org anstelle von https://www.wordpress.org.

Beispiele

Falsch: Wenn Sie Sich für unsere Arbeit interessieren, klicken Sie hier um unseren Newsletter zu abonnieren.

Richtig: Abonnieren Sie unseren Newsletter, wenn sie sich für unsere Arbeit interessieren.

Bilder als Links

Bei einem Bild wird das alt-Attribut (der alternative Text) der Linktext sein:

Das alt-Attribut beschreibt das Bild: der Linktext wird die Beschreibung des Bildes, was wahrscheinlich keinen Sinn macht
Kein alt-Attribut: der Dateiname wird zum Linktext
Leeres alt-Attribut: der Link hat keinen Linktext und wird als “Link” vorgelesen

Die korrekte Weise, ein Bild als Link zu verwenden ist, das Linkziel als alternative Text anzugeben. Wenn das Bild zu einem Beitrag über das Handbuch des Barrierrefreiheits-Teams linkt, sollte der alternative Text des Bildes lauten: “Handbuch des Barrierrefreiheits-Teams“.

Visuelle Darstellung von Links

Links sind dazu da, durch die Inhalte zu navigieren und Informationen auffindbar zu machen. Wenn Links nur über eine andere Farbe ausgezeichnet werden, haben manche Nutzer Schwierigkeiten sie zu identifizieren, zum Beispiel:

Menschen, die keine oder nicht alle Farben wahrnehmen können
Menschen, die in einer sonnigen oder hellen Umgebung auf den Bildschirm schauen
Menschen, die in einer dunklen Umgebung auf den Bildschirm schauen

Hilfreich ist ein weitere visueller Hinweis, wie zum Beispiel eine Unterstreichung, was allen sehenden Nutzern dabei hilft sie zu finden.

Ein Link besitzt eine textliche oder grafische Beschriftung (z. B. ein Icon). Links besitzen meist einen visuellen Indikator, um den Link als solchen kenntlich zu machen, dies gilt insbesondere für Textlinks. Als visueller Indikator für Textlinks wird in der Regel eine Unterstreichung und eine abweichende Farbe verwendet.

Kontraste

Wenn der Link eine Textbeschriftung besitzt, muss diese zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.
Wenn der Link eine grafische Beschriftung besitzt, muss diese zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen.
Wenn der Link ausschließlich aufgrund seiner Textfarbe als Link zu erkennen ist, muss das Kontrastverhältnis zwischen der Farbe benachbarter Textinhalte und der Textfarbe des Links mindestens 3:1 betragen.
Wenn der Link ausschließlich aufgrund eines grafischen Elements (z. B. Unterstreichung oder Icon) als Link zu erkennen ist, muss das Kontrastverhältnis zwischen grafischem Element und Hintergrundfarbe mindestens 3:1 betragen.

Größen und Abstände

Klickbare Bereiche müssen eine Abmessung von mind. 24 x 24 px haben, außer:

Abstand: Der Abstand des klickbaren Bereichs ist mind. 24 px zu jedem benachbarten Zielbereich.
Inline: Der klickbare Bereich ist in einem Satz oder einem Textblock.
Wesentlich: Eine besondere Darstellung des klickbaren Bereichs ist wesentlich für die Information, die vermittelt werden soll.

Es sollte den Nutzern einfacher gemacht werden, die Funktionen neben dem Keyboard mit verschiedenen Eingabegeräten ausführen zu können.

Beispiel: Drei Buttons sind auf einem Bildschirm dargestellt und der klickbare Bereich jedes Buttons ist 24 x 24 px. Weil der klickbare Bereich selbst 24 x 24 px groß ist, wird kein zusätzlicher Abstand benötigt, das Erfolgskriterium ist erreicht.

Neues Fenster oder nicht?

Generell ist es nicht sinnvoll, Links in einem neuen Fenster oder Tab öffnen zu lassen. Die Nutzer wissen selbst, ob sie ein neues Fenster öffnen möchten oder nicht. Für alle Nutzer muss immer deutlich sein, wenn der Link nicht auf eine Webseite, sondern auf ein PDF oder einen multimedialen Inhalt verweist. Überraschungen dieser Art sind nicht besonders beliebt. Wenn es aus irgendeinem Grund nötig ist, Links in neuen Fenstern zu öffnen oder andere Inhalte als Webseiten zu verlinken, kann es sinnvoll sein, dem Link eine Grafik voranzustellen. Alternativtext und Titel können dann angeben, welcher Inhalt sich hinter dem Link verbirgt oder das ein neues Fenster bzw. ein neuer Tab geöffnet wird.

Quellen und gut zu wissen

Quelle: https://make.wordpress.org/accessibility/handbook/content/good-link-texts/