Utilities / Visually Hidden

Visually Hidden

Hides content from the screen while keeping it available to assistive technology.

The button shows only an icon, yet a screen reader announces “Add bookmark” from the hidden label.

razor

<button type="button" class="... rounded-md border border-border bg-background">
    <BookmarkIcon class="h-5 w-5" />
    <NaviusVisuallyHidden>Add bookmark</NaviusVisuallyHidden>
</button>

Features

Content stays in the accessibility tree and is announced by screen readers, but is removed from the visual layout.
Applies the canonical sr-only style block inline, so it works with no extra CSS.
Ideal for giving an accessible name to icon-only buttons and links.
Forwards arbitrary attributes to the underlying span; a supplied style is merged after the hide rules.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash

navius add visually-hidden

Anatomy

Import the part and assemble it.

razor

@using Navius.Primitives.Components.VisuallyHidden

<NaviusVisuallyHidden>Text for screen readers</NaviusVisuallyHidden>

API Reference

Root

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

Prop	Type	Default
ChildContent	RenderFragment?	-
Attributes	IDictionary<string, object>?	-

Data attributes

Data attribute	Values
[data-navius-visually-hidden]	Present on the rendered span

Accessibility

Visually Hidden is a non-focusable, non-interactive wrapper, so it has no keyboard interactions. It exists 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, to provide context that is obvious visually but not to a screen reader, or to render skip links that appear only on focus. Because the hide rules clip the element to a single pixel rather than using display:none, the content is still announced.