Comment implémenter des styles de focus pour le clavier uniquement et maintenir l'accessibilité ?

Implémenter des styles de focus pour le clavier uniquement

Arrière-plan :
Vous ne préférerez peut-être pas les styles de focus par défaut sur éléments. Cependant, vous souhaitez toujours que les utilisateurs ayant accès au clavier voient la bague de mise au point. Maintenir l’accessibilité tout en personnalisant les styles de mise au point peut s’avérer difficile. Cet article explore une solution pour activer les styles de focus uniquement lors de l'utilisation d'un clavier.

Solution :

1. Supprimer les styles de focus par défaut :

Utilisez CSS pour supprimer les styles de focus par défaut de tous les éléments focalisables. Cela évite un style déroutant lorsque le focus n'est pas souhaité.

2. Créez un élément focalisable personnalisé :

Pour les éléments conteneurs tels que les spans ou les divs, utilisez l'attribut tabindex pour les rendre focalisables.

3. Appliquer des styles de focus personnalisés :

a. Focus sur l'élément interne :

• Ajoutez des styles de focus à l'élément interne dans l'élément conteneur.
• Cela garantit que les styles de focus sont visibles dans les éléments comportant plusieurs calques.

b. Focus sur l'élément externe :

• Ajoutez des écouteurs d'événements à l'élément externe pour supprimer la bague de focus lors d'un clic ou d'un toucher de la souris.
• Cela maintient l'accessibilité tout en évitant les styles de focus inutiles pendant la souris. interactions.

Exemple de 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>

Conclusion :
En implémentant des styles de focus personnalisés sur un élément interne imbriqué et en supprimant les styles de focus par défaut de l'élément externe, vous pouvez activer les styles de focus uniquement sur le clavier. Cela vous permet de conserver l'accessibilité tout en personnalisant l'apparence du focus.

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!