⚠️ Warning: You are looking at the documentation of the Aphrodite-UI which is being actively developed. There will very likely be outdated and missing documentation.

Visually Hidden

VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.

Import

import { VisuallyHidden } from '@aphrodite-ui/react';

Usage

It is used to visually hide an element but to make it accessible for screen-readers. It renders html <span> as a proxy.

<div>
  <Heading>Title and description</Heading>
  <VisuallyHidden>This will be hidden</VisuallyHidden>
</div>

Accessibility

VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.