A11yFix

With 1.3 billion people living with disabilities and 96% of websites still inaccessible, A11yFix uses AI to automatically fix accessibility barriers so everyone can access the web equally

Comment

Inspiration

Web accessibility affects millions of users with disabilities, but fixing WCAG compliance issues is time-consuming and requires specialized expertise. We wanted to democratize accessibility by creating an AI-powered tool that automatically detects and fixes accessibility violations, making the web more inclusive for everyone.

What it does

A11yFix is an automated accessibility testing and fixing tool that scans web applications for WCAG compliance issues using Playwright and axe-core, then uses a three-agent AI system to intelligently generate and apply code fixes. It validates syntax, re-scans to verify fixes work, and integrates with Git workflows for seamless development.

How we built it

We built A11yFix with Node.js using Playwright for DOM scanning and axe-core for accessibility detection. The core innovation is a three-agent AI system powered by OpenAI GPT-4: a Planner that determines fix strategies, a Localizer that finds exact code locations, and a Fixer that generates unified diffs. We added comprehensive syntax validation using Babel, PostCSS, and PostHTML to ensure AI-generated fixes don't break existing code.

Challenges we ran into

The biggest challenge was ensuring AI-generated code fixes were syntactically correct and contextually appropriate without breaking existing functionality. We also struggled with accurately localizing issues in complex codebases and designing prompts that could handle the wide variety of accessibility violations across different frameworks and coding styles.

Accomplishments that we're proud of

We successfully built a complete end-to-end system that detected 7 real accessibility issues in our test cases and created intelligent fixes for each. Our three-agent AI architecture effectively mimics how human developers approach accessibility fixes, and our validation system prevents broken code from being committed.

What we learned

AI can effectively understand accessibility requirements and generate appropriate fixes when given proper context and examples. We learned the critical importance of validation layers and discovered that combining static analysis with dynamic DOM scanning provides much more comprehensive accessibility coverage than either approach alone.

What's next for A11yFix

We plan to add support for more frameworks like Vue, Svelte, and Angular, integrate computer vision AI for automatic alt text generation, build a VS Code extension for real-time feedback, fine-tune custom models on accessibility fix datasets, and expand CI/CD integrations for popular platforms like GitHub Actions and Jenkins.

Built With

  • axe-core
  • axe-playwright
  • babel
  • chromium
  • commander.js
  • fs
  • git
  • glob
  • gpt-4
  • javascript
  • jscodeshift
  • node.js
  • npm
  • openai-api
  • playwright
  • postcss
  • posthtml
  • tree-sitter
  • wcag-contrast
Share this project:

Updates