Menu
Web accessibility patterns — WCAG 2.1 AA, ARIA, keyboard navigation, screen readers
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when creating an SDD implementation plan from exploration.md, with deep interview, task breakdown, and batch assignments.
Generate a Product Requirements Document via interactive interview. Writes a markdown PRD that captures intent, user stories, and out-of-scope. Use when the brief is vague, when no ticket is bound, or when SDD invokes it from its PRD gate.
Use when executing an SDD plan via batch-based task implementation, tracking progress with [ ]/[X] markers and quality gates.
Use when starting an SDD workflow to discover codebase context, curate relevant files, and prepare exploration.md for planning.
SDD Orchestrator coordinates SDD (Spec-Driven Development) workflow via sub-agents
Use when reviewing code changes before commit, comparing implementation against SDD plan, or doing standalone code review with advisor consultation.
| name | web-accessibility-advisor |
| scope | ["frontend","accessibility"] |
| description | Web accessibility patterns — WCAG 2.1 AA, ARIA, keyboard navigation, screen readers |
| version | 1.0 |
| tags | ["accessibility","a11y","wcag","aria","keyboard","screen-reader"] |
Review and guide web accessibility implementation to meet WCAG 2.1 Level AA compliance. Focus on semantic HTML, ARIA usage, keyboard navigation, and screen reader compatibility.
Use native HTML elements before reaching for ARIA. Native elements have built-in accessibility semantics, keyboard handling, and screen reader support.
The ARIA rule: No ARIA is better than bad ARIA. Only add ARIA when semantic HTML is insufficient.
Detailed patterns and examples are available in the references/ directory. Load these on demand when the review touches the specific topic.
references/wcag-criteria.md for WCAG 2.1 AA success criteria, the POUR principles, and color contrast requirements.references/aria-patterns.md for ARIA landmark roles, interactive widget roles, properties, and states with examples.references/keyboard-navigation.md for tab order rules, keyboard interactions by widget type, and focus management patterns.references/accessible-components.md for accessible form, modal dialog, navigation menu, skip link, and live region patterns.Before finalizing your review, check gotchas.md for common Claude mistakes in this domain.
alt text (empty alt="" for decorative images)outline)aria-live or role="alert"This skill supports advisor mode: when invoked by the SDD orchestrator with a GUIDANCE CONTEXT FROM PLANNER block in the prompt, use the following procedure instead of the standard interactive review flow.
Advisor mode is active when the prompt contains:
GUIDANCE CONTEXT FROM PLANNER: blockCURRENT PLAN EXCERPT: blockGUIDANCE CONTEXT FROM PLANNER block to understand what the planner needs reviewed.CURRENT PLAN EXCERPT to see the specific tasks and design decisions.Focus ONLY on your specialist domain: WCAG 2.1 AA, ARIA patterns, keyboard navigation, focus management.
### Strengths
- [What looks sound in the plan from this skill's domain perspective]
### Issues Found
[Severity: Critical / Major / Minor — reference specific task IDs or section names]
- T001: [issue description]
### Recommendations
[Specific, actionable. Reference task ID or section name for each recommendation.]
- T001: [recommendation]
Save full advice output to engram:
mem_save(
title: "sdd/{change-name}/guidance/web-accessibility-advisor",
type: "architecture",
project: "{project-name}",
content: "{your full structured advice output}"
)
If engram is unavailable, skip silently.
Return a concise summary (3-5 bullet points) plus the engram observation ID:
### Summary
- [key point 1]
- [key point 2]
- ...
### Engram ID
{observation_id or "unavailable"}
Do NOT return an SDD Envelope when in advisor mode.