DEV Community

loading...

Introducing Lumberjack: an Automated Accessibility Scanner

jakepartusch profile image Jake Partusch Originally published at jake.partus.ch ・2 min read

GitHub logo JakePartusch / lumberjack

An automated website accessibility scanner and cli

Lumberjack

Chop down accessibility issues with this full-website accessibility scanner

Woman in winter attire standing with an ax next to a tree

About

Lumberjack runs axe accessibility checks on your entire website!

  • Reads your website's sitemap
  • Spawns multiple browser instances and starts scanning with axe
  • Aggregates results and reports back

    Screenshot of lumberjack in action. Print the individual accessibility issues found in an example

Usage

CLI

NPX (recommended for a single run)

npx @jakepartusch/lumberjack --url https://google.com

Global Install (recommended for multiple runs)

npm install -g @jakepartusch/lumberjack
lumberjack --url https://google.com

Options

--url         // Required — The base url to scan. If a sitemap exists, its pages will be scanned as well
--strict      // Optional (default: false) — Fail the process if any accessibility issues are found
--baseUrlOnly // Optional (default: false) — Skip the sitemap scan and only run the audit on the base url

JavaScript

npm install @jakepartusch/lumberjack
const lumberjack = require('@jakepartusch/lumberjack')
const myFunction = async () => {
  const results = await lumberjack("https://google.com")
  console.log(results);
}

Continuous Integration

GitHub Actions Example (eg. ".github/workflows/accessibility.yml")

name: Accessibility Audits

Accessibility testing is hard. And for the most part, accessibility testing is also manual. Testers interact with their websites with not only their keyboards, but also with multiple screen readers and browsers. Luckily, with static html analysis and pin-pointed JavaScript execution, we can detect a subset of accessibility issues with automated tools 🎉.

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!

Axe

Axe is an accessibility tool that has gained a lot of traction over the past few years. And it even has a Chrome extension!

Axe is great, but can only be run on a single page at a time. So, let's extend the power of axe to level-up our accessibility game!

Lumberjack

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

Screenshot of lumberjack in action. Print the individual accessibility issues found in an example

Even better, this can all be triggered with a single command

npx @jakepartusch/lumberjack --url https://google.com

Lumberjack CI

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

Discussion (0)

pic
Editor guide