A brief overview of Bootstrap's features and limitations for the creation of accessible content.
Bootstrap is built with the accessibility standards and supports accessible out of the box.
Bootstrap's styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.
Bootstrap's interactive components-such as modal dialogs, dropdown menus and custom tooltips-are designed to work for touch, mouse and keyboard users. Include WAI-ARIA roles and attributes, to make these components understandable and operable using assistive technologies (such as screen readers).
When using button variations, alert variations, form validation indicators lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) when used against a light background. You need to manually modify/extend these default colors to ensure adequate color contrast ratios.
To support assistive technologies such as screen readers, you can be style using the .sr-only class to make the content visually hidden for providing additional visual information or cues (such as meaning denoted through the use of color) to non-visual users.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>For visually hidden interactive controls, such as "skip" links, .sr-only can be combined with the .sr-only-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>Bootstrap includes support for the prefers-reduced-motion media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.
