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.

<Text color="critical">
  <VisuallyHidden>Danger: </VisuallyHidden>
  This action is not reversible
</Text>

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.

Edit in Playroom

<Emoji symbol="🌈" label="Rainbow" />

A11y

Emoji