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:
Frames und Iframes werden anhand ihrer title-Attribute identifiziert.- Wenn Formularelemente keine eindeutige Beschriftung (
LABEL-Element) haben, so kann ersatzweisedas title-Attribut für die Bezeichnung eingesetzt werden. - Mittlerweile ergänzen Browser denn Linktext durch ein
title-Attribut des Links. Der Linktext wird zusammengesetzt aus Linktext und Tooltip. - Wenn Abkürzungen mit den HTML-Elementen
ABBRoderACRONYMausgezeichnet werden, so können Screenreader so eingestellt werden, dass sie den Inhalt des Elements mit dem Wert destitle-Attributs ersetzen.
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.
Linktexte werden unnötig aufgebläht
Und dennoch empfiehlt das W3C in den Techniken zu den Web Content Accessibility Guidelines (WCAG) 2.0, 
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 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.
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.