Components / layout

layout · @awesome-ds/react

VisuallyHidden

Screen-reader-only text.

Rules: rule.a11y.wcag-aa

State matrix

idlerequired

Anatomy

  • off-screen text wrapper
  • semantic text content

Keyboard contract

Focusable descendants become visible on focus only when the caller deliberately supports skip-link behavior.

Screen-reader contract

Content remains in the accessibility tree while absent visually.

Content rules

  • Add context that sighted users receive visually.
  • Do not hide interactive controls unintentionally.

Public API

PropTyperequiredDescription
childrenReactNoderequiredAssistive-only content

Adaptation contracts

RTL
Logical properties and DOM order determine layout and reading order.
High contrast
Never clip descendant outlines or depend on decorative surfaces for grouping.
Reduced motion
Responsive reflow is immediate and does not animate layout geometry.

Verification IDs

VisuallyHidden/accessibility-tree

Live

Live

Visible text plus screen-reader-only context

Copyable example

import { VisuallyHidden } from "@awesome-ds/react";

<VisuallyHidden>Extra context</VisuallyHidden>