Skip to content
Edit this page

Screen readers

Collection of utilities for improving accessibility with screen readers.

Visually hidden elements

The visually hidden style utility provides a common mechanism for hidings elements visually, but making them available for the assistive technology.

Usage

The visually hidden style utility can help provide context to read more links.

Read moreabout how to visually hide elements
<Link href="#foo">
  Read more
  {/* always visually hidden because the parent is focusable element */}
  <Box component="span" sx={{ ...visuallyHidden }}>
    about how to visually hide elements
  </Box>
</Link>