Visually Hidden

Overview

VisuallyHidden wraps its content in a span that clips it to a single pixel rather than using display:none, so the content stays in the accessibility tree and is announced by screen readers while being removed from the visual layout. It applies the canonical sr-only style block inline, so it works with no extra CSS.

Anatomy

@using Navius.Primitives.Components.VisuallyHidden

<NaviusVisuallyHidden>
</NaviusVisuallyHidden>

Root

Hides its children from view while keeping them accessible. Renders a span.

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	Content to hide visually but keep announced.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span. A supplied style is merged after the hide rules rather than replacing them.

Data attributes

Part	Attribute	Description
Root	data-navius-visually-hidden	Present on the rendered span.

ARIA mechanism

Root has no role of its own. It is a non-focusable, non-interactive wrapper with no keyboard interactions, existing purely to keep content in the accessibility tree while hiding it from sight, the opposite of aria-hidden, which removes content from assistive technology. Reach for it to label icon-only controls, provide context that is obvious visually but not to a screen reader, or render skip links that appear only on focus. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.