Comment puis-je désactiver les styles de focus tout en conservant l’accessibilité du clavier ?

Puis-je désactiver le focus lorsque ce n'est pas nécessaire ?

Vous souhaitez désactiver le focus lorsque ce n'est pas nécessaire parce que vous n'aimez pas l'apparence de votre navigation lorsque le focus est activé dessus. Il utilise le même style que .active et c'est déroutant. Cependant, vous ne voulez pas vous en débarrasser pour les personnes qui utilisent un clavier.

Le problème peut être résolu

Certaines affiches ont mentionné la pseudo-classe :focus-visible, qui désormais a un support de navigateur décent. Conformément aux spécifications, les navigateurs ne devraient désormais indiquer le focus que lorsque cela est utile à l'utilisateur, par exemple lorsque l'utilisateur interagit avec la page via un clavier ou un autre appareil non pointeur.

Cela signifie que dans la plupart des cas, Dans les navigateurs, lorsqu'un utilisateur clique/appuie sur un bouton (ou un autre élément pouvant être focalisé), l'agent utilisateur n'affichera pas la bague de mise au point même si le bouton est mis au point, car dans ce cas, la bague de mise au point n'est pas utile à l'utilisateur.

Compatibilité descendante

Le problème possible avec l'utilisation de :focus-visible comme celui-ci est que les navigateurs qui ne le prennent pas en charge afficheront la bague de mise au point par défaut, qui peut ne pas être claire ou visible selon le design.

Réponse originale

Si la solution :focus-visible n'est pas suffisante pour la compatibilité ascendante, vous pouvez obtenir des styles de focus clavier uniquement pour les boutons, liens et autres éléments de conteneur avec le solution suivante :

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

Cette technique place tous les styles sur l'élément interne du conteneur, empêchant ainsi les styles de focus d'apparaître lorsque la souris est utilisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!