CodePen

Insérer un élément dans l'ordre de tabulation

Insérez un élément dans l'ordre de tabulation naturel à l'aide de tabindex="0". Exemple :

<div tabindex="0">Focus me with the TAB key</div>

Pour sélectionner un élément, appuyez sur la touche Tab ou appelez la méthode focus() de l'élément.

Supprimer un élément de l'ordre de tabulation

Supprimez un élément à l'aide de tabindex="-1". Exemple :

<button tabindex="-1">Can't reach me with the TAB key!</button>

Cela supprime un élément de l'ordre de tabulation naturel, mais il peut toujours être sélectionné en appelant sa méthode focus().

Notez que l'application de tabindex="-1" à un élément n'affecte pas ses enfants. S'ils se trouvent naturellement dans l'ordre de tabulation ou à cause d'une valeur tabindex, ils restent dans l'ordre de tabulation. Pour supprimer un élément et tous ses enfants de l'ordre de tabulation, envisagez d'utiliser le polyfill inert de WICG. Le polyfill émule le comportement d'un attribut inert proposé, qui empêche la sélection ou la lecture des éléments par les technologies d'assistance.

Faites tourner tout le monde !

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Notez l'utilisation de steps(var(--count)) pour obtenir le bon effet ✨