Fix the issues from an accessibility audit report in code, critical first, committing each fix and logging what was fixed, deferred or needs a design decision. Use when the user has an accessibility audit report and asks to start fixing its issues. Not for a design-stage check or feedback on one component; see /accessibility-checklist, /design-a11y-audit or /coaching-a11y.
git clone https://github.com/bromso/singularskills.git--- name: accessibility-remediate description: Fix the issues from an accessibility audit report in code, critical first, committing each fix and logging what was fixed, deferred or needs a design decision. Use when the user has an accessibility audit report and asks to start fixing its issues. Not for a design-stage check or feedback on one component; see /accessibility-checklist, /design-a11y-audit or /coaching-a11y. metadata: argument-hint: "[project] [--skip-checks]" workflow: accessibility phase: 4 artifact: 04-remediate.md stack-aware: true --- # Remediate Fix the accessibility issues found in "$ARGUMENTS". Apply remediation patterns to resolve WCAG violations, starting with critical barriers. **Arguments.** `$ARGUMENTS` may contain the project name and optional flags. Take the first token as `<project>` and treat `--skip-checks` as a flag; never include flags in file paths. All paths below use `<project>`. If `--skip-checks` is present, skip the prerequisite check and, **before writing any artifact**, append one line to `.singularskills/log.jsonl`: `{"ts":"<ISO timestamp>","skill":"accessibility-remediate","workflow":"accessibility","phase":4,"project":"<project>","event":"skipped","artifact":"04-remediate.md","note":"<reason or \"none given\">"}`. ## Prerequisites **Part of a workflow.** This skill is phase 4 (Remediate) of the WCAG-EM workflow (`accessibility`); cross-domain workflows run it too. First check `.singularskills/log.jsonl` for an open run for this project: a `run-started` line with `"project":"<project>"` and no later `run-finished` line for the same `workflow` and `project`. If one exists, the conductor is running you: continue here. Otherwise, if the user asked to start, run, continue or resume a process or workflow rather than this one step, do not continue here: invoke the `workflow` skill with the workflow the user asked for, or `accessibility` when they named none, followed by `<project>`; it runs this phase in order, asks before it writes and records the run. Otherwise continue here: a later phase runs on its own, behind its gate. **Stack.** Before you build, test, lint, run or generate code, read the `Stack` section of the project's `AGENTS.md`, or of `CLAUDE.md` when `AGENTS.md` has none. Use its commands exactly as written, its `layout` for where files go and its `rules` as requirements. If it names a `profile`, also read the file `<profile>.md` in the `stacks` folder of this skill's bundled references for the full commands, layout and rules; the project's own keys win where both speak. If there is no `Stack` section, run the `singular-detect` skill, state what you inferred in one line, and offer to write the section with `singular-init`. Never assume a package manager, test runner or formatter the project did not declare. Run this skill's gate before writing: `sh <this skill's folder>/scripts/gate.sh <project> <project root>`, where `<project root>` is the folder that contains `.singularskills/` (use `.` when you are already there). If it exits non-zero, stop and tell the user what it printed, unless `--skip-checks` was given (see Arguments). On a refusal, before you stop, append this line to `.singularskills/log.jsonl` (create the folder and file if missing): `{"ts":"<ISO timestamp>","skill":"accessibility-remediate","workflow":"accessibility","phase":4,"project":"<project>","event":"refused","artifact":"04-remediate.md","note":"<what the gate printed>"}`. Once the gate has passed, or under `--skip-checks` once you have appended the `skipped` line, append this line before you start work: `{"ts":"<ISO timestamp>","skill":"accessibility-remediate","workflow":"accessibility","phase":4,"project":"<project>","event":"started","artifact":"04-remediate.md","note":""}`. Read `.singularskills/accessibility/<project>/03-report.md`. If this file does not exist, tell the user: > Phase 3 (Report) has not been completed for "<project>". Run `/accessibility-report <project>` first, or use `--skip-checks` to bypass. ## Process 1. **Read context files:** - Read `.singularskills/accessibility/<project>/03-report.md` for prioritized issues and remediation steps - Read `references/remediation-patterns.md` for common fix patterns 2. **Fix issues by priority:** - Start with Critical severity issues - Then Major, then Minor - For each issue: - Read the affected code - Apply the recommended fix from the report - Follow the remediation patterns in shared resources - Verify the fix doesn't introduce new issues - Commit each fix or group of related fixes 3. **Log remediation progress:** - Track each issue: fixed, deferred, or cannot fix (with reason) - Record commit hashes for each fix - Note any issues that require design changes or stakeholder decisions 4. **Write the artifact** to `.singularskills/accessibility/<project>/04-remediate.md` with sections: - **Fixes Applied** — each issue with what was changed and commit hash - **Deferred Issues** — issues not fixed and why - **Design Decisions Needed** — issues requiring stakeholder input - **New Considerations** — any new issues discovered during remediation ## References - `references/stacks/bun-react-ts.md` and `references/stacks/rust-gpui.md`: the shipped stack profiles ## Output The remediation log written to `.singularskills/accessibility/<project>/04-remediate.md`. Present a summary to the user highlighting: - Issues fixed vs. total - Commits made - Any deferred issues needing attention **Record the run.** After you have written the artifact, append this line to `.singularskills/log.jsonl` (the `started` line of Prerequisites, with `"event":"finished"`): `{"ts":"<ISO timestamp>","skill":"accessibility-remediate","workflow":"accessibility","phase":4,"project":"<project>","event":"finished","artifact":"04-remediate.md","note":""}`. Open the artifact with this frontmatter (`agent` is the agent you run in, or `unknown`; `gate` is `passed` when the gate ran clean and `skipped` under `--skip-checks`): ```yaml --- skill: accessibility-remediate workflow: accessibility phase: 4 project: <project> started: <ISO timestamp> finished: <ISO timestamp> agent: <the agent you run in, or "unknown"> gate: <passed|skipped> --- ``` End the artifact with `## Decisions` and `## Open questions`, in this shape: ```markdown ## Decisions - <what was chosen> — <why> — <what was rejected> ## Open questions - <what the next phase or a reviewer must settle> ```
No install command available. Check the GitHub repository for manual installation instructions.
git clone https://github.com/bromso/singularskills/tree/main/skills/accessibility-remediateCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
I have an accessibility audit report for [COMPANY]'s [WEBSITE/APP] from [AUDIT_TOOL_NAME]. Here’s the report: [PASTE_REPORT_HERE]. Fix the issues in the code, prioritizing critical problems first. For each fix: commit the change with a message like 'Fix: [ISSUE_TYPE] on [FILE] (WCAG [SC_NUMBER])', log what was fixed, deferred (with reason), or needs a design decision (with rationale). Start with the most critical issues and work down the list. Use the original codebase structure and coding standards of [COMPANY].
# Accessibility Remediation Log ## Summary of Changes Fixed 8 critical, 5 high, and 3 medium issues. Deferred 2 low-priority issues and 1 requiring design input. --- ## Critical Fixes (Committed) ### 1. Missing `alt` Text on Hero Image (wcag-1.1.1) **File:** `src/components/Hero.jsx` **Before:** ```jsx <img src="hero.jpg" /> ``` **After:** ```jsx <img src="hero.jpg" alt="A team collaborating in a modern office space" /> ``` **Commit:** `Fix: Missing alt text on Hero component (WCAG 1.1.1)` ### 2. Non-Descriptive Link Text (wcag-2.4.4) **File:** `src/pages/About.jsx` **Before:** ```jsx <a href="/contact">Click here</a> ``` **After:** ```jsx <a href="/contact">Contact our team</a> ``` **Commit:** `Fix: Non-descriptive link text in About page (WCAG 2.4.4)` --- ## Deferred Issues ### 1. Low-Contrast Text on Dark Background (wcag-1.4.3) **File:** `src/styles/theme.css` **Issue:** Text color `#333` on `#1a1a1a` background has contrast ratio of 4.5:1 (needs 4.5:1 for AA). **Reason for Deferral:** Requires UX review to adjust color palette. Logged as `DEFERRED: Low contrast in theme.css (WCAG 1.4.3)`. --- ## Design Decisions Required ### 1. Missing ARIA Labels on Custom Dropdown (wcag-4.1.2) **File:** `src/components/Dropdown.jsx` **Issue:** Custom dropdown lacks `aria-label` or `aria-labelledby`. **Rationale:** Requires collaboration with design team to define accessible labels. Logged as `DESIGN_DECISION: Missing ARIA labels on Dropdown (WCAG 4.1.2)`.
skills-collection
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan