title-Attribut für Zusatzinformationen

Bedeutung von Titelattributen

Durch das title-Attribut können von technischer Seite zu HTML-Elementen oder Bereichen textuelle Zusatzinformationen angeboten werden. Die Maus muss dazu beim Surfen über das entsprechende Element geführt werden (Hover-Effekt oder Mouse over Effekt).

Der Einsatz des Titelattributs bedarf begleitender Maßnahmen, weil dessen Wahrnehmbarkeit von der Fähigkeit zur Mausbedienung oder der Konfiguration der benutzten Technologien abhängt. Bei restriktiver Beschränkung auf bestimmte Einsatzbereiche und dem Einsatz von Konzepten komplementärer Wahrnehmbarkeit sind Zusatzinformationen im Titelattribut jedoch zulässig und zweckmäßig.

Problematiken von Titelattributen

Mangelnde Tastaturbedienbarkeit

Das Hauptproblem von Titelattributen aus der Sicht der Barrierefreiheit ist deren Wahrnehmbarkeit für Menschen, die alleine auf die Tastatur angewiesen sind. Das Konzept des Titelattributs besteht darin, dass durch eine Mausbewegung Zusatzinformationen bereitgestellt werden.

Wer mit einem Screen Reader oder auf Grund motorischer Beeinträchtigungen bloß auf der Tastatur arbeitet, kann die Zusatzinformation aus dem Attribut nicht oder nur bedingt auslesen. Screen Reader stellen etwa lediglich in der Grundkonfiguration das Auslesen einer Abkürzung aus dem Text eines allfällig vorhandenen Titelattributs zur Verfügung.

Im Titelattribut darf daher keine exklusive Zusatzinformation versteckt werden. Ein im Kontext gut formulierter Text benötigt kein title-Attribut.

Störungen durch eingeblendete Titel

Ein vorhandenes Titelattribut blendet einen Text ein, wenn die Maus über ein Element bewegt wird oder sich zufällig gerade darunter befindet. Zwangsläufig kann dies zum Überblenden relevanter Inhalte führen und eine Beeinträchtigung der visuellen Wahrnehmbarkeit darstellen.

Titelattribute sollten daher auf das nötige Minimum beschränkt bleiben. Es stellt etwa eine unnötige Mühe dar und ist potentiell störend, wenn ein Linktext redundant im Titelattribut wiederholt wird.

Wahrnehmung auf Touch Screens

Die Darstellung verfügbarer Titelattribute auf Touch Screens habe ich noch nicht geprüft, ist in diesem Kontext jedoch auch relevant.

Komplementäre Wahrnehmungsangebote

Bedeutung komplementärer Wahrnehmungsangebote

Der Inhalt des Titelattributs ist für einige Bedienungskonzepte nur mühsam oder überhaupt nicht zugänglich. Beim Einsatz des Titelattributs sind daher ergänzend Verfahren erforderlich, die den Inhalt zumindest an einer Stelle der Webseite allgemein zugänglich machen.

Darstellung im Text

Um den Anforderungen an die Barrierefreiheit gerecht zu werden, müssen die Erläuterungen im Titelattribut auch im Fließtext einer Webseite dargestellt werden. Konkret sollte etwa beim ersten Vorkommen einer Abkürzung die Bedeutung im Text ausgeschrieben werden, damit sie in der Folge im Titelattribut ausreicht.

<p>Die Europäische Union (EU) … </p>
…
<p>Eine Richtlinie der <abbr title="Europäische Union">EU</abbr> legt fest, …</p>"

Referenzieren mittels aria-describedby

Mit dem Befehl aria-describedby kann auf eine im Text verfügbare Erklärung für Screen Reader referenziert werden. Allerdings steht dieser Befehl nur für Links, Schalter und andere Formularelemente zur Verfügung.

Zweckmäßige Einsatzbereiche

Titelattribute sind für folgende Elemente zweckmäßig, sofern im Text zuvor schon eine allgemein wahrnehmbare Darstellung des Titelinhalts erfolgt ist:

Abkürzungen

Die Bedeutung der Abkürzung kommt in das Titelattribut.
<abbr title="Europäische Union">EU</abbr>
WCAG 2.1 Erfolgskriterium 3.1.4 Abkürzungen

Fachausdrücke

Die Bedeutung des Fachausdrucks im Kontext kommt in das Titelattribut, sofern dies mit wenigen Worten möglich ist.
<span title="Überflüssige Wiederholung">Redundanz</span>

Fremdsprachige Ausdrücke

Die Bedeutung des Fremdworts im Kontext kommt in das Titelattribut.
<span lang="en" title="Barrierefreiheit">Accessibility</span>

Aus der Perspektive der Web Content Accessibility Guidelines (WCAG) fallen diese Anwendungen des Titelattributs wohl allesamt in die Konformitätsstufe AAA (Triple A).

Visuelle Wahrnehmbarkeit vorhandener Titelattribute

Es ist natürlich zweckmäßig und hilfreich, wenn das Vorhandensein von TITLE-Attributen wahrnehmbar ist. Folgende Eintragung in der CSS-Datei kann beispielsweise für alle Elemente mit einem TITLE-Attribut eine gepunktete Unterstreichung visuell anzeigen:

*[title] {
  border-bottom: darkred dotted 1px;
  cursor: help;
}

Die Anweisung cursor: help; bewirkt, dass beim Überstreichen die Cursordarstellung auf den Hilfecursor wechselt.

In den folgenden Beispielen können Sie den visuellen Unterschied durch die Verwendung dieser CSS-Anweisungen wahrnehmen:

• Abkürzung BSVT ohne Titelattribut
• Abkürzung BSVT mit Titelattribut

Anmerkung

Falls Sie beim Überstreichen des Schriftzugs BSVT in diesem Beispiel keinen Titel für die Abkürzung eingeblendet bekommen, liegt das an Ihren Browsereinstellungen.

Überlappung durch große Mauszeiger

Betriebssysteme und Vergrößerungsprogramme erlauben es, Mauszeiger zu vergrößern, damit sie besser sichtbar werden. Leider führt das oft dazu, dass der Text des TITLE-Attributs vom Mauszeiger überlappt und dadurch schwerer lesbar wird.

In der Vergrößerungssoftware ZoomText lässt sich die Mauszeigervergrößerung mittels der Tastenkombination CapsLock + P ein- und ausschalten. Auf diese Weise können visuelle Überlappungen kurzfristig beseitigt werden.

Ich kenne leider bei vergrößerter Zeigerdarstellung im Betriebssystem kein ähnlich einfaches Verfahren. Es bleibt vielleicht nur, auf die Vergrößerung des Mauszeigers über die Systemsteuerung zu verzichten. Vielleicht kennt aber jemand eine Lösung und schickt sie mir? Denkbar wären etwa Mauszeiger, die nicht von rechts unten, sondern von links oder oben auf das Element zeigen.