Inspiration
The web is supposed to be accessible to everyone, yet many websites still contain barriers that make them difficult to navigate for people with disabilities. Missing alternative text, inaccessible forms, insufficient color contrast, and poorly labeled interactive elements can turn everyday online tasks into frustrating experiences.
We wanted to explore a better developer experience: What if fixing accessibility issues were as straightforward as fixing a syntax error?
That question inspired PatchPilot, an AI-powered accessibility repair assistant designed to help developers identify accessibility problems, understand their impact, and generate actionable code improvements.
What it does
PatchPilot is designed to transform accessibility testing from a complicated auditing process into an intuitive developer workflow.
The envisioned experience consists of four steps:
- Scan: Enter a website URL or provide webpage code for accessibility analysis.
- Detect: Identify potential accessibility issues and organize them by severity.
- Repair: Generate suggested HTML and React code changes that address the detected issues.
- Review: Compare the original and improved code before applying changes.
Rather than simply reporting what's wrong, PatchPilot focuses on helping developers understand how to fix it and why the fix matters.
Our prototype demonstration illustrates this experience through an interactive-style dashboard, accessibility findings, and before-and-after code examples.
How we designed it
PatchPilot's proposed architecture combines automated accessibility testing with AI-assisted code generation.
Planned technology stack:
- Next.js and React: Responsive developer dashboard and component-based interface.
- TypeScript: Type-safe frontend development.
- Tailwind CSS: Clean, accessible interface styling.
- axe-core: Automated accessibility checks and issue detection.
- AI language model API: Context-aware explanations and suggested code repairs.
- WCAG guidelines: Accessibility standards informing issue categorization and recommendations.
The prototype design centers on a straightforward workflow: collect accessibility findings, map them to relevant source-code patterns, generate proposed changes, and present those changes for developer review.
Challenges we encountered
One of the central design challenges was determining how to make accessibility recommendations technically useful rather than overly generic.
An accessibility scanner might identify a missing image description, but producing appropriate alternative text requires understanding the image's purpose and context.
Similarly, an automatically generated code change might address one accessibility warning while unintentionally affecting functionality.
These considerations led us to prioritize human-reviewed fixes over blindly applying AI-generated code.
Another important consideration was scope: automated testing can identify many accessibility violations, but it cannot guarantee that an entire website is accessible.
What we learned
Exploring PatchPilot reinforced several important software engineering lessons.
First, developer tooling becomes more valuable when it bridges the gap between identifying a problem and resolving it.
Second, accessibility is not simply a visual design consideration. It affects semantic HTML, keyboard navigation, assistive technologies, form behavior, and the overall usability of an application.
Finally, integrating AI into developer workflows requires careful validation. Generated code should remain understandable, reviewable, and testable.
What's next for PatchPilot
The next milestone is to turn the prototype into a functioning end-to-end application.
Planned improvements include:
- Live webpage accessibility scanning.
- AI-assisted HTML and React patch generation.
- Side-by-side code comparisons.
- Automated rescanning after proposed repairs.
- GitHub integration for accessibility-focused pull requests.
- CI/CD accessibility checks to help prevent regressions.
Our longer-term vision is to make PatchPilot a practical accessibility assistant that integrates directly into how developers build, review, and maintain software.
Our goal is simple: make building a more accessible web easier for every developer.
Built With
- css
- javascript
- next.js
- react
- typescript
Log in or sign up for Devpost to join the conversation.