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