The app currently uses mock data from mockScanResults.js. There's existing documentation in the integrating-axe-core-docs branch about how to integrate axe-core, but it hasn't been implemented yet.
Requirements:
- Install
axe-core and a headless browser (Puppeteer or Playwright recommended for Node.js)
- Create a scanning service that:
- Takes a URL input
- Launches a headless browser
- Injects axe-core into the page
- Runs axe analysis
- Returns results in a format compatible with the existing UI
- Replace the mock data in
handleScan with actual API call to the scanning service
- Handle errors gracefully (timeout, unreachable sites, etc.)
Architecture note:
This will require a backend service (Express.js) since browsers block cross-origin requests
See docker-compose.yml line 16-23 for the planned backend structure
More: Frontend-only axe-core won't work for external websites because browsers enforce CORS (Cross-Origin Resource Sharing). The app at localhost:5173 cannot directly scan google.com or any other external domain - the browser blocks this for security.
The app currently uses mock data from
mockScanResults.js. There's existing documentation in theintegrating-axe-core-docsbranch about how to integrate axe-core, but it hasn't been implemented yet.Requirements:
axe-coreand a headless browser (Puppeteer or Playwright recommended for Node.js)handleScanwith actual API call to the scanning serviceArchitecture note:
This will require a backend service (Express.js) since browsers block cross-origin requests
See
docker-compose.ymlline 16-23 for the planned backend structureMore: Frontend-only axe-core won't work for external websites because browsers enforce CORS (Cross-Origin Resource Sharing). The app at localhost:5173 cannot directly scan google.com or any other external domain - the browser blocks this for security.