Labeled canvas versus hidden DOM mirror for three.js accessibility

The choice depends on whether the 3D scene is illustrative or interactive. Use a single labeled canvas when the scene is a static visual aid; use a hidden DOM mirror when the user must interact with individual objects or receive granular state updates.

Decision Framework

Because three.js does not provide built-in semantic mapping for its scene graph, the "authoritative" representation is defined by the intended user goal rather than a library setting.

Option 1: Labeled Canvas (The Static Approach)

This approach treats the entire WebGL viewport as a single image. It is the most performant and lowest-maintenance option for scenes where object identity is irrelevant to the user's task.

• Implementation: Set role="img" and a descriptive aria-label on the canvas element.
• When to use: The scene is decorative, a static data visualization, or a background element.
• Constraint: Do not rely on HTML fallback content inside the <canvas> tags; modern browsers supporting WebGL ignore this content for screen readers.

Option 2: Hidden DOM Mirror (The Interactive Approach)

This approach creates a parallel HTML structure (a "mirror") that reflects the state of the three.js scene graph. This allows screen-reader users to navigate objects via the Tab key and receive updates through standard DOM events.

• Implementation: Mark the renderer.domElement with aria-hidden="true". Create a visually hidden <div> containing buttons, lists, or links that correspond to scene objects.
• When to use: The scene contains interactive elements, requires navigation between specific objects, or provides real-time data updates.
• Constraint: To prevent "announcement flooding," avoid linking aria-live regions to the requestAnimationFrame loop. Updates should be throttled or triggered only by discrete state changes.

Implementation Comparison

Metric	Labeled Canvas	DOM Mirror
Maintenance	Low (Single string)	High (State synchronization)
Granularity	Viewport level	Object level
Performance	Negligible overhead	DOM mutation overhead

Verification Steps

To ensure the chosen method is functioning correctly, perform these scoped checks:

1. For Labeled Canvas: Use a screen reader (NVDA or VoiceOver) to focus the canvas. It should be announced as a single image with your provided label.
2. For DOM Mirror: Use the Tab key to navigate. Focus should move through the mirror elements; the WebGL canvas itself should be skipped entirely.
3. For State Sync: Trigger a change in the 3D scene and verify the mirror updates only after a defined throttle period (e.g., 100ms–500ms).

Diagnostic Detail Required: Does your scene require the user to perform actions on specific 3D objects (e.g., clicking a specific node in a graph), or is the scene providing a general visual context for other page content?