Components v5.0.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.See what's new

ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBanner Updated ButtonButton GroupCalendar Updated CardCheckbox Updated Collapsible New Combobox New Command MenuDate Picker Updated Date Range Picker New DividerDrawerDropdownEmpty StateField New FieldsetFilter Bar New FooterHeaderIconInput Updated Item New Kbd New LayoutMessageMeter New ModalNavigationNotificationNumber Field New Otp Field New Outline New Pagination New Popout Updated ProgressProgress BarQrcodeRadio Updated Range Updated Scroll Area New Segmented ControlSelect Updated SkeletonSpinnerStackTabTableTagTextarea Updated Time Picker New ToastToggle Updated TooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

VisuallyHidden

Open in Storybook

Hides content visually while keeping it available to assistive technology.

Loading...

Usage

Visually Hidden removes content from view while keeping it in the accessibility tree, so screen readers still announce it. Use it for labels and context that sighted users get from layout or iconography.

import "@nordhealth/components/lib/VisuallyHidden"

Examples

Basic

Hide content visually while keeping it available to screen readers.

Screen-reader-only context

Add extra context for assistive technology without changing the visible UI.

Accessibility

  • Content stays in the accessibility tree and is announced by screen readers — it is hidden visually, not from assistive technology.
  • Use it to name icon-only controls or to add context that sighted users infer from layout.
  • Don't use it to hide content from everyone — for that, remove it or use hidden/display: none.

API reference

VisuallyHidden

Visually hidden is used when an element needs to be available to assistive technologies like screen readers, but be otherwise hidden.

<nord-accordion></nord-accordion>

Slots

Slot name Description
Default slotThe visually hidden content.
Design guidelinesFor designers

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

  • Use to hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.

Don’t

  • Don’t use for hiding interactive content.