VisuallyHidden
Content that is visually hidden but remains accessible to screen readers. Essential for providing context that is visible in the UI through other means (icons, colors).
Primitive: VisuallyHiddenAccessibility
An icon-only button that says "Close" to screen readers:
Screen reader announces: "Close"
visually_hidden.rs
use stratum_leptos::*;
view! {
<Button variant=ButtonVariant::Outline>
<VisuallyHidden>"Close"</VisuallyHidden>
<XIcon />
</Button>
// Also useful for form labels
<VisuallyHidden>
<label for="search">"Search"</label>
</VisuallyHidden>
<Input id="search" placeholder="Search..." />
}Installation
stratum add visually-hiddenHow it works
Renders a <span> with CSS that hides it visually while keeping it in the accessibility tree:
CSS
{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}