Tipps & Tricks für Webworker
HTML, CSS, Bildformate, Geodata
Auf Webseiten ist es sinnvoll, Benutzern anzuzeigen, welches Element gerade den Fokus hat. Das führt mitunter zu unerwünschten Details im Layout. Mit :focus-visible können Sie in modernen Browsern exiblere Lösungen umsetzen.
Üblicherweise können nur solche Elemente den Fokus erhalten, mit denen ein Benutzer interagieren kann. Das sind in erster Linie Links, Buttons und Formular-Elemente wie input, textarea und Selectboxen. Über das Attribut tabindex werden auch andere Elemente fokussierbar. Der Fokus ist ein wichtiges Hilfsmittel für Nutzer, die eine Webseite über die Tastatur bedienen. Ein Maus-Nutzer weiß, auf welches Element er gerade geklickt hat. Ein Tastatur-Nutzer bewegt sich u.a. mit der Tab-Taste über die Webseite, mit der er der Reihe nach interaktive Elemente anspringt. Es muss also ein visuelles Feedback geben, damit der Tastatur-Nutzer weiß, wo er sich gerade be ndet. Dafür benutzen Browser eine interne Heuristik, um zu bestimmen, ob ein fokussiertes Element einen Indikator erhalten soll oder nicht. Wenn Sie auf einer Webseite ohne eigenes CSS im Firefox mit der Tab-Taste zu einem Link springen, wird der Browser den Link mit einer gepunkteten Umrandung anzeigen (siehe Abbildung auf der nächsten Seite oben). Klicken Sie hingegen direkt auf den Link, erscheint diese Umrandung nicht. Wenn Sie wiederum zuerst die Tastatur benutzen und dann mit der Maus auf den Link klicken, erscheint wieder die Umrandung.
Die verschiedenen Browser handhaben diese Heuristik und das Design des Indikators etwas unterschiedlich. Webentwickler, die sich nicht mit Barrierefreiheit auskennen, neigen manchmal dazu, die Outline absichtlich zu entfernen. Etwa über: :focus { outline: none; }
Das ist immer eine schlechte Idee. Denn so wissen Tastatur-Nutzer gar nicht mehr, wo sie sich aktuell be nden bzw. welchen Link sie anklicken. Die Anweisung führt dazu, dass die Webseite unnötig nicht mehr barrierefrei ist.
Wenn Ihnen die Outline nicht gefällt, ist es sinnvoll, den :focus- Zustand anders zu gestalten; aber so, dass er immer erkennbar ist. Eine übliche Variante ist, den Pseudoklassen :hover und :focus die gleichen Styles zu geben. Etwa: a { text-decoration: underline; } a:hover, a:focus { text-decoration: none; }
Diese Lösung funktioniert für einfache Fälle. An anderen Stellen kann das aber zu unerwünschten gra schen Details führen. Nehmen wir einen Slider, bei dem der Benutzer die Elemente über Buttons nach rechts und links bewegen kann. Sie können die Buttons wie oben mit einem eigenen Design für die Zustände :hover und :focus ausstatten. Der :focus bleibt allerdings erhalten, wenn der Benutzer auf einen Button gedrückt hat und dann die Maus wegbewegt. Das ist nun zwar kein großer Fehler, aber zumindest nicht ideal. Besser wäre es, wenn wir irgendwie unterscheiden könnten, ob ein Nutzer die Tastatur verwendet oder nicht.
Zu diesem Zweck hat Mozilla die (nicht-standardisierte) Pseudoklasse :-moz-focusring eingeführt. Daraus wurde im aktuellen Editor’s Draft für die CSS Selectors Level 4 die Pseudoklasse :focus-visible. Laut Spezi kation ist das Ziel von :focus-visible, Webentwicklern „die Möglichkeit zu geben, klar identi zierbare Fokussierungsstile anzubieten, die sichtbar sind, wenn ein Benutzer wahrscheinlich verstehen muss, wo der Fokus liegt, und die in anderen Fällen nicht sichtbar sind“( bit.ly/32kSJlg). Effektiv führt das dazu,