Accessibility

STRVCT provides built-in accessibility support that works automatically for every application built on the framework. Because the UI is derived from model nodes through a small set of view classes, accessibility metadata is emitted at the framework level -- developers don't need to add ARIA attributes to individual components.

This is a direct consequence of the naked objects architecture. In a conventional web framework, accessibility is a per-component concern: every button, list, and form field needs manual ARIA attributes, and the cost scales linearly ($O(N)$) with the number of components. In STRVCT, the same $\sim$15 view classes render every application's UI, so fixing accessibility in those classes fixes it everywhere.

Most frameworks require developers to manually add accessibility attributes to each component. STRVCT's architecture inverts this: since the framework generates views from the model, it can also generate accessibility metadata from the model -- automatically, in one place, for all applications.

• The slot system already describes the data: Slot metadata maps almost directly to ARIA attributes (description() $\rightarrow$ aria-description, isReadOnly() $\rightarrow$ aria-readonly, isRequired() $\rightarrow$ aria-required).
• JSON Schema annotations serve double duty: The same annotations that generate JSON Schema for AI tool calls also drive accessibility attributes. A slot configured with setMinimum(0) and setMaximum(100) emits both JSON Schema constraints for AI and aria-valuemin="0" / aria-valuemax="100" for screen readers. The investment in richer slot annotations directly improves both AI integration and accessibility.
• The node hierarchy maps to ARIA patterns: The tile/stack navigation model (drill in, drill out, select with arrows) maps naturally to ARIA roles (SvTilesView $\rightarrow$ list, SvTile $\rightarrow$ link, SvFieldTile $\rightarrow$ group, selected tile $\rightarrow$ aria-current).

ARIA Roles

Each core view class emits an appropriate ARIA role:

View classes derive ARIA labels from node metadata:

SvTitledNode provides methods that domain objects can override to customize accessibility behavior without modifying view code:

Returning null defers to the view's default behavior. Returning a value overrides it. This follows the same pattern as setNodeViewClass() -- the framework provides sensible defaults, and the domain object overrides when it knows better.

ARIA states are updated dynamically through the framework's notification system:

• aria-current -- Set to "true" on the selected tile, removed when deselected. The selected tile also receives focus.
• aria-checked -- Updated on SvBooleanFieldTile when the boolean value changes.
• aria-selected -- Updated on SvOptionNodeTile based on isPicked() state.
• aria-disabled -- Set on SvActionFieldTile when the action's node is not enabled.
• aria-readonly -- Set on SvFieldTile when the field is not editable.

SvFieldTile includes a syncAriaFromSlotMetadata() method that reads slot annotations and emits corresponding ARIA attributes:

{
    const slot = this.newSlot("hitPoints", 0);
    slot.setSlotType("Number");
    slot.setIsRequired(true);
    slot.setAnnotation("minimum", 0);
    slot.setAnnotation("maximum", 999);
    slot.setDescription("Current character hit points");
}

Produces a field tile with aria-required="true", aria-valuemin="0", aria-valuemax="999", and aria-description="Current character hit points" -- with no accessibility-specific code from the developer.

• Opt-in via nodes: Any node can declare itself as a live region by implementing nodeAriaLive() returning "polite" or "assertive". When SvTilesView syncs from a node with this method, it sets aria-live on the container.
• Direct on chat: SvChatMessageTile sets aria-live="polite" directly, so new chat messages and AI responses are announced to screen readers as they arrive.

• Tiles are programmatically focusable via tabindex="-1". This makes them reachable by the framework's focus management without adding them to the Tab order.
• Focus indicators use :focus-visible styling (2px solid cornflower blue outline) that appears only for keyboard navigation, not mouse clicks.
• High contrast mode (prefers-contrast: more) increases the focus outline to 3px solid white for maximum visibility.
• Focus follows selection -- when a tile is selected, it receives both aria-current="true" and DOM focus, ensuring screen readers announce the newly selected item.

• Reduced Motion (prefers-reduced-motion: reduce): All animations and transitions are reduced to 0.01ms duration, iteration counts set to 1, and scroll behavior set to auto (instant).
• High Contrast (prefers-contrast: more): Focus indicators enhanced to 3px solid white with tighter offset.

Landmark roles provide structural navigation for screen readers:

• SvStackView is marked as navigation -- the top-level navigation structure
• SvNavView is marked as region with an aria-label derived from the current node's title
• SvBreadCrumbsTile is marked as navigation with aria-label="Breadcrumb"

• Nodes: Core SvNode domain abstraction.
• Slots: Complete guide to slot metadata and declarations.