before|hidden content|after

<VisuallyHidden>hidden content</VisuallyHidden>

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 with example of use case

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

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);
<BoxBefore />
<VisuallyHidden aria-label="I'm a region" element={Section}>
<P>but, not visible to you!</P>
<BoxAfter />