Schritt für Schritt zu barrierefreien Tooltips 
veröffentlicht in 2015
zuletzt bearbeitet in
HTML und ARIA (1/4)
Wenn Sie Ihren Tooltip neu aufbauen, ist es für die Barrierefreiheit immer am besten, mit HTML zu beginnen. Wir werden mit zwei Beispielen arbeiten, einem Link und einem Eingabefeld.
Folgendes ist für das HTML eines Tooltips zu beachten:
- Screenreader müssen die korrekte Lesereihenfolge ermitteln können. Der Tooltip muss direkt auf das auslösende Element oder dessen Beschriftung folgen.
- Der Tooltip muss mit dem auslösenden Element verknüpft werden. Hierzu setzen Sie das
aria-describedby-Attribut ein. - Stellen Sie sicher, dass das für den Tooltip auslösende Element per Tastatur fokussiert werden kann. Verwenden Sie dafür passende, fokussierbare HTML-Elemente.
Hinweis: Nutzende sollten niemals Elemente innerhalb eines Tooltips fokussieren können. Falls das Popup aus irgendeinem Grund den Fokus benötigt, verwenden Sie eine erweiternde Schaltfläche oder ein dialog-Element mit den showModal()- oder show()-Methoden.
Lesereihenfolge
Das HTML für einen Tooltip eines Links kann wie folgt aussehen:
<p>
<a href="https://www.seitenadresse.de/">
Linktext
<span class="tooltip" hidden> hilfreicher, aber nicht notwendiger Tooltip </span>
</a>
</p>
Das HTML für den Link ist noch nicht optimal, denn der Tooltip ist Teil des Linktextes. Für eine klassische Gestaltung mit absoluter Positionierung vereinfacht dieser Aufbau aber die Gestaltung erheblich. In Schritt 2 dieses Beitrags werden wir das HTML für den Link leicht verändern und den Tooltip außerhalb des Links platzieren, um ihn dann mit Anchor Positioning an die richtige Stelle zu bringen.
Für ein Eingabefeld muss der Tooltip ebenfalls auf dem auslösenden Element folgen. Der folgende Code zeigt ein Eingabefeld, gefolgt von einem zusätzlichen Text, der als Tooltip angezeigt werden soll:
<p>
<label for="me">Vollständiger name</label>
<input type="text" autocomplete="name" id="me">
<span class="form-help" hidden> Geben Sie Ihren Vornamen gefolgt von Ihrem Nachnamen ein</span>
</p>
Der mit dem hidden-Attribut versteckte Text soll angezeigt werden, sobald das Formularfeld fokussiert wird. Es ist der erste Schritt zur Erstellung eines autorendefinierten, barrierefreien Tooltips als Alternative zum title-Attribut.
Das aria-describedby-Attribut
In unserem Codebeispielen ist der Zusammenhang zwischen auslösendem Element und Tooltip offensichtlich, doch muss dieser Zusammenhang auch für Assistenztechnologien ermittelbar sein. Anforderungen an autorendefinierte Komponenten finden Sie im ARIA Authoring Practices Guide (APG). Der APG empfiehlt Folgendes für Tooltips:
- Das Element, das als Container für den Tooltip dient, erhält die Rolle "Tooltip".
- Das Element, das den Tooltip auslöst, verweist mit dem
aria-describedby-Attribut auf das Element mit dem Tooltip. Dazu benötigt das Element mit dem Tooltip eine ID.
Mit dem aria-describedby-Attribut können wir für den Link festlegen, welcher Tooltip damit verknüpft ist, und bestimmen ihn als "accessible description" für den Link. Die Beschreibung wird Nutzenden von Screenreadern ausgegeben, sobald der Link mit der Tabulatortaste fokussiert wird.
<p>
<a aria-describedby="foo" href="https://www.seitenadresse.de/">
Linktext
<span id="foo" class="tooltip" hidden> hilfreicher, aber nicht notwendiger Tooltip </span>
</a>
</p>
Wie nützlich die Rolle "tooltip" für autorendefinierte Tooltips ist, ist unklar. Derzeit macht es für Assistenztechnologien keinen Unterschied, ob der Tooltip die Rolle "tooltip" hat oder nicht. Die Beziehung zwischen Link und Tooltip wird ausschließlich durch das aria-describedby-Attribut hergestellt. Die Rolle wurde im Codebeispiel bewusst weggelassen. Die konkreten Anforderungen an die Rolle sind noch nicht finalisiert.
Auch Tooltips für Formularelemente müssen mit den Formularelementen verknüpft werden. Um den Tooltip besser mit CSS absolut positionieren zu können, können Sie zusätzlich ein span-Element mit einer Klasse wie im folgenden Codebeispiel hinzufügen:
<p>
<label for="me">Vollständiger name</label>
<span class="tooltipAbsolutPositionieren">
<input aria-describedby="too" type="text" autocomplete="name" id="me">
<span id="too" class="form-help" hidden> Geben Sie Ihren Vornamen gefolgt von Ihrem Nachnamen ein</span>
</span>
</p>
Im nächsten Schritt werden die Tooltips ein- und ausgeblendet und mit CSS positioniert.