Visually hidden

A utility that hides content from the screen while retaining readability by screen readers for accessibility.
ExamplesCodeUsageChangelog

Default

The content will be hidden from the screen.

There is text hidden between these brackets: [Can't see me!]
import React, { Fragment } from 'react'; import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden'; import ToggleVisuallyHidden from './utils/toggle-visually-hidden'; const VisuallyHiddenDefaultExample = (): React.JSX.Element => { const hiddenContent = "Can't see me!"; return ( <ToggleVisuallyHidden id="default-example"> {(isVisible) => ( <Fragment> There is text hidden between these brackets: [ {isVisible ? hiddenContent : <VisuallyHidden>{hiddenContent}</VisuallyHidden>}] </Fragment> )} </ToggleVisuallyHidden> ); }; export default VisuallyHiddenDefaultExample;

Similiar controls

Multiple controls with the same label such as "Read more" make it difficult for a screen reader to differentiate them. Using Visually Hidden, more descriptive labels can be added without interfering with the design for screen users.

import React from 'react'; import ButtonGroup from '@atlaskit/button/button-group'; import Button from '@atlaskit/button/default/button'; import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden'; import ToggleVisuallyHidden from './utils/toggle-visually-hidden'; const VisuallyHiddenButtonsExample = (): React.JSX.Element => { return ( <ToggleVisuallyHidden id="buttons-example"> {(isVisible) => ( <ButtonGroup label="Buttons with hidden content"> <Button> Read more {isVisible ? ' about horses' : <VisuallyHidden> about horses</VisuallyHidden>} </Button> <Button> Read more {isVisible ? ' about dogs' : <VisuallyHidden> about dogs</VisuallyHidden>} </Button> <Button> Read more {isVisible ? ' about cats' : <VisuallyHidden> about cats</VisuallyHidden>} </Button> </ButtonGroup> )} </ToggleVisuallyHidden> ); }; export default VisuallyHiddenButtonsExample;
Was this page helpful?
We use this feedback to improve our documentation.
  • Design system
    • Get started
    • Foundations
    • Components
    • Rovo UI
    • Tools
    • Release phases
    • Contact us
  • News
  • Other libraries
  • Careers
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License