1.4.13 Inhalte bei Hover oder Fokus

1. Was ist das Ziel dieses Kriteriums?

Tooltips, Aufklappmenüs und kleine 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 – bevor du sie lesen konntest? Oder wenn sie genau das verdecken, was du gerade lesen wolltest? Menschen, die mit Bildschirmlupe arbeiten, oder Menschen mit motorischen Einschränkungen stehen dann vor einem echten Problem.

Das Ziel von Erfolgskriterium 1.4.13 ist es, dass Inhalte, die bei Hover oder Fokus erscheinen, vorhersehbar und kontrollierbar bleiben. Wenn Inhalte durch Überfahren mit der Maus oder durch den Tastaturfokus eingeblendet werden, müssen alle sie wahrnehmen und mit ihnen umgehen können.

2. Was fordert das Erfolgskriterium genau?

Das Kriterium gilt für zusätzliche Inhalte, die erscheinen, wenn ein Element per Maus überfahren oder per Tastatur fokussiert wird, und wieder verschwinden, wenn Hover oder Fokus wegfallen. Dazu gehören eigene Tooltips, Untermenüs und andere nicht-modale Pop-ups.

Sobald solche Inhalte erscheinen, müssen drei Bedingungen erfüllt sein:

Schließbar (Dismissible): Es gibt einen Mechanismus, um den zusätzlichen Inhalt zu schließen, ohne Maus oder Tastaturfokus zu bewegen – typischerweise die Escape-Taste. Ausnahme: Der Inhalt meldet einen Eingabefehler oder verdeckt bzw. ersetzt keine anderen Inhalte.

Überfahrbar (Hoverable): Wenn der Inhalt per Maus-Hover erscheint, kann der Mauszeiger auf den zusätzlichen Inhalt bewegt werden, ohne dass dieser verschwindet.

Beständig (Persistent): Der zusätzliche Inhalt bleibt sichtbar, bis Hover oder Fokus entfernt werden, die Nutzer:innen ihn schließen oder seine Information nicht mehr gültig ist.

Ausnahme: Inhalte, deren Darstellung der Browser steuert und die du nicht veränderst – zum Beispiel die Tooltips des HTML-Attributs title.

Nicht erfasst sind Elemente, die selbst erst beim Fokus sichtbar werden, etwa Skiplinks – sie sind kein zusätzlicher Inhalt, sondern das fokussierte Element selbst.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du arbeitest mit einer starken Bildschirmvergrößerung und siehst nur einen kleinen Ausschnitt der Seite. Ein Tooltip erscheint, aber die Hälfte liegt außerhalb deines Sichtbereichs. Versuchst du, den Mauszeiger zum Tooltip zu bewegen, um ihn vollständig zu lesen, verschwindet er sofort.

Gut umgesetzte Hover- und Fokus-Inhalte schaffen Barrierefreiheit, weil sie:

• Menschen mit Sehbehinderungen ermöglichen, zusätzliche Inhalte in ihrem eigenen Tempo zu erfassen – auch mit Bildschirmlupe
• Menschen mit motorischen Einschränkungen erlauben, versehentlich ausgelöste Inhalte wieder zu schließen, ohne die Maus präzise wegbewegen zu müssen
• Menschen mit stark vergrößertem Mauszeiger erlauben, den Inhalt wegzuklicken, wenn der Zeiger ihn verdeckt
• Menschen mit kognitiven Einschränkungen vorhersehbare Interaktionen bieten und ihnen Zeit zum Lesen lassen
• Tastaturnutzer:innen dieselben Informationen zugänglich machen wie Mausnutzer:innen

Das Kriterium reduziert Frustration und macht Websites für alle angenehmer – auch für Menschen, die einfach etwas länger lesen.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Die meisten Probleme lassen sich mit durchdachtem Design und einigen Zeilen JavaScript lösen. Hier sind bewährte Umsetzungstipps:

Schließbar umsetzen:

• Biete die Escape-Taste als Schließmechanismus an
• Positioniere zusätzliche Inhalte möglichst so, dass sie keine wichtigen Bereiche verdecken
• Halte ausreichend Abstand zu anderen interaktiven Elementen

Überfahrbar gewährleisten:

• Lass den zusätzlichen Inhalt sichtbar, wenn der Mauszeiger darüber bewegt wird
• Vermeide Lücken zwischen Auslöser und zusätzlichem Inhalt oder überbrücke sie mit einer kurzen Verzögerung beim Ausblenden
• Teste mit verschiedenen Mauszeigergrößen

Beständig sicherstellen:

• Lass Inhalte nur verschwinden, wenn Hover oder Fokus wegfallen, die Nutzer:innen sie schließen oder die Information nicht mehr gilt
• Verwende keine automatischen Zeitlimits, nach denen der Inhalt von selbst verschwindet
• Berücksichtige unterschiedliche Lesegeschwindigkeiten

Technische Umsetzung:

// Beispiel: Tooltip, der alle drei Bedingungen erfüllt
const trigger = document.getElementById('hilfe-button');
const tip = document.getElementById('hilfe-tooltip');
let hideTimer;

function show() {
  clearTimeout(hideTimer);
  tip.hidden = false;
}
function hideSoon() {
  hideTimer = setTimeout(() => { tip.hidden = true; }, 300);
}

// Anzeigen bei Hover und bei Tastaturfokus
trigger.addEventListener('mouseenter', show);
trigger.addEventListener('focus', show);

// Überfahrbar: Der Tooltip bleibt, wenn die Maus hineinwandert
tip.addEventListener('mouseenter', show);
trigger.addEventListener('mouseleave', hideSoon);
tip.addEventListener('mouseleave', hideSoon);
trigger.addEventListener('blur', () => { tip.hidden = true; });

// Schließbar: Escape blendet aus, ohne Maus oder Fokus zu bewegen
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') tip.hidden = true;
});

Werkzeuge und bewährte Praktiken:

• Verknüpfe den Tooltip mit dem Auslöser über aria-describedby, damit Screenreader ihn vorlesen
• Teste mit Bildschirmvergrößerung (z. B. 400 % Browser-Zoom oder der Lupe des Betriebssystems)
• Teste jede Hover-Interaktion auch mit der Tastatur – was bei Hover erscheint, sollte auch bei Fokus erscheinen (siehe Tastatur)
• Achte darauf, dass eingeblendete Inhalte den Fokus nicht verdecken (siehe Fokus nicht verdeckt (Minimum))

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 Unternehmen.

1. Zielgruppe erweitern Vorhersehbare Hover- und Fokus-Interaktionen machen deine Website für Menschen mit ganz unterschiedlichen Behinderungen nutzbar. Das schließt auch vorübergehende Einschränkungen ein – etwa die Bedienung mit nur einer Hand oder mit Touchpad statt Maus.

2. Weniger Fehlbedienungen Menüs, die nicht beim kleinsten Zucken der Maus zuklappen, und Tooltips, die nichts dauerhaft verdecken, machen die Navigation entspannter. Das führt zu weniger Abbrüchen – besonders in komplexen Oberflächen wie Shops, Konfiguratoren oder Webanwendungen.

3. Nutzererfahrung für alle verbessern Kontrollierbare Einblendungen reduzieren Frust und Supportanfragen. Davon profitieren auch Menschen ohne Behinderungen.

Und nicht zuletzt: rechtliche Anforderungen. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Produkte und Dienstleistungen für Verbraucher:innen, etwa Online-Shops. Technischer Maßstab ist die EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist – 1.4.13 gehört dazu. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht verpflichtet. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des 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.

Note 1: Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute [HTML].

Note 2: Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

Note 3: This criterion applies to content that appears in addition to the triggering component itself. Since hidden components that are made visible on keyboard focus (such as links used to skip to another part of a page) do not present additional content they are not covered by this criterion.

Kurz gesagt: Inhalte, die bei Hover oder Fokus erscheinen, müssen sich ohne Bewegen von Maus oder Fokus schließen lassen, mit der Maus überfahrbar sein und so lange sichtbar bleiben, bis Nutzer:innen sie nicht mehr brauchen.