Skip to main content

VisuallyHidden

<VisuallyHidden> largely does what it says on the tin: it hides content visually while keeping it accessible to screen readers.

Examples

Text for Assistive Devices

A notification badge might make sense on its own to fully sighted users but require extra context for screen reader users who are basing their understanding purely on the content read aloud.

3 notifications
Code
<Box>
  3{' '}
  <J>
    notifications
  </J>
</Box>

Props