Use when an element needs to be available to assistive technology (e.g. screen readers) but otherwise hidden.
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.
<Card sectioned> <VisuallyHidden> <Heading>Title and description</Heading> </VisuallyHidden> <FormLayout> <TextField label="Title" value="Artisanal Wooden Spoon" /> <TextField label="Description" multiline /> </FormLayout> </Card>
Put the merchant first by identifying the problem they face and the component that helps them solve it.
A content element may be visually redundant but provides important context to merchants who are using a screen reader.
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.
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
There are no content elements specific to this component. Follow any guidelines appropriate to the element being hidden.