Skip to main content

VisuallyHidden

Keeps text in the accessibility tree while taking it off the screen.

import { VisuallyHidden } from "@/fragments/ui";Source

Preview

<button style={{
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: '40px',
  height: '40px',

Installation

npx @usefragments/cli add visuallyhidden

Writes src/fragments/ui/components/VisuallyHidden plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

Supplementary Text

Gives a vague link the context sighted readers get from layout.

<a href="#" style={{ color: 'var(--fui-color-accent)' }}>
  Read more
  <VisuallyHidden> about our accessibility features</VisuallyHidden>
</a>

Skip Link

Hidden until focused, then it jumps keyboard users past the nav.

<div>
  <VisuallyHidden as="div">
    <a
      href="#main-content"
      style={{
        position: 'absolute',

API

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setContent to hide visually
asenumspandivspanHTML element to render

Accessibility

  • Screen readers announce it; the layout never moves
  • Focusable children inside still receive focus
  • Required for WCAG 2.1 on icon-only controls

Guidance

Use when

  • An icon-only control needs a name
  • A link's text is vague out of context
  • A skip link needs to hide until focused

Avoid when

  • Nobody should see or hear it (render nothing)
  • The content is just collapsed (use aria-expanded)

Related

  • ButtonchildUse inside icon-only buttons for accessible labels
  • IconsiblingPair with icons to provide text alternatives

Next steps