Developer tool
Accessibility Fixer
Fixes accessibility issues from the Accessibility Checker in your own code. What has one safe answer is fixed automatically; everything that needs judgement becomes a precise task list for your AI coding assistant.
How it works
- Run the Accessibility CheckerTest your website with the Accessibility Checker and click Download for developers. You get a report file (wcag-report-….json) with every finding, the failing HTML and where it is.
- Put the Fixer in your projectDownload wcag-fixer.mjs and save it with the report in your project folder. It needs Node 18 or later and nothing else.
- See what it would changeNothing is written yet. You see every change, file by file and line by line.
node wcag-fixer.mjs wcag-report.json - Make the safe fixesThe changes are made, a backup of each file is saved, and the rest is written to wcag-fixes.md.
node wcag-fixer.mjs wcag-report.json --apply - Optional: get an AI suggestion for each taskWith a free key, the Fixer also writes a concrete code suggestion under each task. Only what is already in the report is sent, never your code.
node wcag-fixer.mjs wcag-report.json --apply --ai --key YOUR-KEY - Let your AI assistant do the restOpen the project in Claude Code, Cursor or Copilot and ask it to work through the list. Each task has the page, the element, the likely file and line, and how to fix it.
Fix the tasks in wcag-fixes.md - Check again and verifyLook through the changes and deploy. Run the Accessibility Checker again and add wcag-fixer-log.json under “Verify fixes”: the report confirms which fixes hold and what remains.
Your key
Sign up for free to get a key for AI suggestions. The same sign-up works for all my tools.
Use this key with --key, or save it in the environment variable WCAG_TOOLS_KEY.
Fixed automatically
- Zoom blocked in the viewport settings
- Missing page language (with --lang)
- Positive tabindex that breaks the tab order
- Scrollable areas that the keyboard cannot reach
- ARIA attributes that are not allowed on the element
- Decorative images without an empty alt
- Components without a visible focus style
Becomes tasks with exact instructions
- Contrast, with a suggested colour that meets the requirement
- Alt texts, link texts, headings and labels
- Menus, dialogs and focus handling
- Form errors, target sizes and sticky elements
- Everything the check marked to confirm by hand
Runs on your own computer: nothing is uploaded or sent anywhere. It works with plain HTML and with templates and components (React, Vue, Svelte, Astro, PHP and more). Always look through the changes before you publish them.
Feedback
Help me make this tool really useful
How did it work for you, what value did it give you, and what would make it better? All feedback is welcome, big and small. I read everything.