A brief overview of Bootstrap's features and limitations for the creation of accessible content.

Overview and Limitations

Bootstrap is built with the accessibility standards and supports accessible out of the box.

Structural markup

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.

Interactive components

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).

Color contrast

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.

Visually hidden content

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

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>
Reduced motion

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.

Related Tutorial
Follow Us #
Contents +