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.
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 vermittelts 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
- Die Kunst des richtigen Verlinkens (Einfach für alle)
- Links and Hypertext by WebAIM
- Don’t use “click here” as link text
- Why “Click here” is bad linking practice
- Making Accessible Links: 15 Golden Rules For Developers
- Improving Link Display for Print
Quelle: https://make.wordpress.org/accessibility/handbook/content/good-link-texts/