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 shared view classes, accessibility metadata is emitted at the framework level—developers don't need to manually add ARIA attributes to individual components.

In a conventional web framework, accessibility is a per-component concern: every button, list, and form field requires manual ARIA attributes, and maintenance costs scale linearly ($O(N)$) with screen count. In STRVCT, the same $\sim$15 view classes render every application's UI, so fixing accessibility in those shared primitives fixes it across every screen in every application.

SvFieldTile implements syncAriaFromSlotMetadata() to map slot metadata directly to ARIA attributes:

Example Slot Declaration:

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

Produces a field tile emitting aria-required="true", aria-valuemin="0", aria-valuemax="999", and aria-description="Current character hit points" without custom accessibility code.

Domain models can override default ARIA properties by implementing protocol hooks on SvTitledNode:

• Tile Focusability: Tiles use tabindex="-1", making them focusable programmatically without cluttering the global browser Tab order.
• Focus Follows Selection: When a tile is selected, SvTilesView sets aria-current="true" and moves DOM focus to the tile.
• Keyboard Navigation: Arrow keys navigate tiles in columns; Enter opens subnode details; Escape moves focus up to the parent column.
• Focus Indicators: Styled using :focus-visible (2px solid cornflower blue outline). High-contrast mode (prefers-contrast: more) increases outlines to 3px solid white.

• Reduced Motion (prefers-reduced-motion: reduce): Animations and transitions are reduced to 0.01ms, scroll behavior switches to auto (instant), and iteration counts lock to 1.
• High Contrast (prefers-contrast: more): Focus outlines increase to 3px solid white with tighter offsets.

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