Generador de spinner CSS accesible

Qué cubre y qué no cubre el CSS generado

La herramienta te da la parte visual: un círculo con borde y una rotación. Un cargador solo visual no tiene significado para las tecnologías de asistencia, porque el elemento está vacío. La accesibilidad llega con el marcado y con una regla de CSS adicional que añades alrededor.

Marcado que anuncia el estado

<div class="loader" role="status" aria-label="Cargando resultados"></div>

role="status" marca el elemento como región en vivo, así que muchos lectores de pantalla anuncian su etiqueta cuando aparece. El aria-label debe decir qué se está cargando, como «Cargando resultados» o «Guardando», en lugar de una palabra genérica. Elimina el elemento cuando termine el trabajo y muestra el contenido nuevo.

También puedes poner texto visible junto al anillo. El texto visible ayuda a todos, incluidas las personas que no ven bien el movimiento.

Respeta el movimiento reducido

Algunos visitantes activan una opción del sistema que pide a los sitios limitar las animaciones. Respétala con una consulta de medios colocada después del CSS generado:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Esto ralentiza la rotación en lugar de eliminarla, así que el cargador sigue pareciendo activo sin un movimiento rápido. Si prefieres una señal estática, usa animation: none; y muestra el texto «Cargando» junto al anillo.

Lista de comprobación de contraste y tamaño

Límites

• El generador elige el color de la pista (#eee) por ti. Edítalo en el CSS pegado si el fondo de tu página es parecido.
• Un valor de velocidad muy alto hace que el anillo parpadee. Evita cualquier valor por debajo de unos 0,5 segundos.
• No confíes solo en el spinner para esperas largas. Explica en texto lo que está pasando.

Pruébalo rápido

Activa la opción de movimiento reducido en tu sistema operativo y recarga la página: el anillo debería girar más despacio. Después, navega por la página con el teclado para confirmar que el spinner nunca quita el foco del control que el visitante estaba usando. Por último, activa un lector de pantalla y provoca el estado de carga una vez, para comprobar si la etiqueta se anuncia cuando aparece el elemento y si el contenido nuevo es accesible después.