VisuallyHidden

Alpha

Hides content visually while keeping it accessible to screen readers. No ARIA attributes needed — the content stays in the DOM.

Import

import { VisuallyHidden } from "@compa11y/react";

Usage

Example.tsx

import { VisuallyHidden } from "@compa11y/react";

// Hidden label for an icon button
function CloseButton({ onClick }) {
  return (
    <button onClick={onClick}>
      <span aria-hidden="true">&times;</span>
      <VisuallyHidden>Close dialog</VisuallyHidden>
    </button>
  );
}

// Hidden supplementary text
function CartCount({ count, total }) {
  return (
    <span>
      {count} items in cart
      <VisuallyHidden>, total price: {total}</VisuallyHidden>
    </span>
  );
}

// Focusable skip link wrapped in VisuallyHidden
<VisuallyHidden focusable>
  <a href="#main-content">Skip to main content</a>
</VisuallyHidden>

Features

Content remains in the DOM — screen readers read it naturally
Uses clip/overflow CSS trick (not display:none or visibility:hidden)
focusable mode — content becomes visible when focused or a child is focused
No extra ARIA roles or attributes required

Props

VisuallyHidden component props
Prop	Type	Default	Description
`focusable`	`boolean`	`false`	Content becomes visible when focused or a descendant is focused
`children`*	`ReactNode`	-	Content to hide visually

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for VisuallyHidden
Key	Action
`Tab`	When focusable is true, reveals the content when a child receives focus