CodePen

Cómo insertar un elemento en el orden de tabulación

Inserta un elemento en el orden natural de tabulación con tabindex="0". Por ejemplo:

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

Para enfocar un elemento, presiona la tecla Tab o llama al método focus() del elemento.

Cómo quitar un elemento del orden de tabulación

Quita un elemento con tabindex="-1". Por ejemplo:

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

Esto quita un elemento del orden natural de tabulación, pero aún se puede enfocar llamando a su método focus().

Ten en cuenta que aplicar tabindex="-1" a un elemento no afecta a sus elementos secundarios. Si están naturalmente en el orden de tabulación o debido a un valor tabindex, permanecerán en ese orden. Para quitar un elemento y todos sus elementos secundarios del orden de tabulación, considera usar el polyfill inert de WICG. El polyfill emula el comportamiento de un atributo inert propuesto, lo que evita que las tecnologías de accesibilidad seleccionen o lean elementos.

Ponga todo en marcha

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

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

Ten en cuenta el uso de steps(var(--count)) para lograr el efecto correcto ✨