Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Schritt für Schritt zu barrierefreien Tooltips veröffentlicht in 2015

Tooltips (auch Sprechblasentext, Quickinfo, Mouse-Over oder Popup-Text genannt) werden in HTML mit einem title-Attribut erzeugt. Tooltips dienen der Beschreibung eines Elements und fügen dem Element einen Kontext in der Form eines kurz eingeblendeten Textes bei.

Obwohl das title-Attribut seit 20 Jahren in HTML spezifiziert ist, ist es bis heute nicht barrierefrei nutzbar. Zum einen unterstützen Browser die Zugänglichkeit per Tastatur nicht und zum anderen unterliegen Tooltips meist einer Zeitbeschränkung von wenigen Sekunden. Deshalb müssen die anzuzeigenden Texte auf andere Weise bereitgestellt werden. Die Tastaturbedienbarkeit kann mit CSS gelöst werden; richtig zugänglich und nutzbar werden Tooltips aber erst mit JavaScript und ARIA.

Ausgangssituation

Mit HTML wird ein Tooltip wie folgt mit dem title-Attribut erzeugt:

<a href="http://bf-w.de/knowhow/msaa/" title="Die Barrierefreiheit einer Webanwendung ist davon abhängig, wie sie über die Accessibility-API des Betriebssystems den Accessibility-Tree mit Informationen befüllt.">
  ARIA und die Accessibility-API
</a>

Das title-Attribut wird von Screenreadern nur teilweise unterstützt, d.h. in manchen Screenreadern wird ein solcher Tooltip ergänzend zum Linktext ausgegeben. Nichtsdestotrotz wird ein title-Attribut unter Verwendung der Tab-Taste von Browsern nicht angezeigt.

Anzeige des Tooltips bei Fokus mittels CSS

Grundsätzlich kann die Anzeige des title-Attributs bei Fokus als generated content per CSS vorgegeben werden. Eine solche Darstellung ist aber auch unabhängig des title-Attributs und kann auf vielfacher Weise realisiert werden. Um gleichwertige Anzeigen für Maus- und Tastaturnutzer zu gewährleisten, ist die Bereitstellung des Tooltip-Inhalts mit einem benutzerdefiniertem Attribut geeigneter:

<a href="http://bf-w.de/knowhow/msaa/" data-title="Die Barrierefreiheit einer Webanwendung ist davon abhängig, wie sie über die Accessibility-API des Betriebssystems den Accessibility-Tree mit Informationen befüllt.">
  ARIA und die Accessibility-API
</a>

Im CSS kann der Inhalt des neuen Attributs bei Fokus und Mausberührung als generated content definiert werden:

a {
  position:relative;
}
a[data-title]:after {
  position: absolute;
  left: 0;
  top: 2.8em;
  background-color: #FFFFF;
  color: #484848;
  border: 2px solid #c0c0c0;
  height: 2.5em;
  line-height: 2.5em;
  padding: 0 1.25em;
  content: attr(data-tooltip);
  white-space: nowrap;
  display: none;
}
a[data-title]:focus:after,
a[data-title]:hover:after {
  display: block;
}

Damit wird der Tooltip bei Maus- und Tastaturbedienung gleichermaßen angezeigt.

Ein Tooltip unter einem fokussierten Link.

Tooltip-Text im Fließtext

Das title-Attribut alleine ist für Tastaturnutzer nicht zugänglich. Die kontextabhängige Darstellung mittels generated content ist in Screenreadern aber ebenfalls problematisch, denn per CSS erzeugte Inhalte können von Screenreadern nicht immer ausgewertet werden. Ein Tooltip kann erst barrierefrei werden können, wenn der einzublendende Text im Fließtext des HTML steht. Dafür gibt es verschiedene Ansätze.

Tooltip als Teil des Linktextes

Um den Tooltip im Fließtext unterzubringen, kann er als Teil des Linktextes ausgespielt werden:

<a href="http://bf-w.de/knowhow/msaa/">
  ARIA und die Accessibility-API
  <span class="unsichtbar">
    Die Barrierefreiheit einer Webanwendung ist davon abhängig, wie sie über die Accessibility-API des Betriebssystems den Accessibility-Tree mit Informationen befüllt.
  </span>
</a>

Die Klasse "unsichtbar" dient dazu, den Text des Tooltips außerhalb des sichtbaren Bildschirmbereichs zu schieben, z.B. mit:

.unsichtbar {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
    overflow:hidden;
}

Bei Fokus und Hover können die Werte der Klasse per CSS zurückgesetzt oder die Klasse kann per JavaScript entfernt werden.

Diese Lösung ist für die Tastaturnutzung und in Screenreadern zugänglich und sicher die einfachste Umsetzungstechnik. Allerdings handelt es sich bei Tooltips um kontextabhängige Informationen, die bei Mausberührung und Fokus bereitgestellt werden sollten. Die vorstehende Lösung ist für Screenreadernutzer insofern nachteilig, als die Tooltip-Inhalte immer vorhanden sind (und für überflüssige Informationen sorgen können). Außerdem werden dadurch alle Linktexte mit einem integrierten Tooltip sehr lang.

Tooltip kontextabhängig verfügbar machen

Nach der ARIA-Spezifikation sind Widgets mit dem role-Attribut zu identifizieren. Das Element, das durch den Tooltip beschrieben wird, wird über das aria-describedby-Attribut mit dem Tooltip verknüpft. Bei Tooltips handelt es sich um zusätzliche Informationen, die bei Hover und Fokus eingeblendet werden und dabei niemals den Fokus erhalten. Deshalb sollte der Text des Tooltips außerhalb des Links stehen:

<div id="tooltip-widget">
  <a href="http://bf-w.de/knowhow/msaa/">
    ARIA und die Accessibility-API
  </a>
  <span role="tooltip">
    Die Barrierefreiheit einer Webanwendung ist davon abhängig, wie sie über die Accessibility-API des Betriebssystems den Accessibility-Tree mit Informationen befüllt.
  </span>
</div>

Aufbauend auf das HTML ist die Vorgehensweise für die Darstellung am Bildschirm wie folgt:

  1. Die Tooltips werden in ihrem eingeblendeten Zustand mit CSS gestaltet, bleiben aber zunächst sichtbar.
  2. In einem JavaScript erhalten alle Tooltips ein aria-hidden="true", damit sie nicht im Accessibility-Tree erscheinen. Durch Event-Handler kann bei Fokus und Hover das Attribut zurückgesetzt oder entfernt werden.
  3. Das CSS wird ergänzt um die Deklaration:

    [role=tooltip][aria-hidden=true] {
      display:none;
    }

Diese Vorgehensweise sichert die gleichwertige Nutzbarkeit in Screenreadern und am Bildschirm, indem die Tooltips nur bei Fokus und Hover verfügbar sind. Für Screenreader ist es so,

Weitere Optimierung

Bei Bedarf können weitere Optimierungen vorgenommen werden. Natürlich hängt das von der individuellen Gestaltung einer Webseite ab, welche Effekte berücksichtigt werden. Vor dem Hintergrund der Barrierefreiheit ist besonders die Tastaturbedienung zu berücksichtigen: