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.
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.
Contenido oculto visualmente
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-hidden
clase. 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-focusable
clase. Esto asegurará que el control sea visible una vez enfocado (para usuarios de teclado videntes). Tenga cuidado, en comparación con el equivalente .sr-only
y las .sr-only-focusable
clases en versiones anteriores, Bootstrap 5 .visually-hidden-focusable
es una clase independiente y no debe usarse en combinación con la .visually-hidden
clase.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Movimiento reducido
Bootstrap incluye soporte para la prefers-reduced-motion
funció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-motion
y 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-behavior
propiedad.
Recursos adicionales
- Pautas de accesibilidad al contenido web (WCAG) 2.1
- El Proyecto A11Y
- Documentación de accesibilidad de MDN
- Comprobador de accesibilidad Tenon.io
- Analizador de contraste de color (CCA)
- Bookmarklet "HTML Codesniffer" para identificar problemas de accesibilidad
- Perspectivas de accesibilidad de Microsoft
- Herramientas de prueba Deque Axe
- Introducción a la Accesibilidad Web