CSS hover focus

CSS hover focus: Maus und Tastatur getrennt sehen.

Ein :hover-Effekt beweist keinen Tastaturzugang. Vergleichen Sie Zustände, Zusatzinhalt und Verweildauer – ohne identische Gestaltung vorauszusetzen.

Eigene Website prüfen Zustandslabor live testen ↓

01 / Zustandslabor

Vier Eingaben simulieren, die Lücke sofort sehen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Zustandslabor Ihnen.

Zustandslabor

Vier Eingaben. Ein erreichbarer Inhalt.

1/4erfüllt

Live-Vorschau

Lieferoption

VerhaltenFokus ergänzt HoverEscape schließtHinweis überfahrbarOhne Zeitlimit

Paritätsmatrix

Gleicher Zugang, eigener Zustand

Rückmeldungsichtbarfehltnicht nötig

Zusatzinhaltöffnetfehltper Klick

Schließenfehltfehltfehlt

Verweildauerkritischstabilstabil

Codefix

Hover steht allein

.hilfe:hover {
  outline: 3px solid currentColor;
}

.hilfe:hover + .hinweis {
  display: block;
}

02 / Der Unterschied

Ein Muster ist der Anfang, nicht die Website.

Hover ohne Fokus schließt aus
Zusatzinhalte, die nur bei Mausberührung erscheinen, erreichen Tastatur- und Touch-Nutzende nicht. In Menüs, Info-Icons und Karten bleibt das unbemerkt.
Die eigene Seite hat mehr Zustände
Der Website-Check prüft Ihre Seiten auf automatisch erkennbare Barrieren rund um Tastatur und Fokus – nicht nur das eine Muster aus dem Labor.
Fundstellen statt Bauchgefühl
Jeder Befund nennt Seite, Vorkommen und den nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Jetzt die eigene Seite prüfen.

Das Zustandslabor prüft ein Muster. Der Website-Check prüft Ihre Seiten auf Fokus- und weitere automatisch erkennbare Barrieren.

1URL
2Auswahl
3Prüfung
4Ergebnis

Lieferoption

Hover ohne Fokus schließt aus

Die eigene Seite hat mehr Zustände

Fundstellen statt Bauchgefühl