Skip to content



before|hidden content|after

Code Editor
  <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.

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

VisuallyHidden with example of use case

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

VisuallyHidden with custom element

but, not visible to you!

Code Editor
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 />