A11y

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.

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.

Live announcements

Changes that happen away from the user's focus, such as a new item that arrives or the result of an action, are not read by screen readers unless the page announces them. Render one LiveRegion and pass it the announcement from useLiveAnnouncer. Call announce with the text to read.

LiveRegion is a visually hidden status region (role="status", aria-live="polite", aria-atomic="true"), so announcements never move focus or interrupt the user. announce clears the region before it sets the new text, so the same text is read again when it is announced twice. Pass data (for example data={{ testid: 'grid-announcer' }}) to add data attributes.

const Example = () => {
  const { announcement, announce } = useLiveAnnouncer();
  return (
    <Fragment>
      <LiveRegion message={announcement} />
      <Button label="Save" onClick={() => announce('Changes saved')} />
    </Fragment>
  );
};