Inspiration
The internet is supposed to be accessible to everyone, yet millions of people encounter barriers when navigating websites because of inaccessible design and code.
For people with visual, auditory, motor, or cognitive disabilities, something as simple as navigating a website, filling out a form, or understanding a page can become unnecessarily difficult.
We realized that although accessibility standards and testing tools exist, identifying problems is only part of the challenge. Developers often struggle to understand why an issue matters, how to fix it correctly, and whether their changes actually resolve the problem.
That inspired us to build AccessLens: a platform that makes website accessibility testing more intelligent, understandable, and actionable.
Our vision is simple: accessibility should not be an afterthought in web development. It should be something every developer can achieve.
What it does
AccessLens is an AI-assisted website accessibility auditing and remediation platform that helps developers identify and resolve accessibility barriers.
It follows a five-stage workflow:
- Scan: Uses browser automation to inspect websites and analyze their accessibility.
- Detect: Identifies accessibility violations using axe-core and established accessibility rules.
- Explain: Uses AI models to translate technical findings into understandable explanations, including their potential impact on users.
- Fix: Generates targeted remediation suggestions and code-level patches to help developers address detected issues.
- Verify: Rechecks the website to determine whether the proposed changes resolve the identified accessibility problems.
Key capabilities include:
- Automated website accessibility scanning.
- Detection of common WCAG-related accessibility violations.
- AI-assisted explanations of technical issues.
- Actionable code remediation suggestions.
- Verification of accessibility improvements.
- A developer-friendly interface for understanding and addressing issues.
AccessLens aims to bridge the gap between accessibility testing and practical accessibility improvement.
How we built it
We built AccessLens using a combination of modern web technologies, browser automation, accessibility testing tools, and AI-powered assistance.
Frontend:
- React and TypeScript for the user interface.
- Tailwind CSS for styling and responsive layouts.
Backend:
- Python and FastAPI for backend services and API communication.
Browser automation:
- Playwright for loading and interacting with target websites.
- axe-core for automated accessibility analysis and violation detection.
AI integration:
- Gemini and Anthropic models for explaining accessibility findings and assisting with remediation.
Remediation and verification:
We designed the system to go beyond reporting violations. It connects accessibility findings with explanations and targeted remediation suggestions, followed by verification to evaluate whether the proposed changes address the original issues.
We also developed backend tests to validate important application workflows, with 43 backend tests passing during our previous development cycle.
The architecture separates website inspection, accessibility analysis, AI-assisted reasoning, and remediation so that each component can be improved independently.
Challenges we ran into
Building AccessLens involved several technical and design challenges.
1. Converting technical violations into understandable explanations
Accessibility tools often produce technical reports that are difficult for developers unfamiliar with WCAG guidelines to interpret. We needed to make these findings understandable without losing their technical meaning.
2. Generating reliable fixes
Generating code suggestions is relatively straightforward compared with ensuring that those suggestions address the actual accessibility problem without introducing unrelated changes. We focused on targeted remediation rather than unrestricted code modification.
3. Browser automation and website variability
Websites differ significantly in their structure, rendering behavior, JavaScript execution, and dynamic content. Building a consistent inspection workflow across different websites required careful handling of browser automation.
4. Verification of proposed improvements
A suggested fix should not automatically be considered successful. We needed a verification stage that checks the website again and evaluates whether the original accessibility violations have been resolved.
5. Balancing automation with developer control
We wanted to make accessibility improvements easier without removing developers from the decision-making process. This meant designing a workflow where AI assists developers rather than blindly modifying websites.
Accomplishments that we're proud of
We are particularly proud of building a working prototype that connects multiple technologies into one accessibility improvement workflow.
Some of our key accomplishments include:
- Integrating Playwright and axe-core into an automated website inspection pipeline.
- Building an AI-assisted system that explains accessibility violations in understandable language.
- Developing remediation workflows that connect detected problems with actionable code suggestions.
- Implementing verification to evaluate proposed accessibility improvements.
- Integrating multiple AI providers, including Gemini and Anthropic.
- Building a React and FastAPI application with a modular architecture.
- Achieving 43 passing backend tests during our previous development cycle.
Most importantly, we moved beyond the idea of another accessibility reporting dashboard. We built a prototype around the complete journey from identifying an accessibility problem to attempting and verifying its resolution.
What we learned
Developing AccessLens taught us that accessibility is much more than a collection of technical rules.
We learned that:
- Detecting an accessibility violation does not necessarily explain its real-world impact.
- AI-generated code should be treated as a proposal that requires validation, not an automatically correct solution.
- Automated accessibility testing is valuable, but it cannot fully replace human evaluation and assistive-technology testing.
- Browser automation introduces challenges when dealing with dynamic and diverse websites.
- Good developer tools should make complex technical information understandable and actionable.
- Verification is essential when building AI-assisted development tools.
We also gained practical experience integrating browser automation, accessibility standards, backend APIs, and AI models into a unified application.
What's next for AccessLens
We envision AccessLens becoming a more comprehensive accessibility development assistant.
Our future roadmap includes:
- Broader WCAG coverage: Expand accessibility analysis across more WCAG 2.2 success criteria and testing scenarios.
- Improved remediation: Generate more context-aware fixes with stronger validation and safeguards.
- Continuous monitoring: Allow developers to monitor websites for newly introduced accessibility regressions.
- Developer integrations: Explore integrations with GitHub, CI/CD pipelines, and development environments.
- Accessibility reporting: Introduce detailed reports that help teams track violations, remediation progress, and improvements over time.
- Human-centered validation: Strengthen testing with keyboard navigation, screen readers, and real assistive-technology workflows.
Our long-term goal is to make accessibility a natural part of the development lifecycle rather than something developers address only after a website is completed.
AccessLens is built around one principle: finding accessibility problems is only the beginning. Making the web more accessible is the real goal.
Built With
- fast-api
- machine-learning
- python
- react
