Hide an element visually but keep it available for screen readers and other assistive technologies.
12345678910111213import "./style.css"; import { Button, VisuallyHidden } from "@ariakit/react"; import { undo } from "./icons.jsx"; export default function Example() { return ( <Button className="button"> {undo} <VisuallyHidden>Undo</VisuallyHidden> </Button> ); } import "./style.css"; import { Button, VisuallyHidden } from "@ariakit/react"; import { undo } from "./icons.jsx"; export default function Example() { return ( <Button className="button"> {undo} <VisuallyHidden>Undo</VisuallyHidden> </Button> ); }
import "./style.css"; import { Button, VisuallyHidden } from "@ariakit/react"; import { undo } from "./icons.jsx"; export default function Example() { return ( <Button className="button"> {undo} <VisuallyHidden>Undo</VisuallyHidden> </Button> ); } import "./style.css"; import { Button, VisuallyHidden } from "@ariakit/react"; import { undo } from "./icons.jsx"; export default function Example() { return ( <Button className="button"> {undo} <VisuallyHidden>Undo</VisuallyHidden> </Button> ); }
<VisuallyHidden /> <VisuallyHidden />
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.
Read latest issue
No Spam. Unsubscribe at any time.