1.8. Accesibilidad (Bootstrap 4, el manual oficial)

La accesibilidad de un proyecto diseñado con Bootstrap depende fundamentalmente del código HTML y los estilos/plugins que añadas tu mismo. Aún así, Bootstrap hace todo lo posible para ayudarte a conseguir que tus sitios sean accessibles.

1.8.1. Elementos HTML

La documentación de Bootstrap siempre muestra en sus ejemplos los elementos y atributos HTML recomendados para hacer tus aplicaciones accesibles.

1.8.2. Componentes interactivos

Los componentes interactivos, como las ventanas modales y los menús desplegables han sido diseñados para que funcionen con el ratón, el teclado y también las pantallas táctiles de los móviles. Gracias al uso de los atributos WAI-ARIA, estos componentes también son accesibles mediante dispositivos como lectores de pantalla.

1.8.3. Contraste de colores

Desafortunadamente, la mayoría de colores de las paletas generadas por Bootstrap no tienen un nivel de contrase suficiente según el estándar WCAG 2.0, que requiere un ratio de 4.5:1 cuando se utiliza un color de fondo claro. Así que tendrás que definir tus propios colores si quieres lograr ese objetivo.

1.8.4. Ocultando contenidos

Los contenidos que no se muestran por pantalla pero que se incluyen para que sean accededidos por dispositivos como los lectores de pantalla, se pueden ocultar aplicando la clase CSS .sr-only (el nombre viene de las siglas en inglés de "screen reader" o lector de pantalla):

<p class="text-danger">
  <span class="sr-only">Advertencia: </span>
  Esta acción es irreversible.
</p>

Para los elementos ocultos de tipo "Ir directamente al contenido", puedes combinar la clase .sr-only con la clase .sr-only-focusable. Esto hace que el contenido sea visible cuando se selecciona (útil para los usuarios que utilizan el teclado):

<a class="sr-only sr-only-focusable" href="#content">Ir al contenido</a>

1.8.5. Reduciendo el movimiento

Bootstrap también soporta el uso de la opción prefers-reduced-motion mediante la cual los navegadores indican que el usuario prefiere reducir el movimiento de los elementos de la página. Si está activada, las ventanas modales por ejemplo no muestran ninguna animación ni al abrirse ni al cerrarse.