# Core/VisuallyHidden - Design

VisuallyHidden is a component that hides its children from the visual rendering, but still makes them available to screen readers.

## Overview

VisuallyHidden is a utility component that removes content from the visual flow while keeping it accessible to assistive technologies such as screen readers. It uses a well-established CSS technique that clips the element to a 1×1 pixel area without using `display: none` or `visibility: hidden`, which would remove it from the accessibility tree entirely.

Use VisuallyHidden when you need to provide context or labels for screen reader users that would be redundant or unnecessary in the visual design.

## Use Cases

### Hidden labels for icon-only controls

Icon-only buttons and controls must have accessible names. Wrap a text label in VisuallyHidden to provide one without affecting the visual design.

### Supplementary link text

Links like "Read more" lack context when read in isolation. Use VisuallyHidden to append descriptive text that screen readers announce.

### Form labels

When a form input has a visible placeholder but no visible label, use VisuallyHidden to associate a proper `<label>` element with the input.

### Skip links

Skip navigation links allow keyboard users to bypass repeated content. The link text can be visually hidden until it receives focus.

## Best Practices

**Do**

<p>
  Do use VisuallyHidden to provide accessible names for icon-only buttons and controls.
</p>

**Don't**

<p>
  Don't use VisuallyHidden to hide content that all users should see. If the content is meaningful, it should be visible.
</p>

**Do**

<p>
  Do use VisuallyHidden to add context to ambiguous links like "Read more" or "Learn more".
</p>

**Don't**

<p>
  Don't use 

  `display: none`

   or 

  `visibility: hidden`

   when content should remain available to assistive technologies.
</p>

## Accessibility

### Purpose

VisuallyHidden exists specifically to improve accessibility. It bridges the gap between visual design and the information needs of assistive technology users.

### When to Use

### WCAG 1.1.1 — Non-text Content (Level A)

Provide text alternatives for non-text content such as icon-only buttons. VisuallyHidden allows you to add an accessible name without altering the visual design.

### WCAG 2.4.4 — Link Purpose (Level A)

Links should make sense out of context. When visual context makes the purpose clear but the link text alone is ambiguous (e.g., "Read more"), use VisuallyHidden to add clarifying text.

### WCAG 2.4.6 — Headings and Labels (Level AA)

Form inputs should have descriptive labels. When a visible label would be redundant with other visual cues, VisuallyHidden can provide a programmatic label for assistive technologies.

### Important Notes

* VisuallyHidden content **is not** hidden from screen readers — that is its entire purpose.
* Do **not** use `aria-hidden="true"` on VisuallyHidden or its children, as this would negate its purpose.
* Prefer `aria-label` or `aria-labelledby` when labeling a single element. Use VisuallyHidden when you need to provide more complex or multi-element content to assistive technologies.