webアクセシビリティ診断を行う自動ツールを作成する

$ npm init -y

Copy

$ npm i @axe-core/puppeteer csv-stringify puppeteer

Copy

$ touch start.js

Copy

const { AxePuppeteer } = require("@axe-core/puppeteer");
const puppeteer = require("puppeteer");
const fs = require("fs");
const stringify = require("csv-stringify/sync");

Copy

const AXE_LOCALE_JA = require("axe-core/locales/ja.json");
const config = {
  locale: AXE_LOCALE_JA,
};

Copy

let urlList = fs.readFileSync("./url.txt", "utf-8").replaceAll(/\r/g, '').split("\n");
urlList = urlList.filter(url => url != '');

Copy

function insertData(url, element, node, datas) {
  let data = {
    url: url,
    ViolationType: datas['id'],
    impact: datas['impact'],
    tag: element["tags"].join(),
    help: element["helpUrl"],
    message: datas["message"],
    htmlElement: node["html"],
  }

  data["domElement"] = '';

  if (node["target"].length > 0) {
    for (let i = 1; i <= node["target"].length; i++) {
      if (node["target"].length === i) {
        data["domElement"] += node["target"][i - 1] + "\n";
      } else {
        data["domElement"] += node["target"][i - 1];
      }
    }
  }

  return data;
}

Copy

function convertCSV(results, filename) {
  let csvArray = [];
  let allData = [];

  results.forEach((raw) => {
    let inapplicable = raw["data"]["inapplicable"];
    let passes = raw["data"]["passes"];
    let incomplete = raw["data"]["incomplete"];
    let violations = raw["data"]["violations"];

    allData.push(inapplicable, violations);

    allData.forEach((data) => {
      data.forEach((element) => {
        element["nodes"].forEach((node) => {
          if (node["any"].length > 0) {
            node["any"].forEach(d => {
              csvArray.push(insertData(raw["url"], element, node, d));
            });
          } else if (node["all"].length > 0) {
            node["all"].forEach(d => {
              csvArray.push(insertData(raw["url"], element, node, d));
            });
          } else if (node["none"].length > 0) {
            node["none"].forEach(d => {
              csvArray.push(insertData(raw["url"], element, node, d));
            });
          } else {
            return;
          }
        });
      });
    });
  });

  const csvString = stringify.stringify(csvArray, {
    header: true,
  });

  fs.writeFileSync(filename, csvString);
}

Copy

async function axe_PC() {
  const urls = urlList;

  let resultArray = [];

  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  for (let i = 0; i < urls.length; i++) {
    const url = urls[i];
    await page.setBypassCSP(true);

    // ページを読み込む。
    await Promise.all([
      page.setDefaultNavigationTimeout(0),
      page.waitForNavigation({ waitUntil: ["load", "networkidle2"] }),
      page.goto(`${url}`),
    ]);

    const results = await new AxePuppeteer(page)
      .configure(config)
      .withTags([
        "wcag2a",
        "wcag2aa",
        "wcag2aaa",
        "wcag21a",
        "wcag21aa",
        "wcag22aa",
        "wcag2a-obsolete",
        "wcag***",
        "ACT",
        "section508",
        "section508.*.*",
        "TTv5",
        "TT*.*",
        "EN-301-549",
        "EN-9.*",
        "cat.*"
      ])
      .analyze();

    resultArray.push({
      data: results,
      url: url,
    });
  }

  convertCSV(resultArray, "result_pc.csv");

  await page.close();
  await browser.close();
}

Copy

async function axe_SP() {
  const urls = urlList;

  let resultArray = [];

  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // デバイスのエミュレートをする場合は、下記を適用する。
  await page.emulate(puppeteer.KnownDevices["iPhone 8"]);

  for (let i = 0; i < urls.length; i++) {
    const url = urls[i];
    await page.setBypassCSP(true);

    // ページを読み込む。
    await Promise.all([
      page.setDefaultNavigationTimeout(0),
      page.waitForNavigation({ waitUntil: ["load", "networkidle2"] }),
      page.goto(`${url}`),
    ]);

    const results = await new AxePuppeteer(page)
      .configure(config)
      .withTags([
        "wcag2a",
        "wcag2aa",
        "wcag2aaa",
        "wcag21a",
        "wcag21aa",
        "wcag22aa",
        "wcag2a-obsolete",
        "wcag***",
        "ACT",
        "section508",
        "section508.*.*",
        "TTv5",
        "TT*.*",
        "EN-301-549",
        "EN-9.*",
        "cat.*"
      ])
      .analyze();

    resultArray.push({
      data: results,
      url: url,
    });
  }

  convertCSV(resultArray, "result_sp.csv");

  await page.close();
  await browser.close();
}

Copy

axe_PC();
axe_SP();

Copy

https://example.com/dir1.html
https://example.com/dir2.html
https://example.com/dir3.html
...

Copy

$ node start.js

Copy