Screen readers

Collection of utilities for improving accessibility with screen readers.

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.

about how to visually hide elements

import * as React from 'react';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';
import { visuallyHidden } from '@mui/utils';

export default function VisuallyHiddenUsage() {
  return (
    <Link href="#foo">
      Read more
      {/* always visually hidden because the parent is focusable element */}
      <Box sx={visuallyHidden}>about how to visually hide elements</Box>
    </Link>
  );
}

import * as React from 'react';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';
import { visuallyHidden } from '@mui/utils';

export default function VisuallyHiddenUsage() {
  return (
    <Link href="#foo">
      Read more
      {/* always visually hidden because the parent is focusable element */}
      <Box sx={visuallyHidden}>about how to visually hide elements</Box>
    </Link>
  );
}

Press Enter to start editing

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

<span class="token keyword">import</span> <span class="token punctuation">{</span> visuallyHidden <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/utils'</span><span class="token punctuation">;</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>visuallyHidden<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>about how to visually hide elements<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>

Screen readers

Visually hidden elements