CSS Focus Outline
Der Rahmen muss mitwandern
Buttons, Links, Scrollbereiche: überall braucht der Tastaturfokus eine sichtbare Kante.
Fokusrahmen
Sechs Zeilen, die über den Rahmen entscheiden
Was der Rahmen leisten muss.
- Fehlt outline: none ohne Ersatz. Der Fokus verschwindet auf allen Bedienelementen.
- Fehlt Der Rahmen klebt am Text und wird vom Nachbarelement überdeckt.
- Fehlt Ein scrollbarer Kasten ist nicht fokussierbar und zeigt deshalb keinen Rahmen.
- Richtig outline mit 2 Pixeln Stärke, dazu outline-offset für den Abstand.
- Richtig :focus-visible zeigt den Rahmen bei der Tastatur, nicht bei jedem Klick.
- Richtig Der Scrollbereich bekommt tabindex="0" und damit einen eigenen Rahmen.
Aus dem Prüfbericht
Eine Regel, ein Kasten
Kritisch Der scrollbare Kasten bekommt nie den Rahmen Regel scrollable-region-focusable
Ein Kasten mit overflow: auto ist ohne tabindex nicht fokussierbar. Mit tabindex="0" nimmt er den Fokus und zeigt Ihre outline.
Zum Mitnehmen
Der Fokusrahmen, korrigiert
Eine Regel im CSS, ein Attribut im HTML.
Korrektur in 3 Schritten ansehen
Den Rahmen sichtbar zurückholen
Ohne Ersatz nimmt outline: none jedem Bedienelement die Markierung. :focus-visible zeigt sie bei der Tastatur, der Abstand hält sie frei.
KorrekturvergleichSchritt 1 · CSS Vorher
:focus { outline: none; }Nachher
:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 3px; }Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab. Auf jedem Bedienelement steht ein sichtbarer Rahmen.
Den Rahmen nicht abschneiden
overflow: hidden beschneidet die Kante am Rand. Sichtbarer Überlauf und etwas Innenabstand lassen den ganzen Rahmen 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 auf das erste Element der Zeile. Der Rahmen ist rundum vollständig.
Den Scrollbereich fokussierbar machen
Erst mit tabindex="0" nimmt der Kasten den Fokus. Dann zeigt er Ihren Rahmen und lässt sich mit den Pfeiltasten scrollen.
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. Der Rahmen erscheint, Pfeil ab bewegt den Inhalt.