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

Blueprint 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 '@hover/blueprint'

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

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.