-
Notifications
You must be signed in to change notification settings - Fork 6
Fix Web Issues
Interactive fix mode — reads an audit report and applies accessibility fixes. Safe, deterministic issues are applied automatically. Issues requiring judgment are shown one at a time for your approval.
- You have an audit report and want to start fixing
- You want a guided, issue-by-issue fix workflow without manually hunting through files
- You want to apply safe fixes automatically and then review the trickier ones
- You want the agent to re-verify fixes by re-running axe-core after applying them
In GitHub Copilot Chat:
/fix-web-issues
Or specify the report path:
/fix-web-issues ACCESSIBILITY-AUDIT.md
The agent asks two questions:
-
Report path — which audit report to use (default:
ACCESSIBILITY-AUDIT.md) -
Fix mode:
- Fix all auto-fixable issues — apply safe fixes without asking (fastest)
- Fix issues one by one — show each fix for approval before applying
- Fix a specific issue — pick by issue number from the report
The agent reads the report and divides all issues into two buckets:
Auto-fixable (applied without asking):
| Issue | Fix |
|---|---|
Missing lang on <html>
|
Add lang="en"
|
| Missing viewport meta | Add responsive viewport meta tag |
<img> without alt
|
Add alt="" for decorative; prompt for content images |
Positive tabindex
|
Replace with tabindex="0" or remove |
outline: none |
Add outline: 2px solid with :focus-visible
|
Missing <label>
|
Add label with matching for/id
|
Missing scope on <th>
|
Add scope="col" or scope="row"
|
Missing autocomplete
|
Add appropriate value |
| New-tab link without warning | Add visually hidden (opens in new tab) text |
Human-judgment (shown for approval):
- Alt text content for meaningful images — only you know the purpose
- Heading hierarchy restructuring — affects visual design
- Link text rewriting — UX copy decision
- ARIA role assignment — depends on intended interaction
- Live region placement — depends on UX intent
The agent detects your stack (React, Vue, Angular, Svelte, HTML) and generates correct syntax for each fix. No JSX in Vue files, no for attributes as htmlFor in plain HTML.
Each applied fix is reported:
Fix #1: label — Missing label for email input
File: src/components/LoginForm.jsx:18
Before: <input type="email" placeholder="Email" />
After: <label htmlFor="email">Email address</label>
<input type="email" id="email" placeholder="Email" autoComplete="email" />
Status: Applied
Fix #2: color-contrast — Placeholder text low contrast
File: src/styles/forms.css:42
Status: Needs approval — color changes may conflict with brand guidelines
After applying fixes, if a URL is available, the agent re-runs axe-core to confirm the issues are resolved and reports the updated score.
Fixes Applied: 8
Verified by re-scan: 7/8 passed
Issues remaining: 4 (require manual attention)
Updated score: 72 → 91 (+19 points, C → A)
The audit report is updated with a "Fixes Applied" section.
/fix-web-issues # Use default ACCESSIBILITY-AUDIT.md
/fix-web-issues reports/audit-jan.md # Use a specific report
/fix-web-issues → Fix mode: Fix all auto-fixable # Apply auto-fixes without prompts
/fix-web-issues → Fix mode: Fix issues one by one # Approve each before applying
| Agent | Role |
|---|---|
| web-issue-fixer | Applies the actual code changes |
| web-accessibility-wizard | Orchestrates the workflow and verification scan |
- audit-web-page — generate the audit report this prompt reads
- compare-web-audits — track progress after running fixes
- Accessibility Lead
- Web Accessibility Wizard
- Document Accessibility Wizard
- Alt Text and Headings
- ARIA Specialist
- Contrast Master
- Forms Specialist
- Keyboard Navigator
- Link Checker
- Live Region Controller
- Modal Specialist
- Tables Data Specialist
- Word Accessibility
- Excel Accessibility
- PowerPoint Accessibility
- PDF Accessibility
- Office Scan Config
- PDF Scan Config
- Testing Coach
- WCAG Guide