Screen readers

Visually hidden elements

The visually hidden style utility provides a common mechanism for hidings elements visually, but making them available for assistive technology. It's a simple style object of type React.CSSProperties.

{{"demo": "VisuallyHiddenUsage.js", "defaultCodeOpen": true}}

If you don't have a strict CSP policy in place, you can also do:

import { visuallyHidden } from '@mui/utils';

<div style={visuallyHidden}>about how to visually hide elements</div>;