Concept study · declarative visual binding
Visual Binding 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.
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).