SELF-Wiki: Maus- und Tastaturinteraktionen

[Gunnar Bittersmann]

@@Matthias Scharwies

Maus- und Tastaturinteraktionen

Abschnitt focus vs focus-visible ist veraltetes Wissen. Und falsch erzählt.

„Früher wurde die standardmäßige outline oft per CSS entfernt, um ein ‚schöneres‘ Erscheinungsbild zu erzielen. Für Tastaturnutzer bedeutete das jedoch, dass fokussierte Elemente nicht mehr erkennbar waren.“

Das wurde nicht nur „früher“ so gemacht, sondern ist heute leider immer noch verbreitet. Falsch war es schon immer – auch früher. Vielleicht kann man das durch andere Wortwahl noch deutlicher hervorheben.

„Um dieses Problem zu lösen, haben Browser-Hersteller den Pseudoklassen-Selektor :focus-visible eingeführt.“

Ja, aber nicht nur das. Die Browser verwenden das auch seit längerem schon im internen Stylesheet. Die Fokusmarkierung wird bei Mausbedienung überhaupt nicht mehr angezeigt; das „schöne“ Erscheinungsbild also gar nicht gestört.

Das sollte auch in dem Wiki-Artikel gesagt werden: Dass das Problem des Erscheinungsbilds von früher heute gar nicht mehr besteht – und damit überhaupt kein Grund mehr, die standardmäßige Outline zu entfernen.

a:focus {
  outline: none; /* default focus outline wird entfernt */
}

im Beispielcode ist nicht nur völlig überflüssig; es vermittelt ohne Not schlechte Praxis. Das sollte rückstandslos entfernt werden.

a:focus-visible {
  outline: 2px solid blue;   /* custom focus für Tastaturnutzer */
  outline-offset: 4px;
  border-radius: 4px;
}

geht ja für sich allein. Insbesondere outline-offset sehe ich als Verbesserung des Browser-Defaults.

In meinem Beispiel hab ich noch den Darkmode gleich mitbedacht. Sollte man das generell in den Wiki-Beispielen tun oder lenkt das zu sehr vom jeweiligen Feature ab?

🖖 Live long and prosper