Leitfaden: Linktexte

Der Zweck eines Links sollte am Bildschirm eindeutig erkennbar sein. Auch Screenreader-Nutzer sollen ihn einfach ermitteln können. Dies geschieht entweder durch die direkte Benennung des Zwecks im Linktext oder anhand des technischen Kontexts. Die Web Content Accessibility Guidelines (WCAG) 2.0 geben entsprechende Anforderungen für die barrierefreie Gestaltung vor. Oben genannte Methoden entsprechen der WCAG 2.0 Konformitätsstufe A. Erst auf der höchsten Konformitätsstufe AAA muss der Linkzweck aus dem Linktext allein hervorgehen, ohne dass der Kontext einbezogen wird.

Der technische Kontext

Wie ein technischer Kontext hergestellt werden kann, ist eng verknüpft mit der Screenreader-Technik. Wenn eine Webseite per Tab-Taste durchwandert wird, werden Links und andere aktive Elemente fokussiert. Ein Screenreader gibt bei fokussierten Links den Linktext entweder per Sprachausgabe oder auf einem Braille-Display wieder.

Ein Beispiel:

<h2><a href="artikel.html">Eine Überschrift</a></h2>
<p>Ein Anreißertext.</p>
<p><a href="artikel.html">mehr</a></p>

Beim ersten Link ist der Linkzweck durch den Linktext gegeben. Im zweiten Linktext („mehr“) ist hingegen der Linkzweck ohne Kontext nicht eindeutig. Immerhin, im Screenreader könnte der zweite Link zum vorherigen oder zu einem nachfolgenden Text zugehörig sein.

Eine einfache Lösung, um der Minimalanforderung der Barrierefreiheit zu genügen, ist, den Link mit in den Absatz zu packen:

<h2><a href="artikel.html">Eine Überschrift</a></h2>
<p>Ein Anreißertext. <a style="display:block;" href="artikel.html">mehr</a></p>

Der Linktext ist zwar nach wie vor uneindeutig, aber der Screenreader-Nutzer kann den Linkzweck mit einem Tastenschlag ermitteln (z. B. indem der Absatz gelesen wird). Eine alternative Strategie wäre eine veränderte Reihenfolge:

<h2><a href="artikel.html">Eine Überschrift</a></h2>
<p><a href="artikel.html">mehr</a></p>
<p>Ein Anreißertext.</p>

Auch in diesem Fall wird durch den technischen Kontext (z. B. die unmittelbar vorangestellte Überschrift) sichergestellt, dass ein Screenreader-Nutzer den Zweck des „mehr“-Links ermitteln kann.

Diese und zahlreiche weitere Techniken zur Herstellung eines technischen Kontextes für Links sind beim W3C dokumentiert.

Linktext eindeutig gestalten

Mit Accessible Rich Internet Applications (ARIA) 1.1 verändert sich die Spezifikation für Browser, wie sie welche Texte in dem Accessibility Tree des jeweiligen Betriebssystems ablegen sollen (dort holen Screenreader die Informationen ab und verarbeiten sie weiter). Es gibt neue Attribute, aber auch Veränderungen beispielsweise für das title-Attribut, die die Algorithmen für die Ermittlung eines Linktextes voraussichtlich neu vorgeben (es handelt sich bei diesem Dokument um Work in Progress).

Insbesondere setzt sich bei allen Browsern inzwischen der Linktext aus einem Namen (accessible name), einer Beschreibung (accessible description) und einem Hilfetext zusammen. Das obige Teaser-Beispiel kann auch durch die Ergänzung des Namens mit einer Beschreibung zur WCAG 2.0 konform gestaltet werden:

<h2><a id="beschreibungstext" href="artikel.html">Eine Überschrift</a></h2>
<p>Ein Anreißertext.</p>
<p><a aria-describedby="beschreibungstext" href="artikel.html">mehr</a></p>

Der zweite Linktext setzt sich aus dem Namen des zweiten Links „mehr“ und einer Beschreibung (in diesem Fall der Linktext des ersten Links) zusammen und ist mit „mehr Eine Überschrift“ für Screenreader-Nutzer jetzt eindeutig.

ARIA ist ein Behelf. Besser ist ein Linktext, der von vornherein den Linkzweck beschreibt:

<h2><a href="artikel.html">Eine Überschrift</a></h2>
<p>Ein Anreißertext.</p>
<p><a href="artikel.html">[Thema] im Detail</a></p>