Visually hidden

Use when an element needs to be available to assistive technology (e.g. screen readers) but otherwise hidden.


Examples

Always provide a heading for a major page section such as a card. In rare cases the heading is visually redundant and the meaning is conveyed by context. Rather than omit the heading, wrap the heading in the visually hidden component.

Drag to resize example
<Card sectioned>
  <VisuallyHidden>
    <Heading>Title and description</Heading>
  </VisuallyHidden>
  <FormLayout>
    <TextField label="Title" value="Artisanal Wooden Spoon" />
    <TextField label="Description" multiline />
  </FormLayout>
</Card>
Name
Type
Description
children
React.ReactNode
The content to be hidden visually

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

A content element may be visually redundant but provides important context to merchants who are using a screen reader.

Solution

Wrap the piece of text in the visually hidden component so it doesn’t show on the interface, but will still be available to merchants using a screen reader.


Best practices

Visually hidden should:

  • Not be used if semantic markup can make content understandable to people using assistive technology
  • Be used to provide extra context when semantic markup isn’t enough
  • Be used on any content that is normally present but is being omitted
  • Make sense in context when used with a screen reader

Content guidelines

There are no content elements specific to this component. Follow any guidelines appropriate to the element being hidden.