Der Fokus-Zustand ist der Zustand eines Elements, das gerade die Tastatureingabe bekommt. Ihn sichtbar zu lassen, ist eine Frage der Bedienbarkeit.
- Fokus-Zustand (:focus)
Zustand des Elements, das gerade Tastatureingaben entgegennimmt.
Beispiel: „Der Fokus-Zustand wandert mit der Tabulatortaste von Element zu Element.“
Warum er sichtbar bleiben muss
Wer eine Seite mit der Tastatur bedient, sieht am Fokusrahmen, wo er gerade ist. Ohne ihn ist die Seite praktisch unbedienbar. Die Browser bringen deshalb einen eigenen mit, und der wird regelmäßig entfernt, weil er nicht ins Design passt.
:focus-visible {
outline: 2px solid #0078ff;
outline-offset: 2px;
}Der Unterschied zu :focus-visible
Der Einwand gegen den Rahmen war, dass er auch nach einem Mausklick erschien. Genau das löst :focus-visible: Der Browser entscheidet, ob der Fokus sichtbar sein sollte, und zeigt ihn bei Tastaturbedienung, nicht nach jedem Klick. Damit entfällt der Grund, ihn ganz abzuschalten.