A11yText

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<A11yText text="I'm read by screenreaders" />

<A11yText text="I'm read by screenreaders" />

Introduction

import { A11yText } from '@telus-uds/components-base'

A11yText is a zero-size invisible element that adds text to be read by screen readers.

Guidance

Use A11yText to insert additional context for screenreader users within existing text content.

For example, there might be a link below some text. For sighted users, the text above provides context for the link. However, screenreader users may be skipping to interactive items and may therefore not be aware of this context on focusing the link:

Loading...

<StackView space={2}> <Typography>The new MegaPhone is our loudest phone yet.</Typography> <Link href="https://telus.com">Buy {<A11yText text="MegaPhone" />}today</Link> </StackView>

<StackView space={2}>
  <Typography>The new MegaPhone is our loudest phone yet.</Typography>
  <Link href="https://telus.com">Buy {<A11yText text="MegaPhone" />}today</Link>
</StackView>

In the above example, screenreaders read "Buy MegaPhone today" on focusing the link.

Accessibility

Inside focusable interactive components, the A11yText text will be flattened alongside other text into one focusable item.

A11yText fulfills a similar role to the React Native accessibilityLabel prop which is available to most UDS components, but inserts itself inside text, rather than replacing current text content.

Despite having a similar use case, React Native's accessibilityHint prop is not recommended for use as it has inconsistent cross-platform behaviour and is not supported on web.

Platform considerations

Props

Name	Type	Default	Description
text*	string
heading	bool