Wie kann ich Fokusstile deaktivieren und gleichzeitig die Barrierefreiheit über die Tastatur beibehalten?

Kann ich den Fokus deaktivieren, wenn er nicht benötigt wird?

Sie möchten den Fokus deaktivieren, wenn er nicht benötigt wird, weil Ihnen nicht gefällt, wie Ihre Navigation aussieht, wenn der Fokus vorhanden ist drauf. Es verwendet den gleichen Stil wie .active und ist verwirrend. Sie möchten es jedoch nicht für Leute loswerden, die eine Tastatur verwenden.

Das Problem kann gelöst werden

Einige Poster haben die Pseudoklasse :focus-visible erwähnt, die jetzt verfügt über eine gute Browserunterstützung. Gemäß der Spezifikation sollten Browser den Fokus jetzt nur dann anzeigen, wenn dies für den Benutzer hilfreich ist, beispielsweise wenn der Benutzer über eine Tastatur oder ein anderes nicht zeigendes Gerät mit der Seite interagiert.

Das bedeutet in den meisten Fällen Wenn ein Benutzer in Browsern auf eine Schaltfläche (oder ein anderes fokussierbares Element) klickt/tippt, zeigt der Benutzeragent den Fokusring nicht an, obwohl die Schaltfläche fokussiert ist, da der Fokusring in diesem Fall für den Benutzer nicht hilfreich ist.

Abwärtskompatibilität

Das mögliche Problem bei der Verwendung von :focus-visible auf diese Weise besteht darin, dass Browser, die es nicht unterstützen, den Standard-Fokusring anzeigen, der je nach Browser möglicherweise nicht klar oder sichtbar ist design.

Ursprüngliche Antwort

Wenn die :focus-visible-Lösung für die Abwärtskompatibilität nicht ausreicht, können Sie mit dem Nur-Tastatur-Fokusstile für Schaltflächen, Links und andere Containerelemente erreichen Folgende Lösung:

button {
  -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;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

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

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}

Diese Technik platziert alle Stile auf dem inneren Element des Containers und verhindert so, dass Fokusstile angezeigt werden, wenn die Maus verwendet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich Fokusstile deaktivieren und gleichzeitig die Barrierefreiheit über die Tastatur beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!