Accessibility
A brief overview of Boosted’s features and limitations for the creation of accessible content.
Boosted 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 Boosted 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 Boosted that fulfill WCAG 2.0 (A/AA/AAA), Section 508 and similar accessibility standards and requirements.
Structural markup
Boosted’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 Boosted itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.
Interactive components
Boosted’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 Boosted’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
Some colors that currently make up Boosted’s default palette —used throughout the framework for things such as button variations, alert variations, form validation indicators— may lead to insufficient color contrast.
Ensuring contrasts
Each of the text colors shown are combined with background colors from the Orange digital palette in order to meet WCAG 2.0 accessibility standards for color contrast.
Please note that contrasts are locked when using .text-*
and .bg-*
utilities, to ensure sufficient contrasts.
Core colors | Text color | Pass level |
---|---|---|
#000 | #ff7900 | AAA |
#fff | AAA | |
#999 | AAA | |
#fff | #f16e00 | AA Large text |
#000 | AAA | |
#666 |
AA AAA Large text |
|
#ff7900 | #000 | AAA |
#f16e00 | #fff | AA Large text |
#595959 | #fff | AAA |
Functional greys | Text color | Pass level |
---|---|---|
#333 | #fff | AAA |
#666 | #fff |
AA AAA Large text |
#999 | #000 | AAA |
#ccc | #000 | AAA |
#ddd | #000 | AAA |
#eee | #000 | AAA |
Supporting colors | Text color | Pass level |
---|---|---|
#4bb4e6 | #000 | AAA |
#50beb7 | #000 | AAA |
#ffb4e6 | #000 | AAA |
#a885d8 | #000 | AAA |
#ffd200 | #000 | AAA |
Functional colors | Text color | Pass level |
---|---|---|
#32c832 | #000 | AAA |
#527edb | #000 |
AA AAA Large text |
#fff | AA Large text | |
#fc0 | #000 | AAA |
#cd3c14 | #000 | AA Large text |
#fff |
AA AAA Large text |
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.
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).
Reduced motion
Boosted 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 Boosted (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.
Focus visibility
Boosted includes a focus-visible polyfill to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state.
Additional resources
- Web Content Accessibility Guidelines (WCAG) 2.0
- The A11Y Project
- MDN accessibility documentation
- Tenon.io Accessibility Checker
- Colour Contrast Analyser (CCA)
- “HTML Codesniffer” bookmarklet for identifying accessibility issues
- “aXe core” extension for identifying accessibility issues
- Orange accessibility guidelines
- MDN focus-visible documentation