Accessibility
We've taken an inclusive approach to nearly every aspect of the design system, and some of the more notable accessibility features are outlined here.
Focus
Focus indicates the point of regard for keyboard input. In other words, it gives you a visual clue to where keyboard input will be directed on the page.
We provide two focus indicators for you to use: a focus "halo" and a focus "ring," both of which are captured as design tokens (focus-halo and focus-ring).
Both focus indicators use the box-shadow property rather than the typical outline to ensure that the indicator matches the shape of its element.
Focus Halo
The focus halo is our global focus indicator and should be used in most cases. It contains two rings:
- a
2pxouter ring with a color offocus-halo-outer-color - a
1pxinner ring with a color offocus-halo-inner-color
The resulting effect looks like a halo around the focused element.
Using the focus halo for most elements ensures a few things that are key to a well-designed focus indicator:
- Color contrast can always be assured against both the background and the element's background.
- It is more visually apparent than a normal outline.
- Focus cannot be visually tracked from point to point like mouse movement can, so it needs to be more visually obvious than most visual elements on a page.
- It meets WCAG 2.2 Focus Appearance (Enhanced) under most circumstances by including the following:
- A focus indication area of
2px+ a1pxoffset. - High contrast between the background color and the element's color under nearly every scenario.
- A high on-focus
z-indexto ensure that it is never obscured by other content.
- A focus indication area of
Focus ring
The focus ring is more akin to the typical focus outline seen on the web.
It contains a 2px ring with a color of focus-color.
It is used in situations where some other focus affordance is included.
Most notably, this is seen in <input> fields, which provide an additional indication of focus via the insertion caret.