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

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 © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo