Spinner

Únicamente el tamaño de spinner grande admite dos variantes, con etiqueta o sin etiqueta, y se ubica por debajo del indicador.

Todos los tamaños de spinner se ajustan proporcionalmente para no perder calidad, el spinner chico tiene 16px de diámetro, el mediano 32px y el grande 48px.

En la variante de tamaño grande, el espaciado entre la etiqueta y el indicador es de 8px.

Al ser un elemento que irrumpe en la navegación de la persona usuaria, que solo aparece para indicar la carga de un proceso y/o contenido, el spinner no debe ser recorrido ni operado por teclado para evitar confusiones al navegar por medios alternativos, como lectores de pantalla.

Para indicarle a la persona usuaria que comenzó un proceso de carga y debe esperar a que responda el contenido, debe agregarse el atributo “aria-live=assertive”. Con este atributo ARIA, medios alternativos para navegar un sitio web, como lectores de voz, anunciarán que se ha interrumpido el recorrido y que la interfaz está en un proceso de carga, por lo que deberá esperar y no podrá continuar navegando hasta que finalice.

<div class="spinner-border text-primary spinner-border-sm" role="status" aria-live="assertive">
  <span class="sr-only">Cargando...</span>
</div>

Para indicar a la persona usuaria, que utiliza medios alternativos para recorrer una página, sobre la aparición de un proceso de carga con spinner, como lectores de pantalla, debe agregarse la clase sr-only en una etiqueta span con el texto de “Cargando...”.

Adicionalmente, el spinner debe llevar el atributo de “role=status”, dentro del contenedor de la etiqueta div, para indicar el estado de carga que especifica la etiqueta span.

<div class="spinner-border text-primary spinner-border-sm" role="status">
  <span class="sr-only">Cargando...</span>
</div>

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Excepto por los subtítulos e imágenes de texto, el texto puede redimensionarse hasta un 200 % sin tecnología de asistencia, sin pérdida de contenido ni funcionalidad.

Los componentes que tienen la misma funcionalidad dentro de un conjunto de páginas web se identifican de manera consistente. Los enlaces que dirigen a un mismo lugar deben tener la misma identificación para no generar confusiones.

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.