How do you output HTML results?

[coreymcollins]

I'm feeling a little lost on the use of --reporter in terms of outputting HTML. I can use --reporter json just fine and dump the JSON results without issue.

However, I'm not sure how to do the same to get an HTML output. The read me says one option is to use:

the path of a locally installed npm module (ie: pa11y-reporter-html)

If you visit that repo (https://github.com/pa11y/pa11y-reporter-html) the first line of the readme is:

The reporter has been merged into pa11y/reporters.

Which would lead me to believe if I have pa11y also installed, I could use --reporter html – but this doesn't work.

Do I need to manually specify the path to the lib/reporters directory (https://github.com/pa11y/pa11y/tree/master/lib/reporters) in pa11y to output to HTML? Or is there some other step I'm missing to be able to output results in HTML?

Thanks!

[erzz]

same here - I can generate the reports via --reporters flag with pa11y not with pa11y-ci

Its super confusing and easy to get passed between docs for pa11y-ci and pa11y too - which support completely different flags. So now I am trying to go down a pure JS config route and the documentation seems wrong as no matter how I include it - it produces nothing

Ideally from a CI perspective I want to produce both stdout results to the job log in actions + create a report for documentation. I have tried the following in my config:

module.exports = {
  defaults: {
    "runners": [
      "axe",
      "htmlcs"
    ],
    "reporters": [
      //"cli",
      "pa11y-reporter-html"
    ]
  },
...

module.exports = {
  defaults: {
    "runners": [
      "axe",
      "htmlcs"
    ],
    "reporters": [
      //"cli",
      [ "pa11y-reporter-html", { "file": "./pa11y.html" } ]
    ]
  },
...

module.exports = {
  defaults: {
    "runners": [
      "axe",
      "htmlcs"
    ],
    "reporters": [
      //"cli",
      [ "pa11y-reporter-html", { "fileName": "./pa11y.html" } ]
    ]
  },
...

[Jeiwan]

Use pa11y-ci-reporter-html, not pa11y-reporter-html: https://www.npmjs.com/package/pa11y-ci-reporter-html

[erzz]

Thanks @Jeiwan !

Would suggest a docs update to point to the right one, but otherwise awesome and works as intended :D

[coreymcollins]

Going to close this since I got an answer to the initial question. Was able to implement this in our wd_s WordPress theme here thanks to @Jeiwan's response: https://github.com/WebDevStudios/wd_s/pull/889

Thanks again!