---
name: a11y-self-check
description: Proactively validates Claude Code's own generated HTML/JSX/TSX output for accessibility before presenting to users. Use this skill automatically when generating UI code to ensure WCAG 2.1 AA compliance.
---
# A11y Self-Check for Claude Code
This skill enables Claude Code to validate its own generated HTML/JSX/TSX output for accessibility issues before presenting code to users.
## When to Use
Proactively run self-check when you (Claude Code):
1. **Generate new HTML/JSX/TSX files** - Validate before suggesting to user
2. **Write UI components** - Check before completing the task
3. **Modify existing templates** - Verify changes don't introduce issues
4. **Create forms, modals, navigation** - High-risk accessibility areas
## Self-Check Workflow
### Step 1: Write Code to Temporary File
When generating HTML/JSX/TSX code, write it to a temporary file:
```bash
# For generated HTML
cat > /tmp/claude-generated.html << 'EOF'
[your generated HTML here]
EOF
# For JSX/TSX
cat > /tmp/claude-generated.tsx << 'EOF'
[your generated JSX/TSX here]
EOF
```
### Step 2: Run A11y Lint
Execute the lint script on the temporary file:
```bash
bash ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner/scripts/lint-html.sh /tmp/claude-generated.html
```
### Step 3: Analyze Results
Check the JSON output for issues:
```json
{
"summary": {
"axe_violations": 0,
"markuplint_problems": 0,
"total_issues": 0
}
}
```
- If `total_issues` is 0: Code is ready to present
- If `total_issues` > 0: Fix issues before presenting
### Step 4: Fix and Re-validate
If issues found:
1. Look up WCAG/ARIA reference: `${CLAUDE_PLUGIN_ROOT}/skills/wcag-aria-lookup/`
2. Apply fixes to your generated code
3. Re-run lint to confirm resolution
4. Present corrected code to user
## Quick Checks (No Tool Required)
Before running lint tools, perform mental checks:
### Images
- [ ] All `` have `alt` attribute
- [ ] Decorative images use `alt=""`
- [ ] Complex images have `aria-describedby`
### Forms
- [ ] All inputs have associated `