1. Was ist das Ziel dieses Kriteriums?
Tooltips, Drop-down-Menüs und Pop-ups gehören heute zum Web wie das Smartphone zur Hosentasche. Aber was passiert, wenn solche Inhalte plötzlich auftauchen und genauso schnell wieder verschwinden – ohne dass du sie richtig lesen konntest? Menschen mit Sehbehinderungen, die Bildschirmlupen verwenden, oder Nutzer mit motorischen Einschränkungen stehen dann buchstäblich vor einem verschwindenden Problem.
Das Ziel von Erfolgskriterium 1.4.13 der WCAG ist es, dass Hover- und Focus-Inhalte vorhersagbar und kontrollierbar bleiben. Wenn Inhalte durch Maus-Hover oder Tastaturfokus ausgelöst werden, müssen sie so gestaltet sein, dass alle Nutzer sie wahrnehmen und mit ihnen interagieren können.
2. Was fordert das Erfolgskriterium genau?
Das Kriterium gilt für alle zusätzlichen Inhalte, die durch Maus-Hover oder Tastaturfokus ausgelöst werden und wieder verschwinden, wenn der Auslöser entfernt wird. Dazu gehören Custom-Tooltips, Untermenüs und andere modale Pop-ups.
Sobald solcher Inhalt erscheint, müssen drei Bedingungen erfüllt sein:
Dismissible (Abweisbar): Es muss einen Mechanismus geben, um den zusätzlichen Inhalt zu schließen, ohne Maus oder Tastaturfokus zu bewegen – es sei denn, der Inhalt zeigt einen Eingabefehler an oder verdeckt keine anderen Inhalte.
Hoverable (Überschwebbar): Wenn Maus-Hover den Inhalt auslöst, muss der Mauszeiger über den zusätzlichen Inhalt bewegt werden können, ohne dass dieser verschwindet.
Persistent (Beständig): Der zusätzliche Inhalt bleibt sichtbar, bis der Hover- oder Focus-Auslöser entfernt wird, der Nutzer ihn explizit schließt oder die Information nicht mehr gültig ist.
Ausnahme: Browser-eigene Tooltips (wie HTML title-Attribute) sind von diesem Kriterium ausgenommen, da ihr Verhalten vom User Agent und nicht vom Autor kontrolliert wird.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du arbeitest mit einer 400%-Bildschirmvergrößerung und siehst nur einen winzigen Ausschnitt der Seite. Ein Tooltip erscheint, aber die Hälfte ist außerhalb deines Sichtbereichs. Versuchst du, den Mauszeiger zum Tooltip zu bewegen, um ihn vollständig zu lesen, verschwindet er sofort.
Content on Hover or Focus schafft Barrierefreiheit, weil es:
- Menschen mit Sehbehinderungen ermöglicht, zusätzliche Inhalte in ihrem eigenen Tempo zu erfassen
- Nutzern mit motorischen Einschränkungen genügend Zeit gibt, versehentlich ausgelöste Inhalte zu schließen
- Personen mit großen Mauszeigern (durch Systemeinstellungen oder assistive Technologien) erlaubt, verdeckte Inhalte vollständig zu betrachten
- Menschen mit kognitiven Einschränkungen vorhersagbare Interaktionen bietet
- Screen-Reader-Nutzern hilft, die Maus-Rückmeldungen benötigen
Das Kriterium reduziert Frustration und macht Websites für alle benutzerfreundlicher – auch für Menschen in lauten Umgebungen oder mit schwacher Internetverbindung.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Die meisten Probleme lassen sich mit durchdachtem Design und einigen JavaScript-Zeilen lösen. Hier sind bewährte Umsetzungstipps:
Dismissible umsetzen:
- Biete die Escape-Taste als universellen Schließmechanismus an
- Positioniere zusätzliche Inhalte so, dass sie keine wichtigen Bereiche verdecken
- Verwende ausreichend Abstand zu anderen interaktiven Elementen
Hoverable gewährleisten:
- Lass den zusätzlichen Inhalt sichtbar, wenn der Mauszeiger darüber bewegt wird
- Achte darauf, dass zwischen Auslöser und zusätzlichem Inhalt keine "toten Zonen" entstehen
- Teste mit verschiedenen Mauszeigergrößen
Persistent sicherstellen:
- Lass Inhalte nur durch explizite Nutzeraktion oder invalide Information verschwinden
- Verwende keine automatischen Timeouts für wichtige Informationen
- Berücksichtige unterschiedliche Lesegeschwindigkeiten
Technische Umsetzung:
// Beispiel: Tooltip mit allen drei Eigenschaften
const tooltip = document.getElementById('tooltip');
const trigger = document.getElementById('trigger');
// Dismissible: Escape-Taste
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') tooltip.style.display = 'none';
});
// Hoverable: Über Tooltip bewegen möglich
tooltip.addEventListener('mouseenter', () => {
tooltip.style.display = 'block';
});
// Persistent: Nur bei expliziter Aktion schließen
trigger.addEventListener('mouseleave', (e) => {
if (!tooltip.contains(e.relatedTarget)) {
tooltip.style.display = 'none';
}
});Tools und Best Practices:
- Nutze ARIA-Attribute wie
role="tooltip"für bessere Screenreader-Unterstützung - Teste mit verschiedenen Bildschirmvergrößerungen (bis 400%)
- Verwende CSS-Klassen für fokussierbare Hover-Inhalte
- Dokumentiere Tastaturkürzel für Nutzer
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Auch bei Erfolgskriterium 1.4.13 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.
1. Zielgruppe erweitern Vorhersagbare Hover- und Focus-Interaktionen machen deine Website für Menschen mit verschiedensten Behinderungen nutzbar. Das schließt auch temporäre Einschränkungen ein – wie die Nutzung mit nur einer Hand oder in schwierigen Umgebungen.
2. Suchmaschinenoptimierung verbessern Gut strukturierte, zugängliche Tooltips und Menüs werden von Suchmaschinen besser erfasst. Zusätzliche Inhalte, die programmatisch korrekt implementiert sind, erweitern deine indexierbare Textbasis.
3. Nutzererfahrung für alle verbessern Kontrollierbare Hover-Effekte reduzieren versehentliche Aktionen und machen die Navigation entspannter. Das führt zu weniger Abbrüchen und höherer Nutzerzufriedenheit – besonders auf Touch-Geräten und bei komplexeren Interfaces.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3C
Success Criterion 1.4.13 Content on Hover or Focus (Level AA)
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.