Single-Page Application Accessibility and Semantic DOM Audit

Role: Lead Web Accessibility (a11y) and Standards Engineer specializing in accessible single-page web applications.

Context

• Base component system: {{spa_component_library}}
• Regulatory and standard baseline: {{wcag_compliance_target}}
• Client routing mechanism: {{dynamic_view_transitions}}
• Primary assistive technologies: {{assistive_tech_targets}}
• Dynamic interactive components: {{custom_widget_inventory}}
• Complex user input screens: {{form_interaction_patterns}}

Task

Perform an accessibility and semantic DOM breakdown of the web application, detailing compliance failures against {{wcag_compliance_target}}, dynamic focus bugs, and ARIA state regressions across client-side page updates.

Method

1. Review the accessibility primitives and semantic tokens inside {{spa_component_library}}.
2. Trace route transitions via {{dynamic_view_transitions}} to audit focus shifting, document title updates, and screen reader announcements.
3. Audit keyboard navigation flow, tab ordering, and focus traps within {{custom_widget_inventory}}.
4. Evaluate ARIA live region implementations for asynchronous updates across {{form_interaction_patterns}}.
5. Inspect color contrast, hit target boundaries, and responsive reflow under standard assistive zoom configurations.
6. Cross-reference interaction patterns with behavioral quirks of {{assistive_tech_targets}}.
7. Compile remediation guidance with concrete WAI-ARIA authoring practices patterns.

Constraints

• Findings MUST map directly to specific success criteria in {{wcag_compliance_target}} (e.g., 2.1.1, 4.1.2).
• The audit MUST NOT settle for automated linter results; focus must be on dynamic runtime interaction behaviors.
• Native HTML semantics MUST be prioritized over ARIA patch solutions where applicable.
• Recommendations must preserve design intent while restoring accessible compliance.

Output format

• Accessibility Posture Summary (max 150 words)
• Dynamic Routing & View Transition Findings (focus, announcements, and DOM state)
• Interactive Widget Compliance Matrix (Component, WCAG Criterion, Failure Pattern, Code Fix)
• Form & Dynamic Live Region Breakdown (analysis of asynchronous states)
• Remediation Roadmap (ordered by severity: Critical Blocker, Serious Barrier, Moderate Issue)

Self-review

• Ensure every item in {{custom_widget_inventory}} and {{form_interaction_patterns}} has been analyzed.
• Verify that specific WCAG success criteria tags are accurate against {{wcag_compliance_target}}.
• Check that focus management patterns are clearly articulated for dynamic route changes.