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.

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.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel