Vistaprint

Visually Hidden

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

There's a prop called visuallyHidden that's available on all Visage 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 visually-hidden on any element.

markup
<div class="visually-hidden">
  <!-- can be any tag, not just div -->
  some content
</div>

Components

VisuallyHidden

VisuallyHidden has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <span/>)

Guidelines

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