Visually hidden

Quick implementation

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer improving accessibility.

Goal: Create a CSS utility class called .visually-hidden (also known as .sr-only) that hides an element visually but keeps it accessible to screen readers.

Technical constraints:
- Use position: absolute to remove the element from normal flow.
- Use clip-path: inset(50%) as the modern approach, with clip: rect(0,0,0,0) as a fallback.
- Set width and height to 1px, overflow to hidden, white-space to nowrap.
- Do NOT use display: none or visibility: hidden — those hide from screen readers too.
- The element must remain focusable if it's a link or button (add a .visually-hidden:focus variant that undoes the hiding for skip-link patterns).

Edge cases:
- The utility should not break layout when applied to inline elements.
- Negative margin trick (-1px) prevents any visual gap.
- Must work in all modern browsers including Safari.

Why this matters in 2026

Every production site needs this utility. Links that say "Read more" are useless to screen reader users who hear dozens of them with no context. The visually-hidden class lets you add descriptive text — "Read more about CSS Grid" — that screen readers announce but sighted users never see. It's the difference between an accessible site and a site that technically renders.

The logic

display: none and visibility: hidden remove elements from the accessibility tree entirely — screen readers can't see them. The visually-hidden pattern instead shrinks the element to 1×1 pixel, clips it to nothing with clip-path: inset(50%), and positions it absolutely so it doesn't affect layout. The element still exists in the DOM and the accessibility tree, so assistive technology can read it. The white-space: nowrap prevents the 1px-wide box from creating a tall, wrapping text column.

Accessibility & performance

This pattern is specifically designed for accessibility — it's how you bridge the gap between visual design and screen reader experience. Zero performance cost: the browser paints nothing because the element is clipped. For skip links, pair this with a :focus selector that removes the clipping so keyboard users can see the link when they tab to it.