Visually Hidden

The Mishka Chelekom Headless Visually Hidden component hides content from sight and keeps it available to screen readers in Phoenix and LiveView. It renders a span with the standard visually-hidden styles applied inline: absolute position, a 1px box, clipped, no wrapping. Because the styles are inline, it works with no stylesheet at all.

Use it for text that explains an icon or a symbol, for extra context in a link, or for text a live region announces. It takes class and any global attribute, such as id or aria-live. The root also carries the chelekom-visually-hidden class.

Add context to a link whose visible text is the same on every row.

<a href={"/posts/#{post.id}"}>
  Read more
  <.visually_hidden>about {post.title}</.visually_hidden>
</a>

Or hold the text of a live region, so a status change is announced without changing the layout.

<.visually_hidden aria-live="polite">{@status}</.visually_hidden>

There are no inner parts and no state attributes. The root is a single span around the slot content.

Hidden text stays in the accessibility tree, so screen readers read it in place. Put it inside the control it describes, and it becomes part of that control's accessible name. Do not use it for content that sighted keyboard users also need, because it cannot be revealed on focus.