Visually Hidden 🙈👂

Hey Accessibility Advocate! 🦸‍♂️

The visually-hidden module provides a component or styles to make content visually hidden but still accessible to screen readers and other assistive technologies.

It's like giving your content an invisibility cloak 🧥 that only screen readers can see through! This is crucial for providing context or labels that are not needed visually but are vital for non-visual users.

Why Use It?

• Accessibility (a11y): Provide extra information for screen reader users without cluttering the visual UI.
  • Example: A "Close" button that is just an "X" icon visually can have visually hidden text like "Close dialog".
  • Example: Skip links for keyboard users.
• SEO (Sometimes): While not its primary purpose, hiding text this way is generally better than display: none; if the content is relevant.

How It Works (Common CSS Techniques):

It applies a specific set of CSS properties to an element, such as:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* To deal with borders when an element is focused */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* For single line text */
  border: 0;
}

Basic Usage:

import { VisuallyHidden } from '@ryvora/react-visually-hidden'; // Component name might vary

function MyIconButton({ icon, label }) {
  return (
    <button>
      <span aria-hidden="true">{icon}</span>{' '}
      {/* Icon is hidden from screen readers if label is present */}
      <VisuallyHidden>{label}</VisuallyHidden>
    </button>
  );
}

function App() {
  return <MyIconButton icon="❌" label="Close notification" />;
}

Make your UIs inclusive and accessible to everyone! 🌍❤️