VGR Styleguide

Visually Hidden 

<p class="vgr-visually-hidden">This text is visually hidden</p>
<button class="vgr-visually-hidden vgr-visually-hidden--focusable">This text is visually hidden but can be focusable</button>
 
<p class="vgr-visually-hidden">This text is visually hidden</p>
<button class="vgr-visually-hidden vgr-visually-hidden--focusable">This text is visually hidden but can be focusable</button>
 
/* No context defined for this component. */
  • Handle: @visually-hidden
  • Preview:
  • Filesystem Path: components/base/utilities/visually-hidden/visually-hidden.html

Accessibility

  • .vgr-visually-hidden Hide for screen users, read for screen reader users.

  • .vgr-visually-hidden--focusable Show element when it gets tab focus.