Primitive contract

VisuallyHidden

Keeps essential text available to assistive technology while removing it from the visual flow without a zoom clipping defect.

Assistive-technology-only text · @sanchika/primitives

Purpose and semantics

Keeps essential text available to assistive technology while removing it from the visual flow without a zoom clipping defect.

Recommended semantic: Use span or another text element; do not apply permanently to interactive controls.

Anatomy

text

Concise assistive text that remains in the accessibility tree.

Finite variants and important states

Required states: default
Class hooks: .sk-visually-hidden

Composed synthetic exemplar

Rendered state matrix

VisuallyHidden: 1 required state

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

Accessibility and consumer responsibility

Keyboard and screen reader

Do not apply to focusable controls
A skip link must use a separate visible-on-focus composition.
Text must add useful context
Avoid duplicating nearby visible copy verbatim

Consumer owns

Verify the text is announced
Keep focusable controls visible
Test zoom and screen-reader behavior

Mobile

Remains available at zoom and on narrow screens.

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

No authored color is required.

Compact API reference

Package: @sanchika/primitives
CSS: @sanchika/primitives/styles.css
Contract: primitiveSpecs.find((contract) => contract.name === "VisuallyHidden")
Primary class: .sk-visually-hidden