Direkt zum Hauptinhalt

WCAG 2.2 · Level AA · WahrnehmbarBarrierefreiheit als Cloud-Service

1.4.13 Inhalt bei Hover oder Fokus

Tooltips und Popups müssen schließbar, sichtbar bleibend und verwerfbar sein.

Jetzt testenAlle Kriterien

Auf einen Blick

Was bedeutet dieses Kriterium?

Kurz gesagt

Tooltips und Popups müssen schließbar, sichtbar bleibend und verwerfbar sein.

Aufwand

Mittel umzusetzen, mittel erledigt

Betrifft Rolle

Entwicklung

Konformitätsstufe

Level AA

EN 301 549

Abschnitt 9.1.4.13 · BITV 2.0 · BFSG

Verständlich erklärt

Was heißt 1.4.13 für die Praxis?

Tooltips und Popups müssen schließbar, sichtbar bleibend und verwerfbar sein.

Der Zusatzinhalt muss: (1) vom Benutzer schließbar sein (Escape-Taste), (2) sichtbar bleiben, wenn der Zeiger darüber bewegt wird, (3) nicht automatisch verschwinden.

Technisch formuliert: Wenn zusätzlicher Inhalt bei Hover oder Fokus erscheint, müssen bestimmte Bedingungen erfüllt sein.

Wer ist betroffen?

Ein Alltagsbeispiel

Wenn Websites Inhalte nur auf einem einzigen Weg anbieten — etwa nur als Bild oder nur als Audio — schließen sie Menschen aus, die diesen einen Weg nicht nutzen können. Das Erfolgskriterium 1.4.13 verhindert solche Ausschlüsse und sorgt dafür, dass Informationen in alternativen Formen zugänglich sind. Besonders betroffen sind: Tastaturnutzer, Menschen mit motorischen Einschränkungen.

Die Lösung

So setzen Sie es richtig um

Der Zusatzinhalt muss: (1) vom Benutzer schließbar sein (Escape-Taste), (2) sichtbar bleiben, wenn der Zeiger darüber bewegt wird, (3) nicht automatisch verschwinden.

Wenn zusätzlicher Inhalt bei Hover oder Fokus erscheint, müssen bestimmte Bedingungen erfüllt sein.

Umsetzung

Schritt für Schritt

Konkrete Anleitung zur praktischen Umsetzung dieses Kriteriums.

  1. 1

    Escape-Taste testen

    Kann der Tooltip/Popup mit Escape geschlossen werden?

  2. 2

    Hover über den Inhalt prüfen

    Bleibt der Tooltip sichtbar, wenn Sie den Mauszeiger darauf bewegen?

Typische Fehler

Das wird häufig falsch gemacht

Diese Fehler sehen wir in der Praxis besonders oft — und wie Sie sie vermeiden.

Darauf verlassen, dass alle gleich wahrnehmen

Entwickler gehen oft davon aus, dass alle Nutzer die Inhalte genauso sehen oder hören wie sie selbst. Das ist ein grundlegender Denkfehler — viele Menschen nutzen Hilfsprogramme, die Inhalte ganz anders präsentieren.

Nur an die Mehrheit der Nutzer denken

80%-Lösungen sind keine Lösung, wenn die verbleibenden 20% die Seite überhaupt nicht nutzen können. Barrierefreiheit bedeutet: niemand wird ausgeschlossen.

Selbst prüfen

So testen Sie dieses Kriterium

Mit diesen Methoden können Sie selbst prüfen, ob Ihre Webseite das Kriterium erfüllt.

Screenreader-Test

VoiceOver (Mac: Cmd+F5), NVDA (Windows, kostenlos) oder TalkBack (Android). Navigieren Sie durch die Seite und prüfen Sie, ob alle Inhalte sinnvoll vorgelesen werden.

CSS deaktivieren

In Chrome DevTools oder über Browser-Erweiterungen CSS ausschalten. Ist die Seite noch strukturiert und verständlich lesbar?

Automatisierte Prüfung

Tools wie Pa11y, axe DevTools oder WAVE finden viele Probleme dieses Kriteriums zuverlässig. Ergänzende manuelle Tests bleiben wichtig.

Häufige Fragen

Fragen und Antworten

Ist Level AA für mich relevant?▾
Ja, wenn Ihre Website in Deutschland oder der EU betrieben wird. Öffentliche Stellen sind durch BITV 2.0 an Level AA gebunden. Private Anbieter müssen seit Juni 2025 durch das BFSG ebenfalls Level AA einhalten, wenn sie Produkte oder Dienstleistungen im Netz anbieten.
Wie kann ich prüfen, ob meine Seite dieses Kriterium erfüllt?▾
Nutzen Sie einen Test-Mix: automatisierte Tools wie Pa11y oder axe DevTools finden viele Probleme zuverlässig, aber nicht alle. Ergänzen Sie mit manuellen Tests — Tastaturnavigation, Screenreader-Test und eine visuelle Prüfung der relevanten Seitenbereiche.