a11y
Collection of components to help build accessible experiences.Use the <VisuallyHidden /> component to hide content that should remain accessible to assistive technologies, such as screen readers. This is particularly useful in situations where certain visual information or cues (icon or colour e.g.) need to also be conveyed to non-visual users.
In this example a visual user would interpret the red text colour as a "dangerous" message, whilst a non-visual user would hear "Danger" before the message:
<Text color="critical"> <VisuallyHidden>Danger: </VisuallyHidden> This action cannot be undone. </Text>
Use the <LiveRegion /> component to create ARIA live regions that announce dynamic content changes to screen readers. This is useful for notifications, status updates, and other content that appears or changes dynamically.
Important: LiveRegion components should never be unmounted. The LiveRegion container stays in the DOM while only the content appears and disappears. This ensures screen readers can detect and announce changes properly.
Use LiveRegion for:
- Important status updates
- Dynamic content that appears and disappears
- Critical alerts that must be announced immediately
Don't use LiveRegion for:
- Static content that doesn't change
- Decorative or informational content
The role prop determines how screen readers interpret and announce the content:
Use for general updates, notifications, and informational messages that don't require immediate attention.
Best for: Success messages, progress updates, general notifications
Use for important messages that require immediate attention, such as errors or critical warnings.
Best for: Error messages, critical warnings, important alerts
The aria-live prop controls how urgently screen readers announce changes:
Announces changes when the screen reader finishes its current speech. Use for most updates.
Best for: General updates, success messages, progress notifications
Interrupts current speech to announce changes immediately. Use sparingly for critical information.
Best for: Error messages, critical warnings, important alerts
Use the <SkipTo /> component to provide the ability for keyboard-only and screen reader users to jump to and over sections of the page. This prevents having to tab over a navigation full of links in order to get to the main content for example.
Include the SkipTo as the first element inside your <body>, so as to make it the first focusable element.
Try it in action on this docs site, by refreshing the page and pressing the TAB key once. Then press Enter/Return to see focus jump to the <main> element.