Accessibility

Decorative by contract

The field is ambiance, never content. It's built so assistive tech skips it, motion preferences are honoured, and keyboard users get the same reactions as the mouse.

The canvas is hidden from assistive tech

Every field surface — <field-root>, <field-cell>, and mountField() — marks its canvas aria-hidden="true" automatically, sits at z-index: 0 behind the content, and is pointer-events: none. Screen readers and tab order never touch it.

Reduced motion is honoured

Under prefers-reduced-motion: reduce, the integrator runs with dt = 0 — the simulation freezes to a single calm frame, and the CSS backdrop animation is disabled. The field is present but still.

Focus engages, like hover

Bodies marked data-hot activate on focus as well as hover — so a keyboard user tabbing through links gets the same field reaction (and the same --field-density feedback) a pointer user gets. Reactions are progressive enhancement layered on real, focusable elements.

Guidance for consumers

  • Never put essential content only in a render layer. Semantic HTML is the source of meaning. Canvas, SVG overlays, diagnostic views, and vectorized visuals may clarify, emphasize, or represent state, but the interface must remain usable without them.
  • Pair visuals with a semantic source. When a visual layer represents content, bind it through the platform's VisualBindingRegistry so it is aria-hidden unless it carries independent meaning; lint() flags orphan and un-hidden visuals. See the live accessibility preview.
  • Keep text legible on its own. Don't rely on the field for contrast — --field-density effects should enhance already-readable type, not create it.
  • Respect the user's setting. If you add your own --field-density-driven motion, gate it behind prefers-reduced-motion too. Meaning lives in state, not motion — reduced motion loses none of it.
  • Words glow, they are never drawn. The engine never assembles particles into letterforms — text stays real and selectable.