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 visualmente atractivos, funcionalmente ricos y accesibles desde el primer momento.

Resumen y limitaciones

La accesibilidad general de cualquier proyecto creado con Bootstrap depende en gran medida del marcado del autor, el estilo adicional y las secuencias de comandos que hayan incluido. Sin embargo, siempre que se hayan implementado correctamente, debería ser perfectamente posible crear sitios web y aplicaciones con Bootstrap que cumplan con WCAG 2.1 (A/AA/AAA), Sección 508 y requisitos y estándares 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 e ilustrar el marcado semántico apropiado, incluidas las formas en que se pueden abordar los posibles problemas de accesibilidad.

Componentes interactivos

Los componentes interactivos de Bootstrap, como los cuadros de diálogo modales, los menús desplegables y la información sobre herramientas personalizada, están diseñados para funcionar con usuarios táctiles, de mouse y de teclado. Mediante el uso de funciones 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 deban incluir más funciones y atributos de ARIA , así como el comportamiento de JavaScript, para transmitir con mayor precisión la naturaleza y la funcionalidad precisas de su componente. Esto generalmente se indica en la documentación.

Contraste de color

Algunas combinaciones de colores que actualmente conforman la paleta predeterminada de Bootstrap (utilizada en todo el marco para cosas como variaciones de botones, variaciones de alertas, indicadores de validación de formularios) pueden dar lugar a un contraste de color insuficiente (por debajo de la relación de contraste de color de texto recomendada por WCAG 2.1 de 4,5:1). y la relación de contraste de color sin texto WCAG 2.1 de 3:1 ), especialmente cuando se usa contra un fondo claro. Se alienta a los autores a probar sus usos específicos del color y, cuando sea necesario, modificar/ampliar manualmente estos colores predeterminados para garantizar proporciones de contraste de color adecuadas.

El contenido que debe ocultarse visualmente, pero permanecer accesible para las tecnologías de asistencia, como los lectores de pantalla, se puede diseñar usando la .visually-hiddenclase. Esto puede ser útil en situaciones en las que también es necesario transmitir información o pistas visuales adicionales (como el significado denotado mediante el uso de colores) a usuarios no visuales.

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

Para controles interactivos visualmente ocultos, como los enlaces tradicionales de "saltar", use la .visually-hidden-focusableclase. Esto asegurará que el control sea visible una vez enfocado (para usuarios de teclado videntes). Tenga cuidado, en comparación con el equivalente .sr-onlyy las .sr-only-focusableclases en versiones anteriores, Bootstrap 5 .visually-hidden-focusablees una clase independiente y no debe usarse en combinación con la .visually-hiddenclase.

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

Movimiento reducido

Bootstrap incluye soporte para la prefers-reduced-motionfunción multimedia . En los 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 cuadro de diálogo modal, o la animación deslizante en carruseles) se desactivarán y las animaciones significativas ( como los hilanderos) se ralentizarán.

En los navegadores que admiten prefers-reduced-motiony donde el usuario no ha señalado explícitamente que preferiría un movimiento reducido (es decir, donde prefers-reduced-motion: no-preference), Bootstrap permite un desplazamiento suave utilizando la scroll-behaviorpropiedad.