CSS Hover und Focus
Die Maus sieht mehr als die Tastatur
Menüs, Karten, Scrollbereiche: bei Hover sichtbar, beim Tabben nicht.
Zwei Wege, ein Ergebnis
Hover und Fokus müssen dieselbe Tür öffnen
Drei typische Oberflächen zeigen, welcher Fokus-Selektor jeweils passt.
:hover+:focus-within=Panel bleibt offen4 Befunde in Navigation und Formular.
:hover+:focus-within=Aktion bleibt sichtbarDie Prüfquote zeigt den erfassten Anteil.
:hover+:focus-visible=Hinweis erscheint:focus-within gehört an einen Container, wenn der Fokus in dessen Nachfahren wandert. :focus-visible gestaltet das fokussierte Element, wenn der Browser einen sichtbaren Fokus anzeigt. Der Selektor folgt dem Fokusort
Schauen Sie zuerst, wo der Fokus nach dem Öffnen tatsächlich liegt.
:focus-visibleLink, Button, Feld:focus-withinMenü, Karte, Formulargruppe:hoverNie als einziger Zugang zu einer FunktionDie Paarung im Stylesheet
Gruppieren Sie Selektoren nach ihrem Ergebnis. So bleibt beim Ändern der Darstellung sichtbar, dass Zeiger und Fokus zusammengehören.
.nav-item:hover .panel,
.nav-item:focus-within .panel {
visibility: visible;
}
.card:hover .action,
.card:focus-within .action {
visibility: visible;
}
.term:hover + .tooltip,
.term:focus-visible + .tooltip,
.tooltip:hover {
visibility: visible;
}
a:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}Wenn zusätzlicher Inhalt erscheint
Überdeckenden Inhalt schließen, ohne Fokus oder Zeiger zu verschieben.
Der Zeiger erreicht den eingeblendeten Inhalt, ohne dass er verschwindet.
Der Inhalt bleibt bis zum Verlassen, Schließen oder Ungültigwerden stehen.
Aus dem Prüfbericht
Eine Regel, ein Kasten
Kritisch Der Scrollbereich reagiert nur auf das Mausrad Regel scrollable-region-focusable
Ein Kasten mit overflow: auto scrollt mit dem Zeiger, ist ohne tabindex aber nicht erreichbar. tabindex="0" öffnet ihn beiden Wegen.
Zum Mitnehmen
Hover und Fokus, korrigiert
Zwei Regeln im CSS, ein Attribut im HTML.
Korrektur in 3 Schritten ansehen
Jede Hover-Regel um den Fokus ergänzen
Was der Zeiger zeigt, muss auch die Tastatur zeigen. :focus-visible ergänzt dieselbe Gestaltung für den Tastaturweg.
KorrekturvergleichSchritt 1 · CSS Vorher
.karte:hover { border-color: #1b1b1b; }Nachher
.karte:hover, .karte:focus-visible { border-color: #1b1b1b; }Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie über die Karten. Sie ändern sich wie beim Überfahren mit der Maus.
Den eingeblendeten Teil offen halten
:focus-within hält den eingeblendeten Teil sichtbar, solange der Fokus in der Karte steht. Sonst verschwindet er beim Tabben sofort.
KorrekturvergleichSchritt 2 · CSS Vorher
.karte:hover .aktion { visibility: visible; }Nachher
.karte:hover .aktion, .karte:focus-within .aktion { visibility: visible; }Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie in die Karte hinein. Die Aktion bleibt sichtbar, bis der Fokus sie verlässt.
Den Scrollbereich für die Tastatur öffnen
Mit dem Mausrad scrollt der Kasten längst. Erst tabindex="0" macht ihn auch mit Tab und den Pfeiltasten erreichbar.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="protokoll" style="max-height:3rem;overflow:auto"> <p>Schritt 01 · Kreis setzen</p> </div>Nachher
<div class="protokoll" style="max-height:3rem;overflow:auto" tabindex="0" role="region" aria-label="Schrittprotokoll"> <p>Schritt 01 · Kreis setzen</p> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie zum Kasten. Pfeil ab bewegt den Inhalt, Umschalt und Tab führen zurück.