Wie implementiert man Nur-Tastatur-Fokusstile und behält die Barrierefreiheit bei?

Fokusstile nur für die Tastatur implementieren

Hintergrund:
Möglicherweise bevorzugen Sie die standardmäßigen Fokusstile nicht Elemente. Sie möchten jedoch weiterhin, dass Benutzer mit Tastaturzugriff den Fokusring sehen können. Die Aufrechterhaltung der Zugänglichkeit bei gleichzeitiger Anpassung der Fokusstile kann eine Herausforderung sein. In diesem Artikel wird eine Lösung untersucht, um Fokusstile nur bei Verwendung einer Tastatur zu aktivieren.

Lösung:

1. Standardfokusstile entfernen:

Verwenden Sie CSS, um Standardfokusstile von allen fokussierbaren Elementen zu entfernen. Dies verhindert verwirrende Formatierungen, wenn der Fokus nicht erwünscht ist.

2. Erstellen Sie ein benutzerdefiniertes fokussierbares Element:

Für Containerelemente wie Spannen oder Divs verwenden Sie das tabindex-Attribut, um sie fokussierbar zu machen.

3. Benutzerdefinierten Fokus anwenden Stile:

a. Fokus des inneren Elements:

• Fokusstile zum inneren Element innerhalb des Containerelements hinzufügen.
• Dadurch wird sichergestellt, dass Fokusstile in Elementen mit mehreren Ebenen sichtbar sind.

b. Fokus des äußeren Elements:

• Fügen Sie Ereignis-Listener zum äußeren Element hinzu, um den Fokusring beim Klicken oder Berühren mit der Maus zu entfernen.
• Dadurch bleibt die Zugänglichkeit erhalten und gleichzeitig werden unnötige Fokusstile während der Maus verhindert Interaktionen.

Beispiel Code:

<code class="css">button, a, span {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block;
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}

.btn__content:focus {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

Fazit:
Durch die Implementierung benutzerdefinierter Fokusstile auf einem verschachtelten inneren Element und das Entfernen von Standard-Fokusstilen aus dem äußeren Element können Sie dies erreichen Aktivieren Sie Nur-Tastatur-Fokusstile. Dadurch können Sie die Zugänglichkeit beibehalten und gleichzeitig das Erscheinungsbild des Fokus anpassen.

Das obige ist der detaillierte Inhalt vonWie implementiert man Nur-Tastatur-Fokusstile und behält die Barrierefreiheit bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!