Accessibility
A brief overview of Boosted Innovation Cup’s features and limitations for the creation of accessible content.
Boosted Innovation Cup 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 Innovation Cup 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 Innovation Cup that fulfill WCAG 2.1 (A/AA/AAA), Section 508, and similar accessibility standards and requirements.
Structural markup
Boosted Innovation Cup’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 Innovation Cup itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.
Interactive components
Boosted Innovation Cup’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 Innovation Cup’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 combinations of colors that currently make up Boosted Innovation Cup’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to insufficient color contrast (below the recommended WCAG 2.1 text color contrast ratio of 4.5:1 and the WCAG 2.1 non-text color contrast ratio of 3:1), particularly when used against a light background.
Unlike Bootstrap, in Boosted Innovation Cup contrasts are locked to ensure they meet WCAG 2.1 accessibility standards for color contrast when using .text-*
and .bg-*
utilities, by defining color
and background-color
altogether. Please refer to our theme colors to have a full preview of Boosted Innovation Cup color palette’s reached WCAG level.
Visually hidden content
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 color) 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, Boosted Innovation Cup .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>
Reduced motion
Boosted Innovation Cup 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 Innovation Cup (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
), Boosted Innovation Cup enables smooth scrolling using the scroll-behavior
property.
Focus visibility
Boosted Innovation Cup includes WICG’s :focus-visible
polyfill to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state.
:focus {
outline: $outline-width solid; // 1
}
.js-focus-visible :focus:not([data-focus-visible-added]),
.js-focus-visible .focus:not([data-focus-visible-added]) { // 2
outline: 0 !important;
}
:focus:not(:focus-visible) { // 3
outline: 0 !important;
}
Each component then specifies its own focus style, usually a solid 2px
outline with an outline-offset
transition.
$transition-focus: outline-offset $transition-duration $transition-timing; // Boosted mod
Under a fixed header
When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. Boosted Innovation Cup sets scroll-padding-top
property for such case. This feature is configurable in two ways:
$scroll-offset-top
variable defines the offset,- and
$enable-fixed-header
allows to drop this rule if you don’t use a fixed header.
@if $enable-fixed-header {
scroll-padding-top: $scroll-offset-top * .5;
@include media-breakpoint-up(lg) {
scroll-padding-top: $scroll-offset-top;
}
}
Minimum target size
Boosted Innovation Cup provides target-size()
mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to 44px
to pass WCAG 2.1 “Target Size” Success Criterion (2.5.5)— alongside a few arguments to fit specific needs (e.g. different width and height, using ::after
instead of ::before
, etc.).
@mixin target-size($size: $target-size, $pseudo-element: before, $position: relative, $width: $size, $height: $size) {
position: $position;
&::#{$pseudo-element} {
position: absolute;
top: 50%;
left: 50%;
width: $width;
min-width: 100%;
height: $height;
min-height: 100%;
content: "";
transform: translate3d(-50%, -50%, 0);
}
}
Maximum line length
When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the C20 technique: Using relative measurements to set column widths.
For more information, please read text utilities.
Additional resources
- Web Content Accessibility Guidelines (WCAG) 2.1
- The A11Y Project
- MDN accessibility documentation
- Tenon.io Accessibility Checker
- Color Contrast Analyser (CCA)
- “HTML Codesniffer” bookmarklet for identifying accessibility issues
- Microsoft Accessibility Insights
- Deque Axe testing tools
- Orange accessibility guidelines
- Introduction to Web Accessibility
:focus-visible
on MDN