Verwalten des Benutzerfokus mit: Fokus-Sichtbar

Dies ist der zweite in einer Serie über zugängliches Formulardesign. Wenn Sie die erste Rate verpasst haben, lesen Sie "Zugriffsformulare mit Pseudoklassen". Dieser Beitrag konzentriert sich auf die :focus-visible Pseudoklasse und ihre effektive Verwendung in der Webentwicklung.

Focus

verstehen

Bevor Sie in :focus-visible in :focus eintauchen, überprüfen Sie die focus Pseudo-Klasse in CSS.

zeigt die Benutzerinteraktion (Tastatur, Maus, Trackpad oder Assistenztechnologie) mit einem Element an. Natürlich interaktive Elemente wie Links, Schaltflächen und Formfelder erfordern klare Fokusanzeigen, um das Benutzerbewusstsein zu erhalten.

Vermeiden Sie dieses CSS!

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

:focus Entfernen des Standards. Fokussindikatoren immer bewahren. Wenn die Entfernung unbedingt erforderlich ist, stellen Sie sicher, dass eine optisch gleichwertige, zugängliche Alternative bereitgestellt wird. Wenn Designprobleme auftreten, arbeiten Sie zusammen, um eine zugängliche Lösung zu finden.

Einführung: Fokus zu sichtbar

Die Pseudoklasse

bietet einen Fokusindikator ähnlich wie

, jedoch mit einer verbesserten Benutzererfahrung. Die Syntax ist einfach: :focus-visible :focus

für bestimmte Elemente:

<code>:focus-visible {
  /* ...styles... */
}</code>

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

ermöglicht visuell auffällige Fokusanzeigen ohne unnötige visuelle Unordnung auf Mausklicks/ -Taps. Wenn nicht implementiert, bleibt der Standard -Browser -Focus -Ring (oft als unerwünscht).

focus-visible

Die Geschichte von: fokussierbar

vor

, standardmäßigen Browserstilen

im Großen und Ganzen angewendet, was häufig zu einem unattraktiven "Focus -Ring" führt. Viele Entwickler haben diesen Ring entfernt und versehentlich Zugänglichkeitsprobleme für Tastaturbenutzer erstellen. :focus-visible :focus moderne Browser verwenden Heuristiken (Algorithmen, um gute Auswahlmöglichkeiten zu finden), um zu bestimmen, wann ein Fokusring auf der Basis der Benutzereingabemethode (Tastatur, Maus usw.) von Vorteil ist. Dies bedeutet, dass der Browser den Fokusring intelligent anwendet oder weglässt.

Frühe Implementierungen stützten sich vor der offiziellen Spezifikation auf Polyfills (wie die von Alice Boxhall und Brian Kardell und Mozilla

). Rob Dodsons A11Y -Casts bieten weitere Einblicke in diese Entwicklung.

:moz-focusring Warum fokussierte Fokus

Eindeutige Fokusanzeigen sind für die Zugänglichkeit von größter Bedeutung. Benutzer, insbesondere Personen mit Behinderungen, müssen ihren Standort und ihre Interaktionen innerhalb einer Webseite verstehen. Die Website von Two Blind Brothers ( https://www.php.cn/link/a21852bf267634b8db7f0633120e5620

) dient als leistungsstark

Demo und Code

Der folgende Code zeigt :focus-visible in Aktion. Der Fokusring erscheint nur beim Navigieren mit einer Tastatur und demonstriert die intelligente Heuristik des Browsers.

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

Browser -Unterstützung und Fallbacks

Browserunterstützung variiert. Verwenden Sie @supports (eine Feature -Abfrage) für Fallback -Stile in nicht unterstützten Browsern:

<code>:focus-visible {
  /* ...styles... */
}</code>

Zusätzliche Überlegungen zur Zugänglichkeit

• sicherstellen Fokusanzeigenfarben Treffen Sie WCAG 2.2 Nicht-Text-Kontrast (Stufe AA) Richtlinien.
• Kognitive Überlast vermeiden, indem Sie konsistente Stile über interaktive Elemente hinweg aufrechterhalten.

Browserunterstützung (von caniuse.com): (Die Tabelle würde hier mit aktualisierten Caniuse -Daten nachgebildet)

Weitere Lesen:

• https://www.php.cn/link/fdac69c3eee7bd0427535354eae235a4
• https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324

Das obige ist der detaillierte Inhalt vonVerwalten des Benutzerfokus mit: Fokus-Sichtbar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!