Standardisierung von Fokusstilen mit CSS Custom Properties

Nehmen Sie sich jetzt zwei Minuten Zeit und besuchen Sie Ihr aktuelles Projekt im Browser. Dann sollten Sie, nur mit der Tabulatortaste, zwischen interaktiven Elementen wie Schaltflächen, Links und Formularelementen navigieren können.

Wenn Sie sehend sind, sollten Sie den Fokus visuell verfolgen können, während er zwischen den Elementen im DOM springt. Aber wenn Sie keine visuelle Veränderung sehen oder nur eine kaum wahrnehmbare visuelle Veränderung, dann haben Sie das Eine gefunden, das Sie tun können, um einen *großen* Unterschied für Ihre Besucher zu machen.

Wir werden uns eine Technik ansehen, um Ihre Fokusstile in Ihrem Projekt durch die Verwendung von CSS Custom Properties besser verwaltbar zu machen und lernen einen modernen CSS-Fokusselektor kennen. Aber zuerst lernen wir mehr darüber, warum sichtbare Fokusstile wichtig sind.

Erfüllung der WCAG-Kriterien für Fokusstile

Sichtbare Fokusstatus sind in den Web Content Accessibility Guidelines (WCAG) Success Criterion 2.4.7 – Focus Visible abgedeckt. Das *Verständnisdokument* für 2.4.7 gibt im Sinne dieses Kriteriums Folgendes an:

Der Zweck dieses Erfolgskriteriums ist es, einer Person zu helfen zu wissen, welches Element den Tastaturfokus hat. Es muss einer Person möglich sein zu wissen, welches Element unter mehreren Elementen den Tastaturfokus hat.

In den kommenden WCAG 2.2 wird ein neues Kriterium hinzugefügt, um "wie sichtbar der Fokusindikator sein sollte" zu verdeutlichen. Obwohl derzeit im Entwurf, ist es ein positiver Schritt, sich mit den Richtlinien in 2.4.11 – Focus Appearance (Minimum) vertraut zu machen und diese anzuwenden, um Ihre Fokusstile noch heute zu verbessern.

Verwaltung von Fokusstilen mit CSS Custom Properties

Eine Technik, die ich dieses Jahr zu verwenden begonnen habe, ist die Aufnahme des folgenden Setups frühzeitig in meiner Kaskade auf den primären grundlegenden interaktiven Elementen.

:is(a, button, input, textarea, summary) {
  --outline-size: max(2px, 0.08em);
  --outline-style: solid;
  --outline-color: currentColor;
}

:is(a, button, input, textarea, summary):focus {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}

Dies bindet benutzerdefinierte Eigenschaften an, die Ihnen die Flexibilität geben, nur Teile des Umrissstils nach Bedarf anzupassen, um sicherzustellen, dass der Fokus sichtbar bleibt, wenn sich der Kontext des Elements ändert.

Für --outline-size verwenden wir max(), um sicherzustellen, dass mindestens ein Wert von 2px vorhanden ist, während die Möglichkeit besteht, relativ zur Komponente zu skalieren (z. B. eine große Schaltfläche oder ein Link in einer Überschrift) basierend auf 0.08em.

Eine Eigenschaft, mit der Sie hier möglicherweise nicht vertraut sind, ist outline-offset, die den Abstand zwischen dem Element und dem Umriss definiert. Sie können sogar eine negative Zahl angeben, um den Umriss einzurücken, was sehr nützlich sein kann, um den Kontrast des Fokusstils sicherzustellen. In unserem Regelwerk haben wir diese Eigenschaft so eingestellt, dass sie eine optionale benutzerdefinierte Eigenschaft von --outline-offset akzeptiert, damit sie bei Bedarf angepasst werden kann, aber ansonsten hat sie den Fallback, um die --outline-size zu entsprechen.

Verbesserungen für das Aussehen des Umrisses

Im Laufe meiner Karriere wurde ich sowohl gebeten, Umrisse zu entfernen, als auch habe ich sie selbst entfernt, weil sie als "hässlich" galten.

Es gibt jetzt zwei Gründe, warum outline absolut keinen Grund haben sollte, entfernt zu werden (zusätzlich zu den Auswirkungen auf die Barrierefreiheit).

1. outline folgt jetzt border-radius in Chromium und Firefox! 🎉 Das bedeutet, Sie können das Entfernen von Hacks in Betracht ziehen, die Sie möglicherweise verwendet haben, wie z. B. das Vortäuschen mit einem box-shadow (was eine weitere positive Auswirkung auf die Barrierefreiheit hat, indem sichergestellt wird, dass Fokusstile für Benutzer des Windows High Contrast Theme nicht entfernt werden).
2. Mit :focus-visible können wir den Browser bitten, Heuristiken zu verwenden, um Fokusstile nur dann anzuzeigen, wenn er Eingabemodalitäten erkennt, die einen sichtbaren Fokus erfordern. Vereinfacht ausgedrückt bedeutet dies, dass Maussutzer sie beim Klicken nicht sehen, Tastaturnutzer sie beim Tabulieren weiterhin sehen.

Es ist wichtig zu beachten, dass form-Elemente immer einen Fokusstil anzeigen – sie sind vom Verhalten von :focus-visible ausgenommen.

Also verbessern wir unser Regelwerk, um Folgendes hinzuzufügen, um :focus-visible einzuschließen. Wir behalten den anfänglichen :focus-Stil bei, den wir bereits für ältere Browser definiert haben, damit er nicht verloren geht, nur für den Fall.

:is(a, button, input, textarea, summary):focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}

Aufgrund der Art und Weise, wie Browser Selektoren verwerfen, die sie nicht verstehen, müssen wir diese separaten Regeln erstellen und sie nicht kombinieren, auch wenn sie dieselben outline-Eigenschaften definieren.

Schließlich benötigen wir auch diese etwas seltsam aussehende :focus:not(:focus-visible)-Regel, die die regulären Fokusstile für Browser entfernt, die :focus-visible unterstützen.

:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

Bemerkenswert ist, dass die neuesten Versionen von Chromium und Firefox dazu übergegangen sind, :focus-visible als Standardmethode zur Anwendung von Fokusstilen auf interaktiven Elementen zu verwenden, und wurde vor kurzem standardmäßig in Webkit aktiviert, so dass es bald in Safari stabil sein sollte! Unsere Regeln sind weiterhin gültig, da wir das outline-Aussehen anpassen.

Für weitere Anleitungen zu sichtbaren Fokusstilen empfehle ich Sara Soueidans erstaunliche und gründliche Anleitung zu Fokusindikatoren, da sie das kommende Kriterium 2.4.11 berücksichtigt.

Fokusstil-Demo

Dieses Pen zeigt Beispiele für jedes dieser interaktiven Elemente und wie Anpassungen mit den benutzerdefinierten Eigenschaften angewendet werden können, einschließlich einiger Swaps für den Dark Mode. Abhängig von Ihrer Browserunterstützung sehen Sie möglicherweise keinen Fokusstil aufgrund von :focus-visible, es sei denn, Sie verwenden die Tabulatortaste.

Ein letzter Hinweis: button ist ein einzigartiges interaktives Element, wenn es um Fokusstile geht, da es zusätzliche Überlegungen zu seinen Zuständen gibt, insbesondere wenn Sie sich allein auf die Farbe verlassen. Hilfe dazu finden Sie im Palette-Generator meines Projekts ButtonBuddy.dev.