Agent skill
ring:dev-frontend-accessibility
Gate 2 of frontend development cycle - ensures all components pass axe-core automated accessibility scans with zero WCAG 2.1 AA violations.
Install this agent skill to your Project
npx add-skill https://github.com/LerianStudio/ring/tree/main/dev-team/skills/dev-frontend-accessibility
SKILL.md
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.
<block_condition>
- Any WCAG AA violation = FAIL
- Missing keyboard navigation tests = FAIL
- Missing focus management for modals = FAIL </block_condition>
CRITICAL: Role Clarification
This skill ORCHESTRATES. Frontend QA Analyst Agent (accessibility mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Agent | Run axe-core, write keyboard tests, verify ARIA |
Standards Reference
MANDATORY: Load testing-accessibility.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/frontend/testing-accessibility.md </fetch_required>
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
| Severity | Criteria | Examples |
|---|---|---|
| CRITICAL | Legal compliance risk, users blocked | Missing alt text on images, no keyboard access, form without labels |
| HIGH | WCAG AA violation, significant barrier | Color contrast fails, missing focus indicators, no skip links |
| MEDIUM | Minor accessibility gaps | Non-semantic HTML, missing ARIA on complex widgets |
| LOW | Best practices, enhancements | Optional ARIA improvements, landmark suggestions |
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:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "It's an internal tool" | WCAG compliance is mandatory for all applications. | Run accessibility tests |
| "The library handles it" | Components can be misused. axe-core catches misuse. | Run axe-core scans |
| "We'll fix accessibility later" | Retrofitting costs 10x. Fix now. | Fix violations now |
| "Only one violation, it's minor" | One violation = FAIL. No exceptions. | Fix all violations |
| "Keyboard nav works, I tested manually" | Manual ≠ automated. Tests must be repeatable. | Write automated tests |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
ring:regulatory-templates
5-stage regulatory template orchestrator - manages setup, Gate 1 (analysis + auto-save), Gate 2 (validation), Gate 3 (generation), optional Test Gate, optional Contribution Gate. Supports any regulatory template (BACEN, RFB, CVM, SUSEP, COAF, or other).
ring:using-finops-team
3 FinOps agents: 2 for Brazilian financial regulatory compliance (BACEN, RFB, Open Banking), 1 for infrastructure cost estimation when onboarding customers. Supports any regulatory template via open intake system.
ring:regulatory-templates-gate1
Gate 1 sub-skill - performs regulatory compliance analysis, field mapping, batch approval by confidence level, and auto-saves dictionary after approval. Supports both pre-defined templates (dictionary exists) and new templates (any spec).
ring:regulatory-templates-gate2
Gate 2 sub-skill - validates uncertain mappings from Gate 1 and confirms all field specifications through testing.
ring:regulatory-templates-gate3
Gate 3 sub-skill - generates complete .tpl template file with all validated mappings from Gates 1-2.
ring:infrastructure-cost-estimation
Orchestrates infrastructure cost estimation with tier-based or custom TPS sizing. Offers pre-configured tiers (Starter/Growth/Business/Enterprise) or custom TPS input. Skill discovers components, asks shared/dedicated for EACH, selects environment(s), reads actual Helm chart configs, then dispatches agent for accurate calculations.
Didn't find tool you were looking for?