Zusammenfassung

  • Der W3C-Entwurf von Februar 2018 unterschied mit :focus den aktiven Fokus von dem mit :focus-visible sichtbaren Hinweis, den der Browser für nützlich hält.
  • Spätere Entwürfe beschrieben Tastaturwege, Texteingabe, den Wunsch nach dauerhafter Anzeige und programmatische Fokuswechsel als Anhaltspunkte. Der Browser kennt den Weg; die Website entwirft das Zeichen.

Ein Designer klickt auf eine Schaltfläche. Plötzlich trägt sie einen Umriss, den niemand in der Grafikabteilung bestellt hat. Ein paar Zeichen CSS, und der Ring ist weg. Der Test mit der Maus gelingt. Dann kommt jemand mit der Tastatur und drückt Tab. Die Schaltfläche hat nun den Fokus, aber die Seite verschweigt den Standort. Enter wird zum Los mit unbekanntem Gewinn. Der Ring wurde entlassen, weil man ihn sah. Sichtbarkeit stand allerdings in seiner Stellenbeschreibung.

Der W3C-Entwurf vom 2. Februar 2018 trennt die Zustände. :focus gilt für das Element, das Eingaben annimmt. :focus-visible gilt, wenn der Browser zusätzlich entscheidet, dass dieser Zustand erkennbar sein soll. Ein Textfeld braucht einen Hinweis: Dort landen die nächsten Buchstaben. Ein per Tastatur angesteuerter Knopf braucht ihn ebenfalls: Der Leser kann nicht an einem Mauszeiger ablesen, wo Tab angekommen ist. Nach einem direkten Mausklick liefert der Zeiger selbst einen Teil dieser Information. Der Knopf ist derselbe; der Anreiseweg ist es nicht.

Der Browser kennt diesen Weg und die Einstellungen des Nutzers. Die Website kennt ihre Farben und die Stärke eines gut sichtbaren Randes. Entfernt sie pauschal outline für :focus, landet die Information des Browsers im Papierkorb, bevor sie jemand nutzen kann. Gibt sie :focus-visible einen kräftigen Stil, entsteht aus der Browserentscheidung ein ordentliches Leitschild. Der alte Standardring darf eine neue Jacke bekommen. Zur Arbeit erscheinen muss er trotzdem.

Im Entwurf vom 21. November 2018 steht ein erstaunlich forsches Beispiel: ein dicker gelber Umriss für passende Elemente, bei Links zusätzlich ein gelber Hintergrund. Damit muss niemand die zufällige Optik des Browsers als einzig mögliche Gestaltung hinnehmen. Die Seite kann einen eigenen, durchgehenden Hinweis zeichnen, der zwischen zwanzig Links noch auffällt. Gelb ist hier keine Pflichtfarbe, sondern eine Demonstration von Entschlossenheit.

Auch die möglichen Anhaltspunkte wurden ausgeführt. Wer in den Einstellungen um einen ständig sichtbaren Fokus bittet, soll ihn sehen. Ein Eingabefeld bekommt Zeichen und braucht Orientierung. Eine Tastatur oder ein anderes Gerät ohne Zeiger verlangt meist eine sichtbare Positionsmeldung; der direkte Zeigerklick liefert einen anderen Hinweis. Der Text bietet Browsern Vorschläge, damit sie Umgebung und Nutzervorlieben berücksichtigen können. Die Website erhält die Entscheidung über den Selektor.

Richtig interessant wird es, wenn ein Skript den Fokus umsetzt. Jemand öffnet mit der Tastatur ein Fenster; das Programm legt den Fokus auf dessen erste Aktion. Der Novemberentwurf empfiehlt, den sichtbaren Hinweis mitzunehmen, sofern der vorherige Fokus einen hatte. Wer beim Eintritt in einen neuen Bereich plötzlich seine Position verliert, wird kaum dankbar über den aufgeräumten Rand sein. Der Entwurf beschreibt auch die Fortsetzung eines Wegs, der am Zeiger begann. Der Browser merkt sich die Reise und beurteilt den neuen Knopf im Zusammenhang.

Der Entwurf vom 7. Mai 2022 fasst diese Arbeitsteilung besonders klar: :focus trifft stets das fokussierte Element; :focus-visible trifft es dann, wenn der Browser den Fokus anzeigen will. Die Website kann den Hinweis verändern, ohne das Anzeigen selbst neu zu regeln. Der Text empfiehlt Browsern außerdem, :focus-visible für ihre voreingestellte Fokushervorhebung zu benutzen. So folgen der eigene Stil und der Browserstil demselben Takt, statt um den Knopf zu streiten.

Der Entwurf vom 11. November 2022 behält das Modell bei. Die W3C-Veröffentlichungsgeschichte hält die Etappen fest. Aus einer winzigen CSS-Schreibweise wurde ein brauchbarer Handel: Der Klick darf ruhig aussehen; der Tastaturweg bekommt an jeder wichtigen Station ein sichtbares Schild. Die Website bestimmt das Schild. Der Leser findet den nächsten Schritt.

Der Fokusring ist zurück. Diesmal braucht er sich für seine Anwesenheit nicht zu entschuldigen.