Accessibility

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

Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.

SNCF guidelines

In 2016, SNCF signed a pact that aims to enforce commitments arising from the RGAA standard.
This signature is only the legal embodiment of a commitment, an ethical duty of everyone, to allow all your users to consult your interface without discrimination.

The pact is based on minimum compliance with the “AA” compliance level of WCAG 2.0.

As stated in the technical documentation to follow, Bootstrap is a “ready to use” but does not bear the entire responsibility with this level of compliance.
The components are indeed made in this sense, optimized (with few exceptions, specifically announced when it is), whether in terms of code, but also in terms of design.
On the other hand, the job is on the team who implements the code, and therefore the components one by one, which defines the colors of its interface and thus the personalization of the SNCF digital design, that is the task of guaranteeing the accessibility of its interface.

You will find the Accessibility guidelines on the Digital SNCF platform, in order to give you all the necessary details in this process :

We also made a white paper on accessibility in SNCF with our partner Access42.

In parallel, do not hesitate to ask our teams to help you if you need on design.fab@sncf.fr, with for object “Bootstrap - Accessibilité”. We can also guide you or recommend trusted partners for specific questions.

Overview and Limitations

The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill WCAG 2.0 (A/AA/AAA), Section 508 and similar accessibility standards and requirements.

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. Through the use of relevant WAI-ARIA roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).

Because Bootstrap’s components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.

Color contrast

Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as 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. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.

Visually hidden content

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed 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 traditional “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>

Additional resources

Did you find what you’re looking for ? If not, please tell us .