<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Visually Hidden

Hide content while still making it available in browser Accessibility Trees.

This feature makes content hidden from screens — but crucially, the content will be still available in the browser's Accessibility Tree. The primary purpose of the component is to add information to the Accessibility Tree that has no visual impact.

Sometimes the purpose/context around a UI is very clear to sighted users, but is not clear to users on assistive technologies. Visually Hidden bridges that gap by providing an easy way for a page to add context "directly" to the Accessibility Tree, but leaving it hidden from sighted users.

In React

In React, there are two ways to make a component visually hidden:

the visuallyHidden prop

The core prop visuallyHidden is usable on all SWAN components.

the VisuallyHidden Component

The VisuallyHidden component is simply a wrapper with the visuallyHidden prop applied, so it will hide all of its children.

Both the prop and the component work just the same, so just use whichever one you like better.

In vanilla

Place the CSS class swan-visually-hidden on any element.

Example

The preview has been updated.

Best practices

  • Visually Hidden can be used when image alt text or an aria-label doesn't work for providing a cue to an element's function. For instance, a paginator might have left and right arrow buttons whose icons are provided via the background-image property, meaning the images can't use alt text. In this case, you could put a visually-hidden <span> inside each button with the word "Previous" or "Next" as its contents.

Props

VisuallyHidden
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 18, 2022Last updated: Sep 18, 2024