Den Unterschied zwischen „:focus' und „:focus-visible' in CSS verstehen

Den Unterschied zwischen :focus und :focus-visible in CSS verstehen

Ich habe viel über die Bedeutung der Tastaturzugänglichkeit gelernt und weiß daher, dass die visuelle Anzeige des fokussierten Elements sehr wichtig ist. Aber die bekannte Pseudoklasse :focus ist für diesen Job nicht immer die beste Lösung. Hier kommt :focus-visible ins Spiel. Schauen wir uns die Unterschiede zwischen diesen beiden Pseudoklassen an und erkunden die Best Practices für deren effektive Nutzung.

Was ist die :focus-Pseudoklasse?

Die Pseudoklasse :focus ist ein CSS-Selektor, der Stile auf jedes Element anwendet, das den Fokus erhält, unabhängig davon, wie dieser Fokus ausgelöst wurde. Dazu gehören Fokusereignisse aus der Tastaturnavigation, Mausklicks und Berührungsinteraktionen.

Beispielverwendung von :focus

button:focus {
  outline: 2px solid blue;
}

In diesem Beispiel zeigt die Schaltfläche immer dann einen blauen Umriss an, wenn sie fokussiert ist, unabhängig davon, ob der Benutzer mit der Maus darauf klickt, auf einem Touchscreen darauf tippt oder mit der Tastatur dorthin navigiert.

Was ist die :focus-visible-Pseudoklasse?

Die Pseudoklasse :focus-visible ist spezialisierter. Es wendet Stile nur dann auf ein Element an, wenn der Browser feststellt, dass der Fokus sichtbar sein soll. Dies tritt normalerweise auf, wenn der Benutzer über die Tastatur oder unterstützende Technologien navigiert und nicht über die Maus oder Berührungseingaben.

Beispielverwendung von :focus-visible

button:focus-visible {
  outline: 2px solid blue;
}

Hier zeigt die Schaltfläche nur dann einen blauen Umriss, wenn sie über die Tastaturnavigation oder eine andere Eingabemethode fokussiert wird, die normalerweise sichtbare Fokusindikatoren erfordert.

Hauptunterschiede zwischen :focus und :focus-visible

:Fokus

• Verhalten: Gilt für jedes Element, das den Fokus erhält, unabhängig von der Eingabemethode.
• Anwendungsfälle: Stellt sicher, dass alle Interaktionen mit dem Element visuell angezeigt werden, sei es per Maus, Tastatur oder Berührung.

:fokus-sichtbar

• Verhalten: Wendet Stile nur an, wenn der Fokus sichtbar sein sollte, z. B. bei Verwendung einer Tastatur oder unterstützender Technologie.
• Anwendungsfälle: Ideal für Szenarien, in denen Sie Fokusindikatoren nur für Benutzer von Tastaturen und unterstützenden Technologien bereitstellen und gleichzeitig unnötige Umrisse für Maus- und Touch-Benutzer vermeiden möchten, die normalerweise konstruktionsbedingt erforderlich sind.

Auswirkungen auf die Barrierefreiheit

:Fokus

• Vorteile:
• Garantiert, dass alle Benutzer sehen können, wann ein Element fokussiert ist, was für die Barrierefreiheit von entscheidender Bedeutung ist.
• Nachteile:
• Kann für Mausbenutzer zu einem suboptimalen Erlebnis führen, da bei Mausinteraktionen möglicherweise unnötigerweise Fokusstile angezeigt werden.

:fokus-sichtbar

• Vorteile:
• Verbessert das Benutzererlebnis, indem Fokusindikatoren nur bei Bedarf angezeigt werden, wodurch die Benutzeroberfläche für Maus- und Touch-Benutzer sauber bleibt.
• Passt das Erlebnis auf Benutzer von Tastaturen und unterstützenden Technologien zu und liefert ihnen klare visuelle Hinweise.
• Nachteile:
• Möglicherweise sind zusätzliche Überlegungen erforderlich, um sicherzustellen, dass Fokusindikatoren nicht versehentlich weggelassen werden, insbesondere in älteren Browsern, die :focus-visible nicht unterstützen.
  • Es kann Fälle geben, in denen Sie Fokusindikatoren für alle Benutzer anzeigen möchten, unabhängig von der Eingabemethode.

Best Practices für die Verwendung von :focus und :focus-visible

Um die beste Zugänglichkeit und Benutzererfahrung zu erzielen, ist die Kombination von :focus und :focus-visible in Ihrem CSS oft eine gute Idee.

Kombination von :focus und :focus-visible

button:focus {
  outline: 2px solid blue;
}

Hier ist ein Stackblitz-Beispiel, wie ein solches Styling aussehen könnte, damit Sie es ausprobieren und damit spielen können:

Zusätzliche Tipps

• Test mit Tastatur und unterstützender Technologie: Stellen Sie sicher, dass Ihre Webanwendung mit einer Tastatur (Tab, Umschalt-Tab usw.) navigierbar ist und dass Fokusindikatoren für diejenigen sichtbar sind, die darauf angewiesen sind. Es ist nie eine schlechte Idee, Barrierefreiheitstests in Ihre e2e-Testsuite aufzunehmen.
• Stellen Sie klare Fokusindikatoren bereit: Stellen Sie sicher, dass Fokusindikatoren gut sichtbar und gut sichtbar sind. Ein subtiler oder schwer zu erkennender Fokusindikator kann die Zugänglichkeit für Benutzer, die auf die Tastaturnavigation angewiesen sind, erheblich beeinträchtigen.

Abschluss

Die Pseudoklasse :focus-visible bietet eine verfeinerte Möglichkeit zur Verwaltung von Fokusindikatoren und verbessert die Zugänglichkeit und Benutzererfahrung, insbesondere für Benutzer von Tastaturen und unterstützenden Technologien. Indem Sie die Unterschiede zwischen :focus und :focus-visible verstehen und Best Practices in Ihrem CSS anwenden, können Sie zugänglichere und benutzerfreundlichere Webanwendungen erstellen.

Denken Sie daran, dass die Zugänglichkeit niemals zweitrangig sein sollte. Durch die sorgfältige Anwendung von Fokusstilen stellen Sie sicher, dass alle Benutzer, unabhängig davon, wie sie mit Ihrer Website interagieren, problemlos navigieren und interagieren können.

Das obige ist der detaillierte Inhalt vonDen Unterschied zwischen „:focus' und „:focus-visible' in CSS verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!