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