VisuallyHidden

<VisuallyHidden> is a component that visually hides its children while keeping them accessible to screen readers and assistive technologies.

This is especially useful when you want to preserve the native behavior and semantics of elements like checkboxes or radio buttons, but visually replace them with custom-styled components.

Anatomy

The <VisuallyHidden> contains of a simple <div> element, where you can add children.

Appearance

<label style={{ position: 'relative' }}>
  <VisuallyHidden>
    <input type="checkbox" />
  </VisuallyHidden>
  <span>Subscribe to our newsletter</span>
</label>

Usage

You should use <VisuallyHidden> when you want to make information available to screen reader users without displaying it visually on the screen.

This is especially useful for accessibility purposes, such as labeling icon-only buttons, adding helpful instructions to form fields, or including context like headings or descriptions that assist navigation for screen reader users. By doing so, you ensure your interface remains clean and visually simple for sighted users while still being fully accessible and understandable for those relying on assistive technologies.

import { Button, Stack, VisuallyHidden } from '@marigold/components';import { Delete } from '@marigold/icons';export default () => (  <Stack space={5}>    Start your screenreader and tab to the button to hear how the component can    support.    <Button type="button" variant="destructive">      <Delete aria-hidden="true" />      <VisuallyHidden>Delete item</VisuallyHidden>    </Button>  </Stack>);

Supplemental context

Sometimes you need to include additional context that isn't necessary to show visually but is important for users who rely on screen readers. For example, this could be clarifying instructions, status updates, or descriptions that help non-visual users understand what's happening on the page.

Using a visually hidden element ensures that this information is announced by assistive technologies without disrupting the visual layout or overwhelming sighted users with extra text.

<VisuallyHidden>All fields marked with * are required.</VisuallyHidden>

Props

The <VisuallyHidden> component accepts standard HTML element props since it's a wrapper around a <div> element. It accepts all standard React props like children, className, and other HTML attributes.