Accessibility

A brief overview of Bootstrap’s features and limitations for the creation of accessible content, in particular, how this applies to the PDH Design System.
This page is copied from the bootstrap docs, with our notes added in the blue alert boxes.

On this page

Overview and limitations
Additional resources

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.

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 that is included. However, provided that any additionally created components have been implemented correctly, it should be perfectly possible to create websites and applications with this design system that fulfil WCAG 2.1 (A/AA/AAA), Section 508, and similar accessibility standards and requirements.

As of the creation of this Document, the supplied templates meet a high standard for accessibility, and it is recommended to create additional content and templates with the aid of an accessibility tool installed, to ensure that this standard is maintained.

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, and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.

See the templates docs page for a list of template used in the system, along with naming conventions for creating new templates.

Interactive components

Bootstrap’s interactive components—such as modal dialogs, drop-down 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, you may need to include further ARIA roles and attributes, as well as JavaScript behaviour, to more accurately convey the precise nature and functionality of a newly authored component.

For existing components accessibility information is usually noted in the documentation on the relevant pages.

The templates in the PDH design system use aria tags extensively, and any newly created templates should follow this practice as well.

Colour contrast

Some combinations of colours that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient colour contrast (below the recommended WCAG 2.1 text colour contrast ratio of 4.5:1 and the WCAG 2.1 non-text colour contrast ratio of 3:1), particularly when used against a light background. Authors are encouraged to test their specific uses of colour and, where necessary, manually modify/extend these default colours to ensure adequate colour contrast ratios.

When specifying background colours if text may be present, it is recommended to use the text-bg helper classes, as the colour utilities will automatically define either White or Black text to match it, based on the best combination of contrast ratio and visual aesthetics. In some cases, some colour combinations will not have a high enough contrast ratio for small text, to meet some accessibility standards.

For PDH usage, the most commonly required colour combinations have contrast ratios and considerations listed on the colours page

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .visually-hidden class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of colour) need to also be conveyed to non-visual users.

<p class="text-danger">
                        <span class="visually-hidden">Danger: </span>
                              This action is not reversible
                    </p>

For visually hidden interactive controls, such as traditional “skip” links, use the .visually-hidden-focusable class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent .sr-only and .sr-only-focusable classes in past versions, Bootstrap 5’s .visually-hidden-focusable is a standalone class, and must not be used in combination with the .visually-hidden class.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Various items throughout the system make use of .visually-hidden tags, such as hidden labels, menu items that use icons instead of text, etc

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, and meaningful animations (such as spinners) will be slowed down.

On browsers that support prefers-reduced-motion, and where the user has not explicitly signaled that they’d prefer reduced motion (i.e. where prefers-reduced-motion: no-preference), Bootstrap enables smooth scrolling using the scroll-behavior property.

Flip and Slide animations within the Design system (used on data-cards example items) have transition time reduced to 0 for users with prefers-reduced-motion enabled.