Dies wird der zweite Beitrag in einer kleinen Serie sein, die wir über die Barrierefreiheit von Formularen verfassen. Wenn Sie den ersten Beitrag verpasst haben, schauen Sie vorbei Zugängliche Formulare mit Pseudoklassen. In diesem Beitrag werfen wir einen Blick auf :focus-visible und wie Sie es auf Ihren Websites verwenden können!

Fokus-Touchpoint

Bevor wir weitermachen :focus-visible, schauen wir uns noch einmal an, wie :focus funktioniert in Ihrem CSS. Der Fokus ist der visuelle Indikator dafür, dass mit einem Element über Tastatur, Maus, Trackpad oder unterstützende Technologie interagiert wird. Bestimmte Elemente sind von Natur aus interaktiv, z. B. Links, Schaltflächen und Formularelemente. Wir möchten sicherstellen, dass unsere Benutzer wissen, wo sie sich befinden und welche Interaktionen sie durchführen.

Denken Sie daran, dies 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 wollen sicherstellen, dass wir den Fokus bewahren.

Wenn Sie aus irgendeinem Grund den Fokus entfernen müssen, stellen Sie sicher, dass auch ein Fallback vorhanden ist :focus Stile für Ihre Benutzer. Dieser Ersatz kann zu den Farben Ihres Brandings passen, aber stellen Sie sicher, dass diese Farben auch zugänglich sind. Wenn Marketing, Design oder Branding die standardmäßigen Fokusringstile nicht mögen, dann ist es an der Zeit, Gespräche zu führen und mit ihnen zusammenzuarbeiten, um sie am besten wieder hinzuzufügen.

Was ist focus-visible?

Die Pseudoklasse, :focus-visible, ist genau wie unsere Standardeinstellung :focus Pseudoklasse. Es gibt dem Benutzer einen Hinweis darauf, dass etwas auf der Seite fokussiert ist. Die Art, wie du schreibst :focus-visible ist geschnitten und trocken:

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

Beim Benutzen :focus-visible Bei einem bestimmten Element sieht die Syntax etwa so aus:

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

Das Tolle an der Verwendung :focus-visible Können Sie Ihr Element hervorheben? hell und mutig! Sie müssen sich keine Sorgen machen, dass es angezeigt wird, wenn auf das Element geklickt/getippt wird. Wenn Sie sich dafür entscheiden, die Klasse nicht zu implementieren, wird standardmäßig der Fokusring des Benutzeragenten verwendet, was für einige unerwünscht ist.

Hintergrundgeschichte von focus-visible

Vorher hatten wir die :focus-visible, würde der Stil des Benutzeragenten gelten :focus zu den meisten Elementen auf der Seite; Schaltflächen, Links usw. Es würde einen Umriss oder einen „Fokusring“ auf das fokussierbare Element anwenden. Dies wurde als hässlich empfunden, den meisten gefiel der standardmäßige Fokusring, den der Browser bereitstellte, nicht. Da der Fokusring ungünstig anzusehen war, haben die meisten Autoren ihn entfernt – ohne Rückgriff. Denken Sie beim Entfernen daran :focusDies verringert die Benutzerfreundlichkeit und macht das Erlebnis für Tastaturbenutzer unzugänglich.

Im aktuellen Zustand des Webs zeigt der Browser den Fokus auf verschiedene Elemente nicht mehr sichtbar an, wenn diese den Fokus haben. Der Browser verwendet stattdessen unterschiedliche Heuristiken, um zu bestimmen, wann er dem Benutzer helfen würde, und stellt im Gegenzug einen Fokusring bereit. Entsprechend Khan Academy, eine Heuristik ist, „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 verdeutlicht die Eingabeinteraktion.

In den frühen Tagen von :focus-visible Wir benutzten ein Polyfüllung Um den von Alice Boxhall und Brian Kardell entwickelten Fokusring zu handhaben, hat Mozilla auch eine eigene Pseudoklasse herausgebracht, :moz-focusring, vor der offiziellen Spezifikation. Wenn Sie mehr über die Anfänge des Fokusrings erfahren möchten, schauen Sie hier vorbei A11y-Abgüsse mit Rob Dodson.

Fokus Bedeutung

Es gibt viele Gründe, warum der Fokus bei Ihrer Bewerbung wichtig ist. Zum einen müssen wir als Botschafter des Internets, wie ich oben bereits erwähnt habe, sicherstellen, dass wir das bestmögliche und zugänglichste Erlebnis bieten. Wir möchten nicht, dass einer unserer Benutzer errät, wo er sich befindet, während er durch das Erlebnis navigiert.

Ein Beispiel, das mir immer in den Sinn kommt, ist das Two Blind Brothers-Website. Wenn Sie auf die Website gehen und auf das geschlossene Auge in der unteren linken Ecke klicken/tippen (dies funktioniert auf Mobilgeräten), sehen Sie, dass das Auge geöffnet ist und eine Simulation beginnt. Bei beiden Brüdern Bradford und Bryan Manning wurde in jungen Jahren die Stargardt-Krankheit diagnostiziert. Morbus Stargardt ist eine Form der Makuladegeneration des Auges. Mit der Zeit werden beide Brüder völlig blind sein. Besuchen Sie die Website und klicken Sie auf das Auge, um zu sehen, wie sie sehen.

Wenn Sie in ihrer Lage wären und durch eine Seite navigieren müssten, möchten Sie sicherstellen, dass Sie während des gesamten Erlebnisses genau wissen, wo Sie sich befinden. Ein Fokusring gibt Ihnen diese Kraft.

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 beim Navigieren mit der Maus, der zweite zeigt das Navigieren nur mit meiner Tastatur. Ich habe mich auch selbst aufgenommen, um zu zeigen, dass ich von der Maus auf die Tastatur umgestiegen bin.

Der Browser sagt anhand meiner Eingaben (Tastatur/Maus) voraus, was mit dem Fokusring geschehen soll, und fügt diesen Elementen dann einen Fokusring hinzu. Wenn ich in diesem Fall mit der Tastatur durch dieses Beispiel navigiere, erhält alles den Fokus. Bei Verwendung der Maus erhält nur die Eingabe den Fokus, die Tasten jedoch nicht. Wenn Sie entfernen :focus-visible, wendet der Browser den Standard-Fokusring an.

Es gilt der folgende Code :focus-visible zu den fokussierbaren Elementen.

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

Wenn Sie das angeben möchten label oder die Schaltfläche zum Empfangen :focus-visible Stellen Sie der Klasse einfach Folgendes voran input or button beziehungsweise.

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 dies nicht unterstützt :focus-visible Sie können an Ort und Stelle zurückgreifen, um die Interaktion abzuwickeln. Der folgende Code stammt aus dem MDN-Spielplatz. Sie können die @ unterstützt at-rule oder „Funktionsabfrage“ um den Support zu prüfen. Beachten Sie, dass die Regel oben im Code platziert oder in einer anderen Gruppe „at-rule“ verschachtelt werden 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 Bedenken hinsichtlich der Barrierefreiheit

Bedenken Sie beim Aufbau Ihres Erlebnisses Aspekte der Barrierefreiheit:

• Stellen Sie sicher, dass die Farben, die Sie für Ihren Fokusindikator auswählen, wenn überhaupt, gemäß den im Dokument dokumentierten Informationen weiterhin zugänglich sind WCAG 2.2 Nicht-Text-Kontrast (Stufe AA)
• Kognitive Überlastung kann zu Stress beim Benutzer führen. Stellen Sie sicher, dass die Stile verschiedener interaktiver Elemente konsistent bleiben

Browser-Unterstützung

Links

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• PlatoHealth. Informationen zu Biotechnologie und klinischen Studien. Hier zugreifen.
• Quelle: https://css-tricks.com/managing-user-focus-with-focus-visible/