Wie aktiviere ich :Fokus nur auf Tastaturverwendung (oder Tab-Drücken)?

Aktivieren:Fokus nur auf Tastaturverwendung (oder Tab-Drücken)

Übersicht

Deaktivieren:Fokus, wenn er nicht benötigt wird, kann die Benutzererfahrung durch Eliminieren verbessern verwirrende visuelle Hinweise. Es ist jedoch wichtig, die Fokusfunktionalität für Tastaturbenutzer aufrechtzuerhalten.

Originallösung: Fokusstile nur für die Tastatur

Die Lösung von Roman Komarov nutzt CSS und HTML, um Fokusstile nur für die Tastatur zu erreichen. Es kapselt fokussierbare Elemente innerhalb eines Containerelements und formatiert nur das innere Element, sodass der Fokusstatus für Tastaturbenutzer visuell zugänglich bleibt.

Verbesserte Lösung: :focus-visible Pseudo Class

Update : Die Pseudoklasse :focus-visible bietet eine elegantere und effektivere Möglichkeit, Nur-Tastatur-Fokusstile zu erreichen. Browser zeigen den Fokus jetzt nur dann an, wenn dies das Benutzererlebnis verbessert, beispielsweise während der Tastaturinteraktion.

Um :focus-visible zu verwenden, ersetzen Sie :focus durch :focus-visible in Ihren CSS-Regeln. Dadurch wird sichergestellt, dass Fokusstile nur sichtbar sind, wenn sie über die Tastatur oder nicht-zeigende Geräte aktiviert werden.

Abwärtskompatibilität

Browser, die :focus-visible nicht unterstützen, zeigen den Standard-Fokusring an. Um eine konsistente Benutzererfahrung zu bieten, schlägt Šime Vidas vor, Fokusstile in :focus zu definieren und sie in :focus:not(:focus-visible) zurückzusetzen.

CSS-Beispiel:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>

HTML-Beispiel :

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>

Hinweise:

• Verwenden Sie das Tabindex-Attribut, um nicht fokussierbare Elemente fokussierbar zu machen.
• Stellen Sie sicher, dass Ihr CSS ausreichend spezifisch ist, um Standardfokusstile zu überschreiben .
• Erwägen Sie die Verwendung von :focus-within, um das übergeordnete Element zu formatieren, wenn sein untergeordnetes Element fokussiert ist.

Fazit

Durch die Nutzung der Pseudoklasse :focus-visible oder Durch die Implementierung der ursprünglichen Lösung können Entwickler Fokusstile nur für die Tastatur bereitstellen, ohne die Benutzererfahrung sowohl für Tastatur- als auch für Mausbenutzer zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie aktiviere ich :Fokus nur auf Tastaturverwendung (oder Tab-Drücken)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!