Decorative by contract

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.

That covers the engine's own motion. If you drive animation from a feedback variable, gate it the same way — the value is still there under reduced motion, so nothing is lost:

Scope, stated plainly: WCAG 2.2 SC 2.3.3 (Animation from Interactions) is Level AAA, and the prefers-reduced-motion technique is the good-practice tier above the AA baseline. Honouring it is necessary, not sufficient. The stronger claim — "reduced motion removes motion, not meaning" — only holds surface by surface, wherever a field-encoded ranking, weight, or relationship also has a static channel (authored weight, inline order, a printed value). The site verifies that per surface in its end-to-end suite rather than asserting it.

/* the field writes --field-density on a body; you can read it in CSS */
.headline {
  /* density gives a little weight + lift — a motion you authored, not the engine's */
  transform: translateY(calc(var(--field-density, 0) * -2px));
  transition: transform 140ms var(--ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  /* meaning lives in state, not motion — drop the transition, keep nothing essential here */
  .headline { transition: none; transform: none; }
}

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.

Binding a decorative visual to the element that carries its meaning, so assistive tech skips the canvas and reads the source:

<!-- the canvas/overlay is decorative; the <h2> carries the meaning -->
<h2 id="sales">Q3 sales</h2>
<canvas data-field-visual data-field-source="#sales" aria-hidden="true"></canvas>
<!-- VisualBindingRegistry keeps the visual aria-hidden unless it carries independent
     meaning; lint() flags an orphan source or an un-hidden decorative layer. -->