Accesibilidad
Una breve descripción de las características y limitaciones de Bootstrap para la creación de contenido accesible.
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.
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.0 (A/AA/AAA), Sección 508 y requisitos y estándares de accesibilidad similares.
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.
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.
La mayoría de los colores que actualmente componen la paleta predeterminada de Bootstrap (usados en todo el marco para cosas como variaciones de botones, variaciones de alertas, indicadores de validación de formularios) conducen a un contraste de color insuficiente (por debajo de la relación de contraste de color recomendada por WCAG 2.0 de 4.5:1 ) cuando se usan contra un fondo claro. Los autores deberán modificar/ampliar manualmente estos colores predeterminados para garantizar relaciones 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 .sr-onlyclase. 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="sr-only">Danger: </span>
This action is not reversible
</p>Para los controles interactivos visualmente ocultos, como los enlaces tradicionales de "saltar", .sr-onlyse pueden combinar con la .sr-only-focusableclase. Esto asegurará que el control sea visible una vez enfocado (para usuarios de teclado videntes).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>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 de CSS en Bootstrap (por ejemplo, cuando se abre o cierra un cuadro de diálogo modal) se desactivarán. Actualmente, el soporte está limitado a Safari en macOS e iOS.