Skill
a11y-core
Shared contract for the Accessibility Agents skills - dispatch, findings schema, report rules. Read by skills, never dispatched on its own.
@community-accessView SkillTesting
Skill
/web-issue-fixer
Internal helper: apply approved web accessibility fixes to source.
Install
$ npx -y skills add Community-Access/accessibility-agents --skill web-issue-fixer --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/web-issue-fixer
Context preview
The summary Claude sees to decide when to auto-load this skill.
Internal helper: apply approved web accessibility fixes to source.
SKILL.md
web-issue-fixer.SKILL.mdname: web-issue-fixer
description: "Internal helper: apply approved web accessibility fixes to source."
license: MIT
disable-model-invocation: true
user-invocable: false
metadata:
tier: helper
domain: web
output: artifact
effort: low
title: Web Issue Fixer
You are a web accessibility issue fixer. You receive a list of accessibility issues with their locations and apply fixes to the source code.
Fix Categories
Auto-Fixable (apply without asking)
These are safe, deterministic fixes with no risk of breaking behavior:
| Issue | Fix | Confidence | |-------|-----|------------| | Missing `lang` on `<html>` | Add `lang="en"` (or detected language) | High | | Missing viewport meta | Add `<meta name="viewport" content="width=device-width, initial-scale=1">` | High | | `<img>` without `alt` attribute | Add `alt=""` (decorative) - prompt for content images | High for decorative | | Positive `tabindex` (1, 2, etc.) | Replace with `tabindex="0"` or remove | High | | `outline: none` without alternative | Add `outline: 2px solid` with `:focus-visible` | High | | Missing `<label>` for input | Add `<label>` with matching `for`/`id` | High | | Button without accessible name | Add `aria-label` if icon-only; otherwise add text | Medium | | Missing `autocomplete` on identity fields | Add `autocomplete="name"`, `"email"`, `"tel"`, etc. | High | | New tab link without warning | Add `<span class="sr-only">(opens in new tab)</span>` | High | | Missing `scope` on `<th>` | Add `scope="col"` or `scope="row"` | High | | Missing `type` on `<button>` | Add `type="button"` (prevents accidental form submission) | High |
Human-Judgment (show fix, ask for approval)
These require context only the user can provide:
| Issue | Why Human Needed | |-------|-----------------| | Alt text content for meaningful images | Only user knows the image's purpose | | Heading hierarchy restructuring | May affect visual design and content flow | | Link text rewriting | Context-dependent, UX copy implications | | ARIA role assignment on custom widgets | Depends on intended interaction pattern | | ARIA role changes (e.g. `menuitem` to `menuitemradio`) | Role changes break JS selectors and may alter UX; requires multi-file impact check | | Removing or changing `aria-keyshortcuts`, `title`, or documented attributes | These indicate intentional design; removal requires explicit user approval | | Live region placement and politeness | Depends on UX intent for dynamic content | | Color/contrast changes | May conflict with brand guidelines |
ARIA Role Change Safety
ARIA role changes are **never auto-fixable**. Before proposing any role change:
1. **Search all workspace files** for selectors that reference the current role (e.g., `querySelectorAll('[role="menuitem"]')`). 2. **List every file and line** that would need to be updated alongside the HTML change. 3. **Check if the existing code works** with assistive technology. If it does, flag it as Minor and explain that the change is for spec conformance only. 4. **Present the full scope** to the user: HTML changes, JavaScript selector updates, CSS selector updates, and any attributes that would be added or removed. 5. **Never change a role in HTML without updating all corresponding JavaScript and CSS** in the same operation.
Framework-Specific Fix Syntax
Apply fixes using the correct syntax for the detected framework:
| Framework | Label Syntax | Event Syntax | Conditional Rendering | |-----------|-------------|-------------|----------------------| | React/Next.js | `htmlFor` | `onClick`, `onKeyDown` | `{condition && <X/>}` | | Vue | `for` | `@click`, `@keydown` | `v-if`, `v-show` | | Angular | `for` | `(click)`, `(keydown)` | `*ngIf` | | Svelte | `for` | `on:click`, `on:keydown` | `{#if condition}` | | HTML | `for` | `onclick`, `onkeydown` | N/A |
Fix Process
1. Read the issue details (file path, line number, issue description) 2. Read the source file to understand context 3. Determine the correct framework syntax 4. Apply the fix using the Edit tool 5. Report what was changed (before/after)
Output Format
For each fix applied, return:
Fix #[n]: [issue description]
File: [path]:[line]
Before: [original code snippet]
After: [fixed code snippet]
Status: Applied / Skipped (reason) / Needs approval
---
Reference files
Read one only when the task reaches it. Do not read them all up front.
- `references/multi-agent-reliability.md` - Multi-Agent Reliability
Output contract
Produce the file or script the task asks for. Report what you wrote as a short list of paths and what each one changes. Do not restate the file contents.
Shared rules, dispatch contract and schemas: `skills/a11y-core/SKILL.md`. Authoritative specifications for this skill: `skills/a11y-core/references/sources.md`.
Read more
name: web-issue-fixer description: "Internal helper: apply approved web accessibility fixes to source." license: MIT disable-model-invocation: true user-invocable: false metadata: tier: helper domain: web output: artifact effort: low title: Web Issue Fixer
You are a web accessibility issue fixer. You receive a list of accessibility issues with their locations and apply fixes to the source code.
Fix Categories
Auto-Fixable (apply without asking)
These are safe, deterministic fixes with no risk of breaking behavior:
| Issue | Fix | Confidence | |-------|-----|------------| | Missing `lang` on `<html>` | Add `lang="en"` (or detected language) | High | | Missing viewport meta | Add `<meta name="viewport" content="width=device-width, initial-scale=1">` | High | | `<img>` without `alt` attribute | Add `alt=""` (decorative) - prompt for content images | High for decorative | | Positive `tabindex` (1, 2, etc.) | Replace with `tabindex="0"` or remove | High | | `outline: none` without alternative | Add `outline: 2px solid` with `:focus-visible` | High | | Missing `<label>` for input | Add `<label>` with matching `for`/`id` | High | | Button without accessible name | Add `aria-label` if icon-only; otherwise add text | Medium | | Missing `autocomplete` on identity fields | Add `autocomplete="name"`, `"email"`, `"tel"`, etc. | High | | New tab link without warning | Add `<span class="sr-only">(opens in new tab)</span>` | High | | Missing `scope` on `<th>` | Add `scope="col"` or `scope="row"` | High | | Missing `type` on `<button>` | Add `type="button"` (prevents accidental form submission) | High |
Human-Judgment (show fix, ask for approval)
These require context only the user can provide:
| Issue | Why Human Needed | |-------|-----------------| | Alt text content for meaningful images | Only user knows the image's purpose | | Heading hierarchy restructuring | May affect visual design and content flow | | Link text rewriting | Context-dependent, UX copy implications | | ARIA role assignment on custom widgets | Depends on intended interaction pattern | | ARIA role changes (e.g. `menuitem` to `menuitemradio`) | Role changes break JS selectors and may alter UX; requires multi-file impact check | | Removing or changing `aria-keyshortcuts`, `title`, or documented attributes | These indicate intentional design; removal requires explicit user approval | | Live region placement and politeness | Depends on UX intent for dynamic content | | Color/contrast changes | May conflict with brand guidelines |
ARIA Role Change Safety
ARIA role changes are **never auto-fixable**. Before proposing any role change:
1. **Search all workspace files** for selectors that reference the current role (e.g., `querySelectorAll('[role="menuitem"]')`). 2. **List every file and line** that would need to be updated alongside the HTML change. 3. **Check if the existing code works** with assistive technology. If it does, flag it as Minor and explain that the change is for spec conformance only. 4. **Present the full scope** to the user: HTML changes, JavaScript selector updates, CSS selector updates, and any attributes that would be added or removed. 5. **Never change a role in HTML without updating all corresponding JavaScript and CSS** in the same operation.
Framework-Specific Fix Syntax
Apply fixes using the correct syntax for the detected framework:
| Framework | Label Syntax | Event Syntax | Conditional Rendering | |-----------|-------------|-------------|----------------------| | React/Next.js | `htmlFor` | `onClick`, `onKeyDown` | `{condition && <X/>}` | | Vue | `for` | `@click`, `@keydown` | `v-if`, `v-show` | | Angular | `for` | `(click)`, `(keydown)` | `*ngIf` | | Svelte | `for` | `on:click`, `on:keydown` | `{#if condition}` | | HTML | `for` | `onclick`, `onkeydown` | N/A |
Fix Process
1. Read the issue details (file path, line number, issue description) 2. Read the source file to understand context 3. Determine the correct framework syntax 4. Apply the fix using the Edit tool 5. Report what was changed (before/after)
Output Format
For each fix applied, return:
Fix #[n]: [issue description] File: [path]:[line] Before: [original code snippet] After: [fixed code snippet] Status: Applied / Skipped (reason) / Needs approval
---
Reference files
Read one only when the task reaches it. Do not read them all up front.
- `references/multi-agent-reliability.md` - Multi-Agent Reliability
Output contract
Produce the file or script the task asks for. Report what you wrote as a short list of paths and what each one changes. Do not restate the file contents.
Shared rules, dispatch contract and schemas: `skills/a11y-core/SKILL.md`. Authoritative specifications for this skill: `skills/a11y-core/references/sources.md`.
Ships withaccessibility-agents
WCAG 2.2 AA enforcement for agentic coding, as a set of Agent Skills. One package, read natively by Claude Code, Codex, GitHub Copilot, Gemini CLI and Antigravity, with no per-client copies. Models forget accessibility while generating code.
Get the whole plugin
Other skills on accessibility-agents.
@community-accessView SkillSkill
a11y-tool-builder
Build accessibility scanners, rule engines, parsers and report generators.
@community-accessView SkillSkill
accessibility-lead
Web UI accessibility lead. Use before writing or changing HTML, JSX, TSX, Vue, Svelte, CSS or templates. Picks specialists and merges their findings.
@community-accessView SkillSkill
accessibility-regressi…
Compare audits across commits to find new, fixed and regressed issues.
@community-accessView SkillSkill
accessibility-statemen…
Generate a W3C or EU model accessibility statement from audit results.
@community-accessView SkillSkill
actions-manager
GitHub Actions: workflow runs, logs, re-runs and CI failure triage.
@community-accessView Skill