component

VisuallyHidden

Visually hides content while keeping it accessible to screen readers.

This text is followed by a paragraph that is visually hidden but accessible to screen readers. Try using a screen reader to hear it, or inspect the DOM to see it's there.

This content is visually hidden but accessible to screen readers

Usage

import { VisuallyHidden } from '@backstage/ui';

<VisuallyHidden>
  This content is visually hidden but accessible to screen readers
</VisuallyHidden>

API reference

Prop	Type	Default	Responsive
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples

Example Usage

Here's an example of providing screen reader context for a list of links in a footer.

Footer links

About us

Jobs

Terms and Conditions

(Screen readers hear: "Footer links" followed by the list of links)

<Flex direction="column" gap="4">
  <VisuallyHidden>
    <Text as="h2">Footer links</Text>
  </VisuallyHidden>
  <Text as="p">
    <a href="#">About us</a>
  </Text>
  <Text as="p">
    <a href="#">Jobs</a>
  </Text>
  <Text as="p">
    <a href="#">Terms and Conditions</a>
  </Text>
</Flex>

Theming

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-VisuallyHidden