Skip to content


visuallyHidden is a CSS utility that preserves content for screen readers while hiding it visually from display.

visuallyHidden is a CSS class name that can be added to any component.

  • Certain content may be redundant for sighted users, but provides valuable context or landmarks for users navigating with a screen reader
  • Add it to an element when the content is redundant for sighted users, e.g.:
    • Labels in form fields
    • Search inputs
    • Captions in tables
  • Providing meaningful content to screen readers can be nuanced

This example demonstrates how we can visually hide most elements, in this case the caption for a Table.

Form field labels are integrated into “field” components and require a slightly different approach to adding the appropriate class name. This example demonstrates how to hide the labels in a TextField and Checkbox.