Guide · Agent skill
How to use the Accessibility Audit and Fix agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The accesslint-audit skill teaches an AI agent to check websites or source code for accessibility problems, such as content that screen readers or keyboard users cannot use, measured against the WCAG 2.2 standard. This guide is for front-end developers and teams who want that check done by an agent. By the end you will know what the skill does, how to install it, how to phrase requests so it runs in the right mode, and what it needs and where its limits are.
Accessibility Audit and Fixsickn33/agentic-awesome-skills · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder.
- 2Or upload it in the Claude apps. Open Settings → Capabilities → Skills and upload the ZIP instead.
- 3Set up an audit engine and browser. Install a reviewed, pinned AccessLint audit engine, and connect an authorized browser session or a supported browser MCP for live-page audits.
- 4Ask for a report. Name a scope such as a directory or URL and ask for an audit or a11y report. The agent will return a prioritized written report without editing files.
- 5Ask for a fix when ready. Request a fix on a named target. The agent records a baseline, applies scoped edits, and verifies them against that baseline.
- 6Review the result. Check the diff, the deferred TODOs, and the manual checks the report lists, then run any manual screen reader and keyboard tests.
What is an agent skill, and what does this one make the agent do?
An agent skill is a folder of instructions that an AI agent loads when a request matches it. This one lives in a SKILL.md file and tells the agent how to run accessibility audits against WCAG 2.2.
It has two modes. Report mode sweeps a codebase or page and writes a prioritized written report, and it does not edit any files. Fix mode runs an audit, makes scoped code edits, and then re-audits to confirm the problems are gone.
- Report mode: groups findings by rule ID and component, ranks them by user impact (critical and serious first), and lists manual checks a human still needs to do.
- Fix mode: records a baseline, applies edits to the files that contain each violation, then verifies the result against that baseline and reports anything deferred.
Install the skill (ZIP download or Claude Settings)
Download the ZIP from this page and unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/ (available across your projects).
- Project install: .claude/skills/ inside the project (shared with that codebase).
Install the requirements the skill depends on
The package contains only instructions. It does not include the AccessLint audit engine, a browser, or any browser MCP, so you must supply them. The source recommends using a reviewed, pinned engine version.
For live-page audits you need an authorized browser or debug session, or a browser MCP such as chrome-devtools-mcp, playwright-mcp or puppeteer-mcp. For file-based work the agent needs tools to read, search and edit files.
- AccessLint audit engine (not bundled; use a reviewed pinned version).
- An authorized browser or debug session, or one of the listed browser MCPs, for live-DOM audits.
- Agent tools for reading files, searching and editing.
How do you trigger the skill with natural requests?
You do not need a special command. Describe what you want in plain language and the agent picks the mode. Requests such as 'audit my codebase' or 'what's wrong with this page?' trigger report mode. Requests such as 'fix the a11y issues in X' or 'make this accessible' trigger fix mode.
If the request is unclear, the skill tells the agent to ask. It does not default to fixing when you only asked for an audit, so say 'audit only' if you want a report.
- Report: 'Audit my codebase', 'Review src/components/', 'Give me an a11y report'.
- Fix: 'Fix the a11y issues in the login form', 'Audit and fix this page', 'Verify the contrast fix landed'.
- Scope: name a directory, a list of files, or a URL. Asking for a whole-codebase sweep with no arguments makes the agent ask you to narrow it.
Example: a prioritized report and a fix-verify cycle
In report mode the agent first maps the components, templates and styles, then audits the rendered page if it can. It groups repeated failures by rule ID and component family so one root cause is not listed thirty times. The report starts with a scope statement and a summary count of critical, serious, moderate and minor items.
In fix mode the agent records a baseline named 'before', applies scoped edits, then checks the result against that baseline. It reports which violations were fixed and whether any new ones appeared.
- Report output includes the WCAG ID, affected file and line, the fix directive, and the user impact for each pattern.
- Fix output lists the flow used, violations by impact, what was applied per file and rule, what was deferred as TODOs with reasons, and the final diff.
- Violations with no fix directive are left as TODOs rather than guessed.
Safety notes: scripts, network and private pages
This skill runs no scripts, but it does use the network. Live-DOM mode uses a browser session that may contain private data, so only audit authenticated or sensitive pages you are authorized to access.
Fix mode edits files. The source discourages unattended bulk edits of large codebases, so review changes and keep the scope narrow.
- Do not use it to audit pages you are not authorized to test.
- Review every edit in fix mode before you commit it.
- Avoid whole-codebase sweeps; point it at a component folder or a page instead.
Tips for better results
Give a specific scope and, for live audits, a URL reachable from your browser session. Live-DOM audits give better results than source-only audits because they see the rendered page. Where the agent reports a Source line, treat it as a hint and confirm it against the current file.
Automated checks cover only part of WCAG. Plan manual testing with a screen reader, keyboard-only navigation, and low-vision testing.
- Use a dev-server URL for live audits when you are testing local work.
- Expect TODOs for contrast, wording and keyboard flow; those need a human.
- Re-run the audit after each fix round to confirm the result.
What people use it for
- Get a prioritized list of accessibility problems across a component library before a release.
- Prepare a written report with WCAG rule IDs for an upcoming accessibility review.
- Apply fixes from an existing violation report and confirm the violations are gone.
- Check a live dev-server page for issues that only appear in the rendered DOM.
Frequently asked questions
How do I install the accesslint-audit skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
What does the accesslint-audit skill need to run?
It needs an AccessLint audit engine, which is not bundled and should be a reviewed pinned version. For live-page audits it also needs an authorized browser or debug session or a browser MCP such as chrome-devtools-mcp, playwright-mcp or puppeteer-mcp, plus agent tools for reading, searching and editing files.
Is the accesslint-audit skill free?
The source material does not state pricing or licence terms beyond the package's MIT licence, so check that licence and any engine you install separately before relying on it.
Does this skill make my website WCAG compliant?
No. The skill states that automated checks cover only part of WCAG and do not certify conformance. Screen reader, keyboard and low-vision testing by a person is still needed.
Will the skill change my files without asking?
Only in fix mode. Report mode does not edit files. Fix mode edits files for the requested fixes, so review the diff before committing.
What is the difference between report mode and fix mode?
Report mode audits and writes a prioritized report without edits. Fix mode runs an audit, applies scoped edits, and re-audits to verify the problems are gone. The agent asks when your intent is unclear.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or team who wants a prioritized WCAG 2.2 report from an agent, or who already has a violation report and wants fixes applied and verified. Pick something else, or add human expert review, if you need a conformance certification, or if you want to audit sensitive authenticated pages without permission or run unattended bulk edits.
Download the skill