Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Tooltips — eine schlechte Idee für echten Inhalt veröffentlicht in 2013

Unterstützung des Title-Attributs in Screenreadern

Das title-Attribut wird paradoxerweise oft aus Gründen der Barrierefreiheit eingesetzt. In der Tat unterstützen Screenreader das title-Attribut in einigen Situationen:

Hinweis: Screenreader können das title-Attribut eines Links zwar lesen, aber diese Einstellung wird immer wieder vom Nutzer abgeschaltet, denn oft werden unklare oder zum Linktext redundante Tooltips vergeben.

Tooltip für einen Link: 'Click here to find out more' Linktexte werden unnötig aufgebläht

Und dennoch empfiehlt das W3C in den Techniken zu den Web Content Accessibility Guidelines (WCAG) 2.0, Extern, englischsprachig: das title-Attribut für Links einzusetzen. Allerdings wird in den Erläuterungen zur Technik deutlich auf die Mängel des title-Attributs hingewiesen und nahegelegt, dass zur barrierefreien Umsetzung entweder versteckter Text oder von vorneherein Extern, englischsprachig: eindeutige Linktexte zum Einsatz kommen sollen.

Das klassische Beispiel für einen nicht eindeutigen Linktext ist der "mehr"-Link, der am Ende von Teasern steht.

Ein typischer Teaser mit Überschrift, Bild, Teasertext und mehr-Link

Im einfachsten Fall könnte das HTML wie folgt aussehen:

<h2>Frequenzen</h2>
<p><img src="parabolantenne.jpg alt="Parabolantenne" /> Immer auf Sendung. Funkhaus Europa on air. <a title="Frequenzen" href="detailseite.html">mehr</a></p>

Der Linktext sollte jetzt in einem Screenreader "mehr Frequenzen" lauten — solange der Nutzer das Hinzuziehen des Tooltips im Screenreader nicht ausschaltet. Wenn es darum geht, den Linkzweck eindeutig zu gestalten, ist der Einsatz eines ARIA-Attributs wesentlich zuverlässiger.

Der mehr-Link kann mit einem ARIA-Attribut eindeutig gestaltet werden, in dem der Link mit einer Beschreibung verknüpft wird. Beispielsweise kann mit dem aria-describedby-Attribut auf eine oder mehrere andere Stellen auf der Seite verwiesen werden und die referenzierten Texte werden zur zusätzlichen Beschreibung des Linktextes herangezogen.

In dem Beispiel muss die Überschrift mit einer ID ergänzt werden, zu der das aria-describedby-Attribut für den Link zeigt:

<h2 id="idtext">Frequenzen</h2>
<p><img src="parabolantenne.jpg alt="Parabolantenne" /> Immer auf Sendung. Funkhaus Europa on air. <a aria-describedby="idtext" href="detailseite.html">mehr</a></p>

Wenn ein Screenreader-Nutzer mit der Tab-Taste den mehr-Link fokussiert, wird nunmehr "mehr Frequenzen" ausgegeben. Die Aussagekräftigkeit lässt hier zwar zu wünschen übrig, aber das tut das title-Attribut in diesem konkreten Beispiel letztlich auch.

Eine weitere Alternative für einen Tooltip besteht darin, anstatt eines title-Attributs ein tooltip-Widget einzusetzen. Mit CSS und ARIA wird ein Tooltip per Tastatur zugänglich gemacht und für Screenreader optimiert. Der einzige "Nachteil" eines Widgets ist es, dass es sich auf JavaScript verlässt.

Hinweis: Der Linktext ist in diesem Beispiel bereits im Kontext eindeutig und erreicht somit Konformitätsstufe AA der WCAG 2.0. Die Verknüpfung mit der Überschrift trägt dazu bei, den Linktext auch außerhalb seines Kontextes besser nachvollziehbar zu machen und Konformitätsstufe AAA zu erreichen.

Es bleibt die Frage, ob die zusätzliche Beschreibung des Links nur für Screenreader-Nutzer oder für alle Nutzer interessant ist. In diesem Fall ist die Ergänzung des Linktextes ausschließlich für Screenreader-Nutzer relevant, denn für alle anderen ist der visuelle Zusammenhang der Überschrift und des Links gegeben.