Fokus auf Fokus-Styles

Nicht jeder nutzt eine Maus, um im Internet zu surfen. Wenn Sie diesen Beitrag auf einem Smartphone lesen, ist das offensichtlich! Ebenso ist hervorzuheben, dass es andere Eingabeformen gibt, die Menschen nutzen, um Dinge zu erledigen. Mit diesen Eingabeformen kommt die Notwendigkeit für Fokus-Styles.

Menschen

Menschen sind kompliziert. Wir verhalten uns nicht unbedingt konsistent, noch treffen wir immer Entscheidungen, die aus der Perspektive eines Außenstehenden Sinn ergeben. Manchmal tun wir etwas einfach nur... um etwas zu tun. Wir langweilen uns leicht: wir basteln, stoßen und stochern an Dingen herum, um sie besser an unsere Bedürfnisse anzupassen, unabhängig von ihrer ursprünglichen Absicht.

Menschen sind auch sterblich. Wir können krank und verletzt werden. Manchmal beides gleichzeitig. Manchmal ist es nur für eine kurze Zeit, manchmal ist es dauerhaft. Unabhängig davon bedeutet es, dass wir manchmal Dinge, die wir tun oder tun wollen, nicht auf die gewohnte Weise tun können.

Menschen leben auch in der Welt. Manchmal befinden wir uns in einer Umgebung, in der externe Faktoren uns daran hindern, etwas auf die gewohnte Weise zu tun. Waren Sie schon einmal bei Ihren Eltern während der Feiertage und mussten deren uralten, aber noch funktionierenden Desktop-Computer benutzen? So etwas Ähnliches.

Eingabe

Sowohl Maus- als auch Touch-Eingaben liefern eine Anzeige für Interaktion. Für Touch ist es offensichtlich: Ihr Finger fungiert als Brücke, die Ihren Geist mit dem Element auf dem Bildschirm verbindet, das Sie aktivieren möchten. Für Mäuse dient ein Cursor als Stellvertreter für Ihren Finger.

Diese sind jedoch nicht die einzigen uns zur Verfügung stehenden Eingabeformen. Tastaturen sind allgegenwärtig und können fast alles leisten, was Maus- oder Touch-Eingaben bewältigen können, vorausgesetzt, Sie kennen die richtigen Tasten, die in der richtigen Reihenfolge gedrückt werden müssen. Manchmal ist es sogar einfacher und schneller als die Verwendung einer Maus!

Denken Sie an das letzte Mal, als Sie die Funktionen Ausschneiden, Kopieren, Einfügen und Speichern verwendet haben. Vielleicht war es das letzte Mal, als Sie an einer Tabelle gearbeitet haben? Haben Sie zwischen Maus- und Tastatureingabe gewechselt, um die Dinge so effizient wie möglich zu erledigen? Wahrscheinlich haben Sie dieses Verhalten nicht weiter beachtet, aber es ist ein großartiges Beispiel dafür, wie man die Eingabe während der Arbeit wechselt, um ein Ziel am besten zu erreichen. Vielleicht haben Sie sich sogar eine kleine Auszeit bei dieser undankbaren Aufgabe gegönnt, um auf Facebook auf Ihrem Smartphone den "Like"-Button zu drücken.

Wenn Sie Schwierigkeiten mit der Verwendung Ihrer Hände haben, gibt es andere Optionen: Zauberstäbe, Stöcke, Schalter, Schlürf- und Blasgeräte, Spracherkennung und Blickverfolgungstechnologie können alle Eingaben in einem digitalen System erzeugen. Diese Geräte werden einen Inhaltsbereich identifizieren und aktivieren. Dies ähnelt der Funktionsweise der Tabulatortaste auf einer Tastatur, mit der die nächste Zelle in einer Tabelle hervorgehoben wird, um anzuzeigen, dass zu ihr navigiert wurde und sie zur Bearbeitung bereit ist.

In diesem Video demonstriert der Videoeditor und Barrierefreiheitsberater Christopher Hills die Fähigkeiten von Switch Control, einer Software, die Menschen mit motorischen Beeinträchtigungen hilft, Hardware-Schalter zu verwenden, um ihre Computergeräte zu bedienen.

Es ist erwähnenswert, dass Sie eines Tages auf diese Technologie angewiesen sein könnten, selbst wenn es nur für eine kurze Zeit ist. Vielleicht haben Sie sich bei einem unglücklichen Mountainbike-Unfall beide Arme gebrochen und möchten während der Genesung eine "Selbstmitleids-Takeaway"-Bestellung aufgeben. Vielleicht fahren Sie und möchten Ihrer Familie sicher texten. Oder vielleicht werden Sie einfach alt. Es ist nicht schwierig, sich andere Beispiele vorzustellen, es ist nur kein Konzept, über das die Leute gerne nachdenken.

Wenn es interaktiv ist, braucht es einen Fokus-Style

Wir können nicht immer wissen, wer unsere Websites und Webanwendungen besucht, warum sie sie besuchen, was sie dort tun werden, welche Bedingungen sie gerade erleben, welche Emotionen sie fühlen oder welche Eingabemethoden sie möglicherweise verwenden. Analysen können einige Einblicke geben, aber sie malen kein vollständiges Bild. Es wäre töricht, den Schwanz den Hund wedeln zu lassen und die gesamte Erfahrung auf Basis dieses Schnappschusses begrenzter Informationen zu optimieren.

Es ist auch wichtig zu wissen, dass nicht jeder, der assistierende Technologien nutzt, als Nutzer assistierender Technologien identifiziert werden möchte. Auch sollten sie dazu nicht gezwungen werden. Power-User – Leute, die Tastenkombinationen, spezielle Software und Browser-Erweiterungen nutzen – können so navigieren, als wären sie Nutzer assistierender Technologien, erleben aber möglicherweise keine Behinderung. Auch hier gilt: Menschen sind kompliziert!

Was wir tun können, ist, proaktiv eine Erfahrung zu bieten, die für jeden funktioniert, unabhängig von Fähigkeiten oder Umständen.

Identifizieren und aktivieren

:focus

Wie identifizieren wir mit diesen alternativen Eingabeformen etwas, um zu zeigen, dass es aktiviert werden kann? Glücklicherweise hat CSS dieses Problem gelöst – wir verwenden die Selektoren :focus und :active.

Die Grammatik ist unkompliziert. Möchten Sie einen Link orange umranden, wenn ein Benutzer ihn fokussiert? Hier ist, wie Sie es beschreiben:

a:focus {
  outline: 3px solid orange;
}

Diese Umrandung erscheint, wenn jemand zum Link navigiert, sei es durch Klicken oder Tippen, mit der Tabulatortaste per Tastatureingabe oder mit einer Switch-Eingabe, um ihn hervorzuheben.

Ein weit verbreiteter Irrtum ist, dass der Fokus-Style nur die Eigenschaft outline verwenden kann. Es ist erwähnenswert, dass :focus ein Selektor wie jeder andere ist, was bedeutet, dass er die gesamte Bandbreite der CSS-Eigenschaften akzeptiert. Ich spiele gerne mit Hintergrundfarbe, Unterstreichungen und anderen Techniken, die die aktuelle Größe der Komponente nicht verändern, um das Seitenlayout beim Aktivieren des Selektors nicht zu verschieben.

Sagen wir dann, wir möchten die Unterstreichung des Links beim Aktivieren entfernen, um eine Zustandsänderung zu kommunizieren. Denken Sie daran: Links verwenden Unterstreichungen!

a:active {
  text-decoration: none;
}

Es ist wichtig sicherzustellen, dass die Zustandsänderungen von Ruhezustand zu Fokus zu aktiviert deutlich sind. Das bedeutet, dass jede Übergangsphase im Vergleich zu den anderen Zuständen der Komponente einzigartig sein sollte, damit der Benutzer versteht, dass eine Änderung stattgefunden hat.

Wir wollen auch sicherstellen, dass diese Zustandsänderungen nicht nur auf Farbe basieren, um Menschen mit Farbsehschwäche und/oder geringer Sehkraft bestmöglich entgegenzukommen. Hier ist, wie eine reine Farbänderung für eine Person mit Deuteranopie, allgemein bekannt als Rot-Grün-Farbsehschwäche, aussehen könnte:

Ich habe absichtlich die Unterstreichung und den nativen Fokusring des Browsers vom Link im Video entfernt, um das Problem der Entdeckbarkeit besser zu veranschaulichen. Beim Versuch, mit der Tabulatortaste durch die Seite zu navigieren, um festzustellen, was interaktiv ist, ist es nicht sofort ersichtlich, dass ein Link vorhanden ist. Wenn Farbsehschwäche ebenfalls ein Faktor ist, wird die Zustandsänderung beim Überfahren nicht erkennbar sein – dies wird mit dem Auftreten von Katarakten noch deutlicher.

:focus-within

:focus-within – ein pseudo-klassen-selektor im Zusammenhang mit Fokus mit einem sehr Zen-klingenden Namen – kann auf ein übergeordnetes Element angewendet werden, wenn eines seiner Kinder den Fokus erhält. Das Fokus-Ereignis blubbert nach oben, bis es auf eine CSS-Regel stößt, die es auffordert, seine Styling-Anweisungen anzuwenden.

Ein gängiger Anwendungsfall für diesen Selektor wäre die Anwendung von Styling auf ein gesamtes Formular, wenn eines seiner Eingabeelemente den Fokus erhält. Im folgenden Beispiel skaliere ich die Größe des gesamten Formulars leicht hoch, es sei denn, der Benutzer hat einen Wunsch nach einer reduzierten Animationserfahrung geäußert.

Sehen Sie den Pen :focus-within Demo von Eric Bailey (@ericwbailey) auf CodePen.

Der Selektor ist immer noch relativ neu, daher bin ich sicher, dass wir clevere Anwendungen sehen werden, wenn die Zeit vergeht.

Politik

Menschen haben auch Meinungen. Leider sind diese Meinungen manchmal uninformiert. Außerhalb der Praxis der Barrierefreiheit gibt es die verbreitete Vorstellung, dass Fokus-Styles "hässlich" sind, und viele Designer und Entwickler entfernen sie aus Gründen der wahrgenommenen Ästhetik. Manchmal sind sie sich nicht einmal bewusst, dass sie die Meinung anderer verbreiten – viele CSS-Resets beinhalten eine pauschale Entfernung von Fokus-Styles und werden als grundlegende Projekt-Abhängigkeit integriert, ohne Fragen zu stellen.

Diese Entscheidung schließt Menschen aus. Websites und Webanwendungen sind keine eng beschnittenen Trophäen, die ohne Kontext auf einem Dribbble-Profil ausgestellt werden, noch sind sie statische Screenshots auf einem glatten Verkaufsdeck eines Unternehmens. Sie existieren, um gelesen und darauf reagiert zu werden, und es gibt Regeln, die dabei helfen, sicherzustellen, dass die größtmögliche Anzahl von Menschen genau das tun kann.

:focus-visible

Tatsache ist, dass manche Leute darauf bestehen, Fokus-Styles zu entfernen und genug Einfluss haben, um ihre Kollegen zu zwingen, ihre Vision umzusetzen. Dies widerspricht Regeln, die vorschreiben, dass Fokus-Mechanismen sichtbar sein müssen, damit Websites wirklich barrierefrei sind. Um dies zu umgehen, haben wir den Pseudo-Selektor :focus-visible.

Die Styling von :focus-visible Pseudo-Selektoren greift, wenn der Browser feststellt, dass ein Fokus-Ereignis aufgetreten ist, und die Heuristiken der User-Agent-Software ihm mitteilen, dass nicht-zeigerbasierte Eingabe verwendet wird. Das ist eine schicke Art zu sagen, dass er Fokus-Styling anzeigt, wenn er über Eingaben außer Mauszeiger oder Fingertipp aktiviert wird.

Das Video von diesem CodePen demonstriert, wie unterschiedliches Styling angewendet wird, basierend auf der Art der Eingabe, die der Link erhält. Wenn ein Link mit Maus-Eingabe angefahren und angeklickt wird, wird seine Unterstreichung entfernt und er verschiebt sich leicht nach unten. Wenn per Tastatureingabe mit Tabulator darauf zugegriffen wird, wendet :focus-visible stattdessen eine deutliche Hintergrundfarbe auf den Link an.

Chromium hat kürzlich seine Absicht angekündigt, :focus-visible zu implementieren. Obwohl die Browserunterstützung derzeit sehr begrenzt ist, ist ein Polyfill verfügbar. Sowohl es als auch :focus-within befinden sich im Selectors Level 4 Editor's Draft und werden daher wahrscheinlich früher oder später native Unterstützung in den wichtigsten Browsern finden.

Sie kennen :focus-visible vielleicht unter seinem anderen Namen, :-moz-focusring. Dieser herstellerpräfixierte Pseudo-Selektor ist Mozillas Implementierung der Idee und datiert dem :focus-visible-Vorschlag um sieben Jahre voraus. Im Gegensatz zu anderen herstellerpräfixierten CSS müssen wir uns keine Sorgen um die Unterstützung durch Autoprefixer machen! Firefox honoriert sowohl eine :focus-visible-Deklaration als auch :-moz-focusring, was für unsere Selektornamen zwischen den beiden Browsern für Parität sorgen wird.

Ein Schritt vorwärts, ein Schritt zurück

Die Browserunterstützung ist ein kleines Problem – das Web ist mehr als nur Chrome und Firefox. Obwohl das Polyfill möglicherweise Unterstützung dort bietet, wo nativ keine vorhanden ist, ist es zusätzliche Daten zum Herunterladen, zusätzliche Komplexität in der Wartung und zusätzliche Fragilität, die Ihrer Payload hinzugefügt wird.

Hinzu kommt die Tatsache, dass Geräte ihre Eingabearten weitaus weniger binär handhaben als früher. Das Surface, Microsofts Flaggschiff-Computer, bietet Tastatur, Trackpad, Stift, Kamera, Sprache und Touch-Funktionalität out-of-the-box. Die Screen-Reader-Umfrage von WebAIM aus dem Jahr 2017 ergab, dass mobile Geräte häufiger durch Tastatureingaben ergänzt werden als man vielleicht denkt. Heuristiken sind nett, aber wie Analysen malen sie möglicherweise kein vollständiges Bild.

Ein weiterer Punkt ist, dass Fokus-Styles auch für Mausbenutzer wünschenswert sein können. Ihre Präsenz ist ein klares und eindeutiges Zeichen für Interaktivität, was eine großartige Affordanz für Menschen mit geringer Sehkraft, kognitiven Problemen und technologisch weniger versierte Personen ist. Außergewöhnlich technisch versierte Personen, die verstehen, dass Screenreader und Tastenkombinationen im Grunde Vim für eine GUI sind, möchten, dass der Fokus-Zustand beim Keyboard-Tanz über den Bildschirm hinweg sichtbar ist.

Teil des Aufbaus eines robusten, widerstandsfähigen Webs ist der Aufbau einer starken Kern-Erfahrung, die in jedem Browser funktioniert. Der einfache :focus-Selektor erfreut sich breiter und tiefer Unterstützung, so dass es eine sichere Wette ist, dass selbst exotische Browser ihn honorieren werden.

Die Welt ist voller Dinge, die manche Menschen als hässlich empfinden mögen, während andere sie als schön betrachten. Persönlich sehe ich Fokus-Styles nicht als Augenweide. Als Designer halte ich sie für einen grundlegenden Bestandteil der Schaffung eines ausgereiften Designsystems. Als Entwickler ist die Beschreibung von Zuständen einfach alltägliche Arbeit. Als Mensch helfe ich gerne dabei, das Web offen und zugänglich zu halten, wie es gedacht war.

---

Wenn Sie mehr über das Thema erfahren möchten, hat die UX-Designerin Caitlin Geier einen großartigen Beitrag über Fokus-Indikatoren geschrieben.