The hiddenVisually class visually removes text from the user's screen while preserving it for screen reader users. It should be used to provide supplementary descriptions and context when an interface is not fully understandable without visuals.

<p className='hiddenVisually'>
  This text will be readable by assistive technology,
  but not visible on screen.
</p>

Common Uses

When information on the screen is conveyed by an icon or other visual representation:

<Icon path={ phone } />

<span className='hiddenVisually>
  Phone Number:
</span>

<span>111-111-1111</span>

To provide an accessible heading that can be used for navigation by screen readers, which isn't necessary for sighted users because of visual context.

<h2 className='hiddenVisually'>
  Search Controls
</h2>

A presentational class to set visibility: hidden on an element, preserving it's space in the document but hiding it from users:

.invisible

A presentational class to set visibility: visible on an element:

.visible

.visible is useful for displaying descendants of .invisible elements:

<div className='invisible'>
  <p>This content is not visible.</p>

  <p className='visible'>This content is visible</p>
</div>