A11yText
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/ds-allium
- Package version
- 1.14.0
Introduction
import { A11yText } from '@telus-uds/ds-allium'
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:
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
The component is available on both native platforms and web.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| heading | bool | ||
| text* | string |
Variants
This component does not have any stylistic variants.
This component is always invisible.
Feedback
- Spotted a problem with this component? Raise an issue on GitHub
- See any existing issues for this component
- Contact the team on slack in #ds-allium-support