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!