The goal is to provide the client and/or developers a tool where they can access a website's accessibility issues so that they can be addressed. Create a tool that involves:
- crawling a website
- gathering the interal urls
- generating an accessibility report for each url
- generating an accessibility summary report for the whole website
POC is using npm, expressjs Created using node v12
Run yarn from the root folder
Copy the .env_sample file in crawler-scanner/ and rename it to .env.development
- navigate to localhost:3000
- on the homepage, there will be a small form to launch a scan
- enter the url and if you want to scan as well, check the box
- press the submit button
- refresh once the scanning is completed
yarn workspace a11y-crawler start
yarn workspace a11y-frontend-react start
Running this will launch the node-crawler and crawl the url you have provided. It will generate a txt result file with all the valid urls found.
- CD into the packages/crawler-scanner/src/lib folder
node crawler.js --siteUrl <URL> [--saveFile ]
- if no saveFile is provided, it will default to the url's hostname.
- folder/file creation:
./crawls/<hostname>/<timestamp>/<saveFile>.txt
Example call: node crawler.js --siteUrl https://www.yahoo.ca
Running this will launch the puppeteer axe checker. It will read the txt result file generated in the crawl, and generate JSON result files listing out all the accessibility violations for each URL.
- CD into the packages/crawler-scanner/src/lib folder
node checker.js --crawlFilePath <string> --filePrefix <string>
Example: node checker.js --crawlFilePath /Users/magalibautista/workspace/rangle/a11y-crawler-poc/src/crawls/www.yahoo.ca/2021-01-15T18-44-23.571Z/www.yahoo.ca.txt --filePrefix yahoo
- The scans folder will be created in ./src/public/
- A folder named with the hostname will be created in /scans
- allow more parameters to be passed to the axe core library for different kinds of scans
- add an option to run Puppeteer headless (flag or dev environment var)
- allow a user to upload a sitemap-type file to bypass crawling (FUTURE) **
- make the front-end prettier
- ensure there is no timeout when launching scan from the frontend (long polling?)
- progress bar (via sockets) (or you can notify the user - via email)
- potentially generate partial results right away
- could become mini saas application
- /public should be outside of /src
- make sure ./scans folder exists (or create it) . (use makedirp module)
- files should be stored outside of /src
- how do we know when a page has loaded?
- check why google.com keeps looping and if we can prevent that?
- ** FRONT END MUST BE ACCESSIBLE **
- could Cypress replace Puppeteer?