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 <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.