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.

View source@chakra-ui/visually-hidden

Import

Chakra UI exports 2 components for the VisuallyHidden.

VisuallyHidden: Visually hidden span component used to hide elements on screen. VisuallyHiddenInput: Visually hidden input component used for designing custom input components using the html input as a proxy

import { VisuallyHidden, VisuallyHiddenInput } from '@chakra-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.

function Example() {
  return (
    <Button>
      <VisuallyHidden>Checkmark</VisuallyHidden>
      <CheckIcon />
    </Button>
  );
}

Here is another example:

function Example() {
  return (
    <Box>
      <Heading>Title and description</Heading>
      <VisuallyHidden>This will be hidden</VisuallyHidden>
    </Box>
  );
}

Visually hidden input

It renders html <input> as a proxy.

function Example() {
  return (
    <VisuallyHiddenInput
      defaultChecked
      onChange={(event) => {
        console.log(event.target.checked);
      }}
    />
  );
}

Accessibility

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

Props

VisuallyHidden components doesn't have any custom props.

Name	Type	Description
children	React.ReactNode	The content to be hidden visually