VisuallyHidden

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

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#

VisuallyHidden Example#

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>
  );
}

Another Example with VisuallyHidden#

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

VisuallyHiddenInput Example#

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.