Skip to content

VisuallyHidden

Demos

VisuallyHidden

before|hidden content|after

<P>
<span>before|</span>
<VisuallyHidden>hidden content</VisuallyHidden>
<span>|after</span>
</P>

VisuallyHidden with focusable content

Use VisuallyHidden with focusable={true} to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). The container will be displayed when any child element of the container receives focus.

<VisuallyHidden focusable>
<Anchor href="/">Hidden, but focusable content</Anchor>
</VisuallyHidden>

VisuallyHidden with example of use case

<Anchor href="/">
Read more <VisuallyHidden>about Eufemia</VisuallyHidden>
</Anchor>

VisuallyHidden with custom element

but, not visible to you!

const Box = styled.div`
width: 1rem;
height: 1rem;
`
const BoxBefore = styled(Box)`
background-color: var(--color-summer-green);
`
const BoxAfter = styled(Box)`
background-color: var(--color-emerald-green);
`
render(
<>
<BoxBefore />
<VisuallyHidden aria-label="I'm a region" element={Section}>
<P>but, not visible to you!</P>
</VisuallyHidden>
<BoxAfter />
</>
)