Concept study · declarative visual binding

Visual Binding Study

Concept study

An expressive visual can stand in for a semantic element without stealing its meaning. Mark the visual with data-field-visual-for and a data-field-visual-role, call platform.visuals.scan(), and the field binds, lints, and inspects the pairing. The text remains real HTML. The SVG is a bound representation. The visual can be expressive, but the semantic source remains inspectable and accessible.

Data honesty

Data source: A real HTML heading (the semantic source of truth) plus one hand-authored SVG bound to it as a representation. The SVG is drawn by hand — not extracted from a font or generated from data.
Snapshot: Static content defined in-page; no external data, no snapshot, no snapshot script.
Live refresh: No live refresh. The platform scans, lints, and inspects the binding once in the browser; the inspector read-out updates live from that scan.
Not claimed: The platform verifies the accessibility contract (a representation must be aria-hidden, bound to a real source). It does not read or interpret the SVG's content — meaning lives in the semantic HTML, not the visual.

Semantic source real HTML

Fields read the page

This <h3 id="vb-source"> is the source of truth. Screen readers and search engines read this, not the SVG.

Bound representation hand-authored SVG

Expressive, but carries no independent meaning — so it is aria-hidden.

Inspector

scan: —
binding: —
lint: —

Toggle aria-hidden off and the lint flips to visual-not-hidden (the representation would double-expose the heading). Break the target and it flips to visual-orphan (a representation must bind a real source).