CSS Keyboard Focus
Zeigen, wohin der nächste Tastendruck geht
Kopfzeile, Formular, Scrollbereich: jeder Tabstopp braucht eine sichtbare Markierung.
Fokus unter Belastung
Ein Ring, der auf jeder Station sichtbar bleibt
Folgen Sie dem Tastaturweg über helle, dunkle und scrollende Flächen.
Konzeptioneller Fokusweg durch eine Projektseite
aktueller Tastaturfokus
Seiten gefunden
Prüfung läuft
Drei Stellen, an denen sichtbarer Fokus verloren geht
overflow: hidden kappt alles außerhalb des Containers, auch die Outline.
scroll-margin-block hält Sprung- und Fokusziele unter Overlays frei.
Testen Sie jeden Fokuszustand auf allen verwendeten Flächen.
Die vollständige Grundregel
Zwei kontrastreiche Farbbänder funktionieren auf wechselnden einfarbigen Flächen. Im erzwungenen Farbmodus bleibt die Outline erhalten; der Schatten darf dort entfallen.
Löschen Sie vorhandene outline: none-Regeln. Ergänzen Sie keinen Gegen-Selektor für Mausfokus: Der Browser entscheidet per Heuristik, wann :focus-visible nötig ist. Texteingaben können den Ring deshalb auch nach einem Klick zeigen.
:root {
--focus-inner: #ffffff;
--focus-outer: #151514;
}
:focus-visible {
outline: 3px solid var(--focus-inner);
outline-offset: 2px;
box-shadow: 0 0 0 7px var(--focus-outer);
}
.kopfzeile {
overflow: visible;
padding-block: 0.5rem;
}
main[tabindex="-1"],
.protokoll {
scroll-margin-block: 6rem;
}
.protokoll {
max-block-size: 12rem;
overflow: auto;
}
@media (forced-colors: active) {
:focus-visible {
outline: 3px solid Highlight;
outline-offset: 3px;
box-shadow: none;
}
}Die zwei HTML-Ergänzungen
<main id="inhalt" tabindex="-1">
<!-- Seiteninhalt -->
</main>
<div class="protokoll" tabindex="0" role="region"
aria-label="Schrittprotokoll">
<!-- Mehr Inhalt als in den sichtbaren Bereich passt -->
</div>tabindex="-1" macht main zum programmatischen Sprungziel, ohne einen zusätzlichen Tabstopp einzubauen. tabindex="0" nimmt den Scrollbereich in die sequenzielle Navigation auf; Rolle und Name erklären dieses Ziel.
So prüfen Sie den ganzen Weg
- Tabben Sie vorwärts und rückwärts. Jede Station zeigt dauerhaft einen Ring.
- Prüfen Sie helle, dunkle und bildhafte Hintergründe sowie alle Fehlerzustände.
- Aktivieren Sie einen Sprunglink. Das fokussierte Ziel bleibt unter fixierten Leisten sichtbar.
- Fokussieren Sie den Protokollbereich und scrollen Sie mit Pfeil- und Bildtasten.
- Aktivieren Sie den erzwungenen Farbmodus. Die Systemfarbe markiert weiterhin den Fokus.
Quellen für Gestaltung und Abnahme
Aus dem Prüfbericht
Eine Regel, ein übersprungener Halt
Kritisch Tab überspringt das Protokollfenster Regel scrollable-region-focusable
Der Kasten scrollt, ist aber nicht fokussierbar. Mit tabindex="0", role="region" und einem aria-label wird er ein benannter Tabstopp.
Zum Mitnehmen
Der Tastaturweg, korrigiert
Eine sichtbare Markierung, ein Tabstopp mehr.
Korrektur in 3 Schritten ansehen
Die Markierung wieder einschalten
outline: none entfernt die Markierung überall. :focus-visible bringt sie für den Tastaturweg zurück, der Abstand hält sie frei vom Text.
KorrekturvergleichSchritt 1 · CSS Vorher
a, button { outline: none; }Nachher
a:focus-visible, button:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 2px; }Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie fünfmal Tab. Jeder Halt ist deutlich markiert.
Die Markierung nicht abschneiden
Eine beschnittene Markierung ist nur halb zu sehen. Sichtbarer Überlauf und etwas Innenabstand lassen sie ganz stehen.
KorrekturvergleichSchritt 2 · CSS Vorher
.kopfzeile { overflow: hidden; padding: 0 1rem; }Nachher
.kopfzeile { overflow: visible; padding: 0.5rem 1rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie ins Suchfeld. Der Rahmen ist auf allen vier Seiten zu sehen.
Den Scrollbereich zum Tabstopp machen
Der Kasten verbirgt Zeilen unter seiner Kante. Mit tabindex="0" wird er erreichbar, role und aria-label geben ihm einen Namen.
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 bis zum Kasten. Er wird markiert, Pfeil ab zeigt die restlichen Zeilen.