Verwaltung des Benutzerfokus mit :focus-visible

Dies wird der 2. Beitrag in einer kleinen Serie über Formularzugänglichkeit sein. Wenn Sie den ersten Beitrag verpasst haben, schauen Sie sich Accessible Forms with Pseudo Classes an. In diesem Beitrag werden wir uns :focus-visible und seine Verwendung auf Ihren Websites ansehen!

Fokus-Berührungspunkt

Bevor wir mit :focus-visible weitermachen, lassen Sie uns kurz rekapitulieren, wie :focus in Ihrem CSS funktioniert. Fokus ist der visuelle Hinweis darauf, dass ein Element über Tastatur, Maus, Trackpad oder assistierende Technologie interagiert wird. Bestimmte Elemente sind von Natur aus interaktiv, wie Links, Schaltflächen und Formularelemente. Wir möchten sicherstellen, dass unsere Benutzer wissen, wo sie sich befinden und welche Interaktionen sie tätigen.

Denken Sie daran, das nicht in Ihrem CSS zu tun!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Wenn Sie den Fokus entfernen, entfernen Sie ihn für ALLE! Wir müssen sicherstellen, dass wir den Fokus erhalten.

Wenn Sie aus irgendeinem Grund den Fokus entfernen müssen, stellen Sie sicher, dass es auch Fallback-:focus-Stile für Ihre Benutzer gibt. Dieses Fallback kann Ihren Markenfarben entsprechen, aber stellen Sie sicher, dass diese Farben auch zugänglich sind. Wenn Marketing, Design oder Branding die Standard-Fokusringstile nicht mögen, ist es Zeit, Gespräche zu beginnen und mit ihnen zusammenzuarbeiten, um den besten Weg zu finden, sie wieder einzuführen.

Was ist focus-visible?

Die Pseudoklasse :focus-visible ist genau wie unsere Standard-Pseudoklasse :focus. Sie gibt dem Benutzer einen Indikator, dass etwas auf der Seite fokussiert ist. Die Art und Weise, wie :focus-visible geschrieben wird, ist einfach und klar.

:focus-visible {
  /* ... */
}

Bei der Verwendung von :focus-visible mit einem bestimmten Element sieht die Syntax etwa so aus:

.your-element:focus-visible {
  /*...*/
}

Das Tolle an der Verwendung von :focus-visible ist, dass Sie Ihr Element hervorheben können, hell und fett! Sie müssen sich keine Sorgen machen, dass es angezeigt wird, wenn das Element angeklickt/getippt wird. Wenn Sie die Klasse nicht implementieren, ist der Standard der Fokusring des User Agents, der für einige unerwünscht ist.

Hintergrund von focus-visible

Bevor es :focus-visible gab, wendete das User Agent Styling :focus auf die meisten Elemente auf der Seite an; Schaltflächen, Links usw. Es wendete eine Umrandung oder einen "Fokusring" auf das fokussierbare Element an. Dies wurde als hässlich empfunden, die meisten mochten den Standard-Fokusring des Browsers nicht. Da der Fokusring als unerwünscht galt, entfernten die meisten Autoren ihn… ohne Fallback. Denken Sie daran, dass die Entfernung von :focus die Benutzerfreundlichkeit verringert und die Erfahrung für Tastaturnutzer unzugänglich macht.

Im aktuellen Zustand des Webs zeigt der Browser keinen sichtbaren Fokus mehr um verschiedene Elemente an, wenn diese fokussiert sind. Der Browser verwendet stattdessen verschiedene Heuristiken, um zu bestimmen, wann er dem Benutzer helfen würde, und stellt im Gegenzug einen Fokusring bereit. Laut Khan Academy ist eine Heuristik „eine Technik, die einen Algorithmus anleitet, gute Entscheidungen zu finden.“

Das bedeutet, dass der Browser erkennen kann, ob der Benutzer mit der Erfahrung über eine Tastatur, eine Maus oder ein Trackpad interagiert, und basierend auf diesem Eingabetyp den Fokusring hinzufügt oder entfernt. Das Beispiel in diesem Beitrag hebt die Eingabeinteraktion hervor.

In den frühen Tagen von :focus-visible verwendeten wir ein Polyfill, um den Fokusring zu verwalten, der von Alice Boxhall und Brian Kardell erstellt wurde. Mozilla entwickelte auch seine eigene Pseudoklasse, :moz-focusring, vor der offiziellen Spezifikation. Wenn Sie mehr über die frühen Tage des Fokusrings erfahren möchten, schauen Sie sich A11y Casts mit Rob Dodson an.

Bedeutung des Fokus

Es gibt viele Gründe, warum der Fokus in Ihrer Anwendung wichtig ist. Erstens müssen wir, wie oben erwähnt, als Botschafter des Webs sicherstellen, dass wir die bestmögliche und zugängliche Erfahrung bieten. Wir möchten nicht, dass einer unserer Benutzer rät, wo er sich während der Navigation durch die Erfahrung befindet.

Ein Beispiel, das mir immer einfällt, ist die Two Blind Brothers Website. Wenn Sie die Website besuchen und auf das geschlossene Auge unten links klicken/tippen (dies funktioniert auf Mobilgeräten), sehen Sie, wie sich das Auge öffnet und eine Simulation beginnt. Beide Brüder, Bradford und Bryan Manning, wurden in jungen Jahren mit der Stargardt-Krankheit diagnostiziert. Die Stargardt-Krankheit ist eine Form der Makuladegeneration des Auges. Im Laufe der Zeit werden beide Brüder vollständig blind sein. Besuchen Sie die Website und klicken Sie auf das Auge, um zu sehen, wie sie sehen.

Wenn Sie in ihrer Situation wären und durch eine Seite navigieren müssten, möchten Sie sicherstellen, dass Sie während der gesamten Erfahrung genau wissen, wo Sie sich befinden. Ein Fokusring gibt Ihnen diese Möglichkeit.

Demo

Die folgende Demo zeigt, wie :focus-visible funktioniert, wenn es zu Ihrem CSS hinzugefügt wird. Der erste Teil des Videos zeigt die Erfahrung bei der Navigation mit einer Maus, der zweite Teil zeigt die Navigation nur mit meiner Tastatur. Ich habe mich auch selbst aufgenommen, um zu zeigen, dass ich von der Maus zur Tastatur gewechselt habe.

Der Browser sagt voraus, was mit dem Fokusring basierend auf meiner Eingabe (Tastatur/Maus) passieren soll, und fügt dann einen Fokusring zu diesen Elementen hinzu. In diesem Fall erhalten beim Navigieren durch dieses Beispiel mit der Tastatur alle Elemente den Fokus. Bei der Verwendung der Maus erhält nur die Eingabe den Fokus, die Schaltflächen jedoch nicht. Wenn Sie :focus-visible entfernen, wendet der Browser den Standard-Fokusring an.

Der folgende Code wendet :focus-visible auf die fokussierbaren Elemente an.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Wenn Sie festlegen möchten, dass das label oder die Schaltfläche :focus-visible erhalten soll, rufen Sie die Klasse entsprechend mit input oder button auf.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Unterstützung

Wenn der Browser :focus-visible nicht unterstützt, können Sie ein Fallback haben, um die Interaktion zu handhaben. Der folgende Code stammt aus dem MDN Playground. Sie können die Regel @supports oder eine „Feature Query“ verwenden, um die Unterstützung zu prüfen. Eine Sache, die Sie beachten sollten, ist, dass die Regel am Anfang des Codes oder innerhalb einer anderen `@supports`-Regel verschachtelt sein sollte.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Weitere Zugänglichkeitsbedenken

Zu berücksichtigende Zugänglichkeitsbedenken beim Aufbau Ihrer Erfahrung

• Stellen Sie sicher, dass die Farben, die Sie für Ihren Fokusindikator wählen, falls vorhanden, gemäß den Informationen in den WCAG 2.2 Non-text Contrast (Level AA) zugänglich sind.
• Kognitive Überlastung kann zu Stress beim Benutzer führen. Achten Sie darauf, die Stile auf verschiedenen interaktiven Elementen konsistent zu halten.

Browser-Unterstützung

Links

• https://daverupert.com/2024/01/focus-visible-love/
• https://css-tricks.de/almanac/selectors/f/focus-visible/