Accesibilidad

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

En esta página

Bootstrap proporciona un marco fácil de usar de estilos listos para usar, herramientas de diseño y componentes interactivos, lo que permite a los desarrolladores crear sitios web y aplicaciones que sean visualmente atractivos, funcionalmente ricos y accesibles de forma predeterminada.

Descripción general y limitaciones

La accesibilidad general de cualquier proyecto creado con Bootstrap depende en gran medida del marcado del autor, del estilo adicional y de 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), la Sección 508 y estándares y requisitos de accesibilidad similares.

Marcado estructural

El estilo y el diseño de Bootstrap se pueden aplicar a una amplia gama de estructuras de marcado. Esta documentación tiene como objetivo proporcionar a los desarrolladores ejemplos de mejores prácticas para demostrar el uso de Bootstrap en sí e ilustrar el marcado semántico adecuado, incluidas las formas en que se pueden abordar los posibles problemas de accesibilidad.

Componentes interactivos

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

Debido a que los componentes de Bootstrap están diseñados a propósito para ser bastante genéricos, es posible que los autores necesiten incluir más roles y atributos ARIA, así como comportamiento de JavaScript, para transmitir con mayor precisión la naturaleza y funcionalidad exactas de su componente. Esto generalmente se indica en la documentación.

Contraste de color

Algunas combinaciones de colores que actualmente componen la paleta predeterminada de Bootstrap (utilizada en todo el framework para elementos como variaciones de botones, variaciones de alertas e indicadores de validación de formularios) pueden provocar un contraste de color insuficiente (por debajo de la relación de contraste de color de texto recomendada por WCAG 2.2 de 4.5:1 y la relación de contraste de color no de texto de WCAG 2.2 de 3:1), especialmente cuando se usa contra un fondo claro. Se anima a los autores a probar sus usos específicos del color y, cuando sea necesario, modificar o ampliar manualmente estos colores predeterminados para garantizar relaciones de contraste de color adecuadas.

Contenido oculto visualmente

El contenido que debe ocultarse visualmente, pero seguir siendo accesible para las tecnologías de asistencia como los lectores de pantalla, se puede diseñar utilizando la clase .visually-hidden. Esto puede ser útil en situaciones en las que también es necesario transmitir información visual adicional o pistas (como el significado indicado mediante el uso del color) a usuarios no visuales.

<p class="text-danger">
  <span class="visually-hidden">Peligro: </span>
  Esta acción no es reversible
</p>

Para controles interactivos ocultos visualmente, como los enlaces tradicionales de "omitir" (skip links), utiliza la clase .visually-hidden-focusable. Esto garantizará que el control se vuelva visible una vez enfocado (para usuarios de teclado videntes). Cuidado, en comparación con las clases equivalentes .sr-only y .sr-only-focusable en 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">Saltar al contenido principal</a>

Movimiento reducido

Bootstrap incluye soporte para la característica de medios prefers-reduced-motion. En navegadores/entornos que permiten al usuario especificar su preferencia por el 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 de deslizamiento en los carruseles) se desactivarán, y las animaciones significativas (como los spinners) se ralentizarán.

En los navegadores que admiten prefers-reduced-motion, y donde el usuario no ha indicado explícitamente que prefiere un movimiento reducido (es decir, donde prefers-reduced-motion: no-preference), Bootstrap habilita el desplazamiento suave mediante la propiedad scroll-behavior.