Navigation

Springe zum Hauptinhalt
Universitäts­rechen­zentrum
Linktexte

Leitfaden: Linktexte

Wenn am Bildschirm der Zweck eines Links eindeutig ermittelbar ist, gilt für die barrierefreie Gestaltung, dass ein Screenreadernutzer den Linkzweck entweder anhand des Linktextes oder anhand des technischen Kontextes ebenfalls ermitteln können soll. Diese Anforderung wird durch die Web Content Accessibility Guidelines (WCAG) 2.0 auf der niedrigsten Konformitätsstufe A vorgegeben. Erst auf der höchsten Konformitätsstufe AAA muss der Linkzweck aus dem Linktext alleine hervorgehen (ohne Einbeziehung des Kontextes).

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 Screenreadernutzer 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 Screenreadernutzer 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 Screenreadernutzer 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>

Presseartikel