We can automatically find issues like:
- Poor color contrast
- Heading levels out of order
- Buttons and links without accessible text
- Inputs without labels
Using automation, we can quickly find accessibility issues and prevent future regressions. can help to quickly find accessibility issues and prevent future regressions!
Axe is great, but can only be run on a single page at a time. So, let’s extend the power of axe to up our accessibility game!
Lumberjack uses the power and rulesets of axe, but orchestrates the scanning of many pages simultaneously.
Lumberjack can scan 100 individual pages in under two minutes!
Here is how Lumberjack works:
- You give lumberjack a url (eg. https://google.com)
- Lumberjack reads your website’s sitemap
- It spawns multiple browser instances and starts scanning with axe
- It aggregates results and reports back
Even better, this can all be triggered with a single command
npx @jakepartusch/lumberjack --url https://google.com
Finally, we can integrate Lumberjack into our continuous integration pipeline to ensure that we aren’t introducing any new accessibility issues into our websites.
An Example with GitHub Actions (eg. “.github/workflows/accessibility.yml”)
name: Accessibility Audits on: [push] jobs: build: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v1 - name: Install required Linux packages run: | sudo apt-get update sudo apt-get install libgbm-dev sudo apt-get install xvfb - name: Use Node.js 12.x uses: actions/setup-node@v1 with: node-version: 12.x - name: Install npm packages run: | npm ci - name: Build run: | npm run build - name: Accessibility Audits run: | npm install -g @jakepartusch/lumberjack xvfb-run --auto-servernum lumberjack --url https://google.com
As a community let’s build accessibility tooling as often and with as much fervor as we build IDE themes :). Together, we can make the web a better place ♥️.
For more info, and documentation, visit https://github.com/JakePartusch/lumberjack