WCAG 2.1 - 1.4.13
Content on Hover or Focus
Wenn das Empfangen und anschließende Entfernen des Zeiger-Hover- oder Tastaturfokus zusätzliche Inhalte sichtbar und dann wieder unsichtbar macht, gelten folgende Punkte:
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.13 - Content on Hover or Focus?Was Bedeutet das Success Criterium 1.4.13 - Content on Hover or Focus?Warum ist es so wichtig, das Success Criterium 1.4.13 - Content on Hover or Focus zu beachten?Was hat das Success Criterium 1.4.13 - Content on Hover or Focus mit dem BFSG zu tun?Lösungen für 1.4.13 - Content on Hover or Focus anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.13 - Content on Hover or Focus?Was steht in den Guidelines zum Success Criterium 1.4.13 - Content on Hover or Focus?
Implementationshinweise
- Dismissible: Ein Mechanismus steht zur Verfügung, um den zusätzlichen Inhalt abzulehnen, ohne den Zeigerhover oder den Tastaturfokus zu verschieben, es sei denn, der zusätzliche Inhalt kommuniziert einen Eingabefehler oder verdeckt bzw. ersetzt keinen anderen Inhalt;
- Hoverable: Wenn das Hover des Zeigers den zusätzlichen Inhalt auslösen kann, kann der Zeiger über den zusätzlichen Inhalt bewegt werden, ohne dass der zusätzliche Inhalt verschwindet;
- Persistent: Der zusätzliche Inhalt bleibt sichtbar, bis der Hover- oder Fokusauslöser entfernt wird, der Benutzer ihn schließt oder die Informationen nicht mehr gültig sind.
Was Bedeutet das Success Criterium 1.4.13 - Content on Hover or Focus?
Content on Hover or Focus (zu Deutsch: "Inhalt bei Hover oder Fokus") verlangt, dass zusätzlicher Inhalt, der beim Überfahren mit der Maus (Hover) oder beim Fokussieren mit der Tastatur angezeigt wird (z. B. Tooltips, Menüeinblendungen), bestimmten Anforderungen entspricht:
- Der zusätzliche Inhalt muss sichtbar bleiben, solange der Benutzer den Mauszeiger über dem Element oder dem eingeblendeten Inhalt platziert oder das Element fokussiert bleibt.
- Der zusätzliche Inhalt muss entfernbar sein, OHNE dass der Nutzer den Fokus verschieben oder die Maus bewegen muss – z. B. durch einen "Schließen"-Button oder die ESC-Taste.
- Der zusätzliche Inhalt darf nicht einfach automatisch verschwinden, etwa durch unbeabsichtigte Mausbewegungen oder nach Zeitablauf.
Technische Anforderungen im Überblick:
- Für alle Inhalte, die per Hover oder Fokus eingeblendet werden, gilt:
- Der Inhalt muss per Tastatur und Maus erreichbar und nutzbar sein.
- Der eingeblendete Inhalt bleibt sichtbar, bis:
- Nutzer:in den Fokus oder Hover verliert,
- Nutzer:in den Inhalt entfernt (z. B. ESC),
- Oder der Inhalt nicht mehr relevant ist.
Warum ist es so wichtig, das Success Criterium 1.4.13 - Content on Hover or Focus zu beachten?
Viele Nutzer:innen – insbesondere mit motorischen Einschränkungen oder kognitiven Beeinträchtigungen – haben Schwierigkeiten mit Inhalten, die schnell oder unbeabsichtigt verschwinden. Wenn z. B. eine Menüeinblendung oder ein Tooltip verschwindet, bevor alle Informationen gelesen oder eine Auswahl getroffen werden konnte, ist der Inhalt nicht zugänglich. Das gilt speziell bei der Bedienung mit der Tastatur, aber auch bei ungenauen Mausbewegungen. Barrierefreiheit sorgt dafür, dass alle Nutzer:innen – unabhängig von ihren Fähigkeiten oder ihrem Eingabegerät – Inhalte verlässlich erreichen und nutzen können.
Was hat das Success Criterium 1.4.13 - Content on Hover or Focus mit dem BFSG zu tun?
Das BFSG (Barrierefreiheitsstärkungsgesetz) verlangt, dass Websites alle Anforderungen der EN 301 549 – und damit der WCAG-Kriterien – umsetzen. Das Kriterium 1.4.13 ist zwingend erforderlich, weil ohne dessen Erfüllung Menschen mit Behinderungen diskriminiert und Informationen ausgeschlossen werden. Ein Verstoß gegen 1.4.13 führt dazu, dass Nutzer:innen mit Einschränkungen wichtige Informationen nicht erhalten oder nicht nutzen können – eine Seite wäre somit klar nicht BFSG-konform.
Lösungen für 1.4.13 - Content on Hover or Focus anhand von Codebeispielen
Falscher Code
<button title="Klicken Sie hier, um mehr zu erfahren">Mehr Info</button>Korrekter Code
<!-- Barrierefreier Tooltip, bleibt beim Fokussieren/Überfahren und ist per ESC oder Button schließbar -->
<button aria-describedby="info-1" onfocus="showTooltip()" onblur="hideTooltip()" onmouseover="showTooltip()" onmouseout="hideTooltip()">Mehr Info</button>
<div id="info-1" role="tooltip" hidden>
<span>Zusätzliche Informationen zum Thema.</span>
<button aria-label="Tooltip schließen" onclick="hideTooltip()">×</button>
</div>
// showTooltip und hideTooltip sorgen dafür, dass der Tooltip geöffnet und mit ESC oder per Button geschlossen werden kann.Im ersten (schlechten) Beispiel wird ein Tooltip allein über das title-Attribut angezeigt. Dieses ist oft nicht per Tastatur erreichbar, bleibt meist nur kurz sichtbar und kann nicht kontrolliert geschlossen werden. Im barrierefreien Beispiel bleibt der Tooltip sichtbar, solange das Element im Fokus ist, und bietet eine klare Möglichkeit zum Schließen, auch per Tastatur.
Wie löse ich Verstöße gegen das Success Criterium 1.4.13 - Content on Hover or Focus?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.