Screen reader users do not always have visual context or information needed to interpret what a control should be used for. Visually Hidden allows screen readers to read this aloud whilst remaining hidden for sighted users.
import {
TextLink,
P,
VisuallyHidden,
} from '@ovotech/element';
export default () => (
<P>
<TextLink href="#">
Find out more<VisuallyHidden> about tracking carbon</VisuallyHidden>
</TextLink>
</P>
);
When to use
- Interactive elements without text should include visually hidden text
- When multiple controls with visual context contain the same text (for example: "Read more"), but could be supplemented with hidden text to provide an easier to understand name for people using screen readers (for example: "Read more about energy tariffs"). Ensure that control's visible text is always included at the start of the control's accessible name, so that people using voice control software can easily use them.
When not to use
- React Native should instead use the accessibilityLabel property.
Availabile platforms
Platform |
Available |
---|---|
Figma |
× |
Web (@ovotech/element) |
✓ |
App (@ovotech/element-native) |
× |
How to use it
Content
- Use concise and relevant information
- If mixing hidden and not hidden content in an element, include a space in the visually hidden text to ensure it isn't concatenated with the not hidden text
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As a screen reader user, I want the visually hidden information to be announced.
- As a screen reader user, I want the visually hidden information to provide additional context to controls and icons where appropriate.
Test steps
Use these steps to check that the Visually hidden component has been implemented correctly:
- Turn on a screen reader.
- Navigate to instances where visually hidden text is used.
- Verify that visually hidden text is announced as expected.
Related patterns
External links