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.

NameTypeDescription
childrenReact.ReactNodeThe content to be hidden visually

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel