Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
19 lines
609 B
Markdown
19 lines
609 B
Markdown
# Screen readers
|
|
|
|
<p class="description">Collection of utilities for improving accessibility with screen readers.</p>
|
|
|
|
## 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:
|
|
|
|
```jsx
|
|
import { visuallyHidden } from '@mui/utils';
|
|
|
|
<div style={visuallyHidden}>about how to visually hide elements</div>;
|
|
```
|