Balance Logo
Balance
Reckon Design System

A11y

The components in this design system have been implemented with accessibility built in. This package aims to provide helpers for other occasions.
Install
pnpm add @reckon-web/a11y
Import usage
import {
Emoji,
VisuallyHidden,
visuallyHiddenStyles
} from '@reckon-web/a11y';
  • Code
  • API

Visually Hidden

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the VisuallyHidden component.

This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of icons or colour) need to also be conveyed to non-visual users.

Danger: This action is not reversible
Open in Playroom

Another common usage could be to visually hide a form label while maintaining accessibility, which can be achieved using the as property.

Emoji

Emojis can add a playfulness to your interface but require some formatting to ensure they are accessible for all users.

The Emoji component wraps the provided symbol in a span with a role="img" attribute. If a label is provided, then it is passed as an aria-label to the span. If no label is provided the emoji is assumed to be a decorative element with no semantic meaning and is hidden from screen-readers.

🌈
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.