Schritt für Schritt zu barrierefreien Tooltips

veröffentlicht in 2015

zuletzt bearbeitet in

HTML und ARIA (1/3)

Wenn Sie Ihren Tooltip neu aufbauen, ist es immer am besten, mit HTML zu beginnen. Wir werden mit zwei Beispielen arbeiten, einen Link und ein Eingabefeld.

Folgendes ist für das HTML eines Tooltips zu beachten:

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. Alternativ benötigen Sie möglicherweise das popovertarget-Attribut für das auslösende Element.

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 die Gestaltung sehr. 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="foo">Vollständiger name</label>
<input type="text" autocomplete="name" id="foo">
<span class="tooltip" hidden> Geben Sie Ihren Vornamen gefolgt von Ihrem Nachnamen ein</span>
</p>

Der mit dem hidden-Attribut versteckten Text soll angezeigt werden, sobald das Formularfeld fokussiert wird. Er ist der erste Schritt zur Erstellung eines autorendefinierten, barrierefreien Tooltips als Alternative zum Title-Attribut.

In unserem Codebeispielen ist der Zusammenhang zwischen Link und Tooltip offensichtlich, doch muss dieser Zusammenhang auch für Assistenztechnologien ermittelbar sein. Mögliche Anforderungen an autorendefinierte Komponenten finden Sie im ARIA Authoring Practices Guidespan> (APG) oder, falls der APG keine konkreten Vorgaben für Ihren Code enthält, in der ARIA-Spezifikation. Der APG empfiehlt Folgendes für Tooltips:

Mit dem aria-describedby-Attribut legen wir fest, welcher Tooltip mit einem Link 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="me" href="https://www.seitenadresse.de/">
                      Linktext
<span id="me" 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. Eine Diskussion dazu finden Sie auf GitHub.

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 auch ein span-Element mit einer Klasse wie im folgenden Codebeispiel hinzufügen:

<p>
<label for="foo">Vollständiger name</label>
<span class="tooltipAbsolutPositionieren">
<input aria-describedby="bar" type="text" autocomplete="name" id="foo">
<span id="bar" class="tooltip" hidden> Geben Sie Ihren Vornamen gefolgt von Ihrem Nachnamen ein</span>
</span>
</p>