visuallyHidden
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
- Check out the linked articles to learn more
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.