[ @sdxc/u/a11y ]
visuallyHidden
Clips the host to a 1px box taken out of layout flow, keeping its native focusability and tab order intact so screen readers and keyboard users still reach it.
import { visuallyHidden } from "@sdxc/u/a11y";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.visuallyHidden() | css({
position: "absolute",
inlineSize: "1px",
blockSize: "1px",
padding: "0",
margin: "-1px",
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
borderWidth: "0",
}) |
Examples
Basic example
Use visuallyHidden() to hide text on screen while keeping it in the accessibility tree, like the label of an icon-only button:
<button type="button" mix={[...]}>
<svg
mix={[fill("currentColor")]}
viewBox="0 0 24 24"
width={20}
height={20}
aria-hidden="true"
>
<path d="M12 20.5S3 15 3 8.9A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 9 2.3C21 15 12 20.5 12 20.5z" />
</svg>
<span mix={[visuallyHidden()]}>Add to favorites</span>
</button>Hiding a form label
Hide a <label> visually when the design shows no label, so the field still has an accessible name:
<form role="search" mix={[hstack({ gap: 2 })]}>
<label htmlFor="site-search" mix={[visuallyHidden()]}>
Search the docs
</label>
<input id="site-search" type="search" placeholder="Search…" mix={[...]} />
<button type="submit" mix={[...]}>
Search
</button>
</form>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.visuallyHidden())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.visuallyHidden())Signature
u.visuallyHidden()