VisuallyHidden is a component used to render text intended to be visually hidden, but will show for alternate devices, for example a screen reader.

Usage

import { VisuallyHidden } from '@wordpress/components';

function Example() {
    return (
        <VisuallyHidden>
            <label>Code is Poetry</label>
        </VisuallyHidden>
    );
}

Best practices

The element that VisuallyHidden renders has the style position: absolute. When using this component be careful of the stacking context. Even though VisuallyHidden isn’t visible, it can still affect layout. An example of this is that VisuallyHidden may ignore overflow styles of ancestor elements because it instead adopts the overflow of its stacking context. One known side-effect can be an unexpected scrollbar appearing. To fix this kind of issue, introduce a stacking context on a more immediate parent of VisuallyHidden. Adding position: relative is often an easy way to do this.