Skip to content

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.

<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>