CodePen

bookmark_border Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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

Inserta un elemento en el orden de tabulación natural 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 de tabulación natural, pero el elemento 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 en el orden de tabulación de forma natural o debido a un valor tabindex, permanecerán en el orden de tabulación. 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, que evita que las tecnologías de accesibilidad seleccionen o lean elementos.

¡Comienza a usarla!

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

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

Observa el uso de steps(var(--count)) para obtener el efecto correcto ✨