HTML Reporting for AxeCore

Quick intro - I am a developer in test as well as an advocate for accessibility. I also drink too much coffee and love cats.

As a dev in test, automating and scaling "all of the things" is extremely important so we can focus on tasks that cannot be automated. I would say that accessibility as a whole cannot be completely automated. We still need manual checks from people to ensure that a site is accessible.

Recently I implemented Deque AxeCore within our automation test suite. Axe Core is used for many accessibility tools, including Lighthouse. The bare-bones AxeCore report is a JSON output that is not the easiest to read. I wanted to find a tool in which we could format this JSON report as HTML. With searching and great luck, I found such a tool, Axe HTML Reporter. HUGE thank you to Liliia Pelypenko (@lpelypenko ) for this great solution for AxeCore reporting!

I couldn't find a good step-by-step ReadMe that worked for my needs. So, I'm here to tell you how I implemented this HTML report to my AxeCore JSON output and, maybe it'll work for your needs too!

I'll also add that, this is to produce one HTML report and rewrite the report on each test run.

Before going on forever with backstory and making this look like a recipe blog, let's get to the good part!

The Good Part

1. After installing AxeCore, we'll now add the HTML reporting.
2. First, you'll want to install Axe HTML Reporter via NPM or, however you are most comfortable.
3. Once Axe HTML Reporter is installed, we'll first update the AxeHTMLReport.js file as follows:

import { createHtmlReport } from 'axe-html-reporter';
import { writeFileSync, readFileSync } from 'fs';

(() => {
    const rawAxeResults = JSON.parse(readFileSync('AxeResults.json', 'utf8'))
    createHtmlReport({
        results: rawAxeResults,
        //options available to further customize reports
        options: {
        }
    });
})();

I did leave the options area in case I wanted to add, well, options. Options are listed in the Axe HTML Report documentation.

This will grab your AxeCore JSON file, filter it through the HTML reporting and then output this HTML report accessibilityReport.html within an artifacts folder in your root project folder.

File Structure Example

Sample Test Output