Ringdev Frontend Accessibility

Dev Frontend Accessibility Testing (Gate 2)

Overview

Ensure all frontend components meet WCAG 2.1 AA accessibility standards through automated axe-core scanning, keyboard navigation testing, and focus management validation.

Core principle: Accessibility is not optional. All components MUST be accessible to all users, including those using keyboard navigation, screen readers, and assistive technologies.

CRITICAL: Role Clarification

This skill ORCHESTRATES. Frontend QA Analyst Agent (accessibility mode) EXECUTES.

Standards Reference

MANDATORY: Load testing-accessibility.md standards via WebFetch.

Step 1: Validate Input

REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
- language: [typescript only]

OPTIONAL INPUT:
- gate1_handoff: [full Gate 1 output]

if any REQUIRED input is missing:
  → STOP and report: "Missing required input: [field]"

if language != "typescript":
  → STOP and report: "Frontend accessibility testing only supported for TypeScript/React"

Step 2: Dispatch Frontend QA Analyst Agent (Accessibility Mode)

Task tool:
  subagent_type: "ring:qa-analyst-frontend"
  prompt: |
    **MODE:** ACCESSIBILITY TESTING (Gate 2)

    **Standards:** Load testing-accessibility.md

    **Input:**
    - Unit ID: {unit_id}
    - Implementation Files: {implementation_files}
    - Language: typescript

    **Requirements:**
    1. Run axe-core scans on all components (all states: default, loading, error, empty, disabled)
    2. Test keyboard navigation (Tab, Enter, Escape, Arrow keys)
    3. Test focus management (trap, restoration, auto-focus)
    4. Verify semantic HTML usage
    5. Check ARIA attributes
    6. Verify color contrast

    **Output Sections Required:**
    - ## Accessibility Testing Summary
    - ## Violations Report
    - ## Handoff to Next Gate

Step 3: Evaluate Results

Parse agent output:

if "Status: PASS" in output:
  → Gate 2 PASSED
  → Return success with metrics

if "Status: FAIL" in output:
  → Dispatch fix to implementation agent (ring:frontend-engineer or ring:ui-engineer)
  → Re-run accessibility tests (max 3 iterations)
  → If still failing: ESCALATE to user

Step 4: Generate Output

## Accessibility Testing Summary
**Status:** {PASS|FAIL}
**Components Tested:** {count}
**Violations Found:** {count}
**Keyboard Nav Tests:** {count}
**Focus Management Tests:** {count}

## Violations Report
| Component | States Scanned | Violations | Status |
|-----------|---------------|------------|--------|
| {component} | {states} | {count} | {PASS|FAIL} |

## Handoff to Next Gate
- Ready for Gate 3 (Unit Testing): {YES|NO}
- Iterations: {count}

Severity Calibration

Report all severities. CRITICAL = immediate fix (legal risk). HIGH = fix before gate pass. MEDIUM = fix in iteration. LOW = document.

Anti-Rationalization Table

See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:

Converted and distributed by TomeVault — claim your Tome and manage your conversions.