Accesibilidad

Una breve descripción de las características y limitaciones de Bootstrap para la creación de contenido accesible.

On this page

Bootstrap proporciona un framework fácil de usar con estilos prefabricados, herramientas de maquetación y componentes interactivos, permitiendo a los desarrolladores crear sitios web y aplicaciones que son visualmente atractivos, funcionalmente ricos y accesibles desde el principio.

Descripción general y limitaciones

La accesibilidad general de cualquier proyecto construido con Bootstrap depende en gran parte del marcado del autor, los estilos adicionales y los scripts que haya incluido. Sin embargo, siempre que estos se hayan implementado correctamente, debería ser perfectamente posible crear sitios web y aplicaciones con Bootstrap que cumplan con WCAG 2.2 (A/AA/AAA), Sección 508 y estándares y requisitos de accesibilidad similares.

Marcado estructural

Los estilos y la maquetación de Bootstrap pueden aplicarse a una amplia gama de estructuras de marcado. Esta documentación tiene como objetivo proporcionar a los desarrolladores ejemplos de buenas prácticas para demostrar el uso de Bootstrap e ilustrar el marcado semántico apropiado, incluyendo formas en las que se pueden abordar posibles problemas de accesibilidad.

Componentes interactivos

Los componentes interactivos de Bootstrap—como los diálogos modales, los menús desplegables y los tooltips personalizados—están diseñados para funcionar con usuarios táctiles, de ratón y de teclado. Mediante el uso de roles y atributos relevantes de WAI-ARIA, estos componentes también deberían ser comprensibles y operables usando tecnologías de asistencia (como lectores de pantalla).

Dado que los componentes de Bootstrap están diseñados a propósito para ser bastante genéricos, los autores pueden necesitar incluir roles y atributos adicionales de ARIA, así como comportamiento JavaScript, para transmitir con mayor precisión la naturaleza y funcionalidad exacta de su componente. Esto suele indicarse en la documentación.

Contraste de color

Algunas combinaciones de colores que actualmente componen la paleta predeterminada de Bootstrap—usada en todo el framework para cosas como variaciones de botones, variaciones de alertas, indicadores de validación de formularios—pueden llevar a un contraste de color insuficiente (por debajo del ratio de contraste de color de texto WCAG 2.2 de 4.5:1 y el ratio de contraste de color no textual WCAG 2.2 de 3:1), particularmente cuando se usan sobre un fondo claro. Se recomienda a los autores probar sus usos específicos de color y, cuando sea necesario, modificar/extender manualmente estos colores predeterminados para asegurar ratios de contraste de color adecuados.

El contenido que debería estar oculto visualmente, pero seguir siendo accesible para tecnologías de asistencia como lectores de pantalla, puede estilarse usando la clase .visually-hidden. Esto puede ser útil en situaciones donde información o señales visuales adicionales (como el significado denotado mediante el uso de color) también necesiten transmitirse a usuarios no visuales.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Para controles interactivos ocultos visualmente, como los enlaces tradicionales de “salto”, usa la clase .visually-hidden-focusable. Esto asegurará que el control se vuelva visible al recibir el foco (para usuarios videntes que usan teclado). Cuidado, en comparación con las clases equivalentes .sr-only y .sr-only-focusable de versiones anteriores, .visually-hidden-focusable de Bootstrap 5 es una clase independiente, y no debe usarse en combinación con la clase .visually-hidden.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Movimiento reducido

Bootstrap incluye soporte para la función multimedia prefers-reduced-motion. En navegadores/entornos que permiten al usuario especificar su preferencia por un movimiento reducido, la mayoría de los efectos de transición CSS en Bootstrap (por ejemplo, cuando se abre o cierra un diálogo modal, o la animación deslizante en carruseles) se desactivarán, y las animaciones significativas (como los spinners) se ralentizarán.

En los navegadores que soportan prefers-reduced-motion, y donde el usuario no haya señalado explícitamente que prefiere un movimiento reducido (es decir, donde prefers-reduced-motion: no-preference), Bootstrap activa el desplazamiento suave usando la propiedad scroll-behavior.