testilo 3.1.1 → 3.2.0

package/README.md

@@ -17,39 +17,55 @@ To score a report, Testilo needs to be told where to find the report, and also w
 
 Similarly, once a report has been scored, Testilo can digest it, provided that Testilo is told where to find the scored report and which _digest proc_ to use. Different digest procs could produce different human-oriented explanations of the same scored report, such as for different audiences.
 
-Testilo includes some score procs and digest procs. You can add others.
+Testilo includes some score procs, digest procs, and comparison procs. You can add others.
 
 ## Execution
 
 ### Scoring
 
-To score a Testaro report, execute the statement `node score abc xyz`, replacing (here and below) `abc` with the base of the name of the file containing the report and `xyz` with the base of the name of the score proc.
+To score Testaro reports, execute the statement `node score abc xyz`. Replace (here and below) `abc` with the base of the name of the file containing the report, or the prefix of the file name. Replace `xyz` with the base of the name of the score proc.
+
+If you replace `abc` with the entire name base, Testilo will score one report. If you replace `abc` with a prefix (such as `35k1r-`), Testilo will score all the reports whose names begin with that prefix.
 
 This procedure has some preconditions:
-- The score proc is compatible with the report.
-- The full name of the report file is `abc.json`.
-- The report file is located in the directory whose relative path (relative to the project directory of Testilo) is the value of the `REPORTDIR_RAW` environment variable.
-- Testilo can read and write in the `REPORTDIR_RAW` directory.
-- Testilo can write in the `REPORTDIR_SCORED` directory.
+- The score proc is compatible with the script that produced the report(s).
+- The filename extension is `.json`.
+- Testilo can find the report file(s) in the directory whose relative path (relative to the project directory of Testilo) is the value of the `REPORTDIR_RAW` environment variable.
+- Testilo can read in the `REPORTDIR_RAW` directory.
+- There is a `REPORTDIR_SCORED` environment variable, whose value is the relative path of a directory that Testilo can write to.
 - The `procs/score` directory contains a file named `xyz.js`.
 
-Thus, the script that Testaro ran in order to produce the report must be one that Testilo has a scoring algorithm (_score proc_) for. If so, Testilo can score the report.
-
-When Testilo scores a report, Testilo saves the scored report in the directory whose relative path is the value of the `REPORTDIR_SCORED`. The scored report file has the same name as the original.
+When Testilo scores a report, Testilo saves the scored report in the directory whose relative path is the value of the `REPORTDIR_SCORED`. The scored report file has the same name as the original. The scored report has the same content as the original, plus a new property named `score`.
 
 ### Digesting
 
-To make a scored Testaro report more useful for humans, Testilo can create a digest of the report. This is an HTML document (a web page) summarizing and explaining the findings.
+To make scored Testaro reports more useful for humans, Testilo can create digests of scored reports. A digest is an HTML document (a web page) summarizing and explaining the findings, with the scored report appended to it.
 
-To make Testilo digest a report, execute the statement `node digest abc xyz`, replacing `abc` (here and below) with the base of the name of the file containing the scored report and `xyz` with the base of the name of the digest proc.
+To make Testilo digest reports, execute the statement `node digest abc xyz`, replacing `abc` (here and below) with a whole base name or prefix, as with scoring, and `xyz` with the base of the name of the digest proc.
 
 This procedure has some preconditions:
-- The digest proc is compatible with the report.
-- The full name of the report file is `abc.json`.
-- The report file is located in the directory whose relative path (relative to the project directory of Testilo) is the value of the `REPORTDIR_SCORED` environment variable.
-- Testilo can read and write in the `REPORTDIR_SCORED` directory.
-- Testilo can write in the `REPORTDIR_DIGESTED` directory.
+- The digest proc is compatible with the score proc that scored the report.
+- The filename extension is `.json`.
+- Testilo can find the scored report file(s) in the directory whose relative path (relative to the project directory of Testilo) is the value of the `REPORTDIR_SCORED` environment variable.
+- Testilo can read in the `REPORTDIR_SCORED` directory.
+- There is a `REPORTDIR_DIGESTED` environment variable, whose value is the relative path of a directory that Testilo can write to.
 - The `procs/digest` directory contains a subdirectory named `xyz`, which in turn contains files named `index.html` and `index.js`.
 - You have copied the `reports/digested/style.css` file into the `REPORTDIR_DIGESTED` directory.
 
-When Testilo digests a report, Testilo saves the digest in the directory whose relative path is the value of the `REPORTDIR_DIGESTED`. The digest has the name `abc.html`.
+When Testilo digests a report, Testilo saves the digest in the directory whose relative path is the value of the `REPORTDIR_DIGESTED` environment variable. The digest has the same name as the report on which it is based, except with `.html` as the extension.
+
+### Comparing
+
+You can use Testilo to publish comparisons of accessibility scores. To do this, execute the statement `node compare abc xyz`, replacing `abc` with the prefix of the names of the reports and `xyz` with the name of a subdirectory of the `procs/compare` directory.
+
+Testilo will use the comparison proc you name to compile the scores into a table and construct a web page containing that table. It will save the page in the `reports/comparative` directory. The name of the file will be `abc.html`.
+
+In the table, the first column will contain descriptions of the pages (the `what` property of the hosts in the batch), such as “Wikipedia English”. Each such description will be a link to the page on the web. The second column will contain the scores of the pages. Each score will be a link to the digest for its page. The link will be `
+
+This procedure has some preconditions:
+- The comparison proc is compatible with the score proc that scored the report.
+- Testilo can find the scored report files in the directory whose relative path (relative to the project directory of Testilo) is the value of the `REPORTDIR_SCORED` environment variable.
+- Testilo can read in the `REPORTDIR_SCORED` directory.
+- There is a `COMPARISONDIR` environment variable, whose value is the relative path of a directory that Testilo can write to.
+- The `procs/compare` directory contains a subdirectory named `xyz`, which in turn contains files named `index.html` and `index.js`.
+- You have copied the `reports/comparative/style.css` file into the `COMPARISONDIR` directory.

package/compare.js

@@ -0,0 +1,38 @@
+/*
+  compare.js
+  Testilo comparison script.
+  Usage example: node compare 35k1r cp0
+*/
+
+// ########## IMPORTS
+
+// Module to keep secrets.
+require('dotenv').config();
+// Module to read and write files.
+const fs = require('fs/promises');
+
+// ########## CONSTANTS
+
+const tableDir = process.env.COMPARISONDIR || 'reports/comparative';
+const reportTimeStamp = process.argv[2];
+const tableProcID = process.argv[3];
+
+// ########## FUNCTIONS
+
+// Replaces the placeholders in content with eponymous query parameters.
+const replaceHolders = (content, query) => content
+.replace(/__([a-zA-Z]+)__/g, (ph, qp) => query[qp]);
+// Creates and saves a web page containing a comparative table.
+const compare = async () => {
+  const tableDirAbs = `${__dirname}/${tableDir}`;
+  const {getQuery} = require(`./procs/compare/${tableProcID}/index`);
+  const query = await getQuery();
+  const pageRaw = await fs.readFile(`${__dirname}/procs/compare/${tableProcID}/index.html`, 'utf8');
+  const page = replaceHolders(pageRaw, query);
+  await fs.writeFile(`${tableDirAbs}/${reportTimeStamp}.html`, page);
+  console.log(`Page comparing ${reportTimeStamp} reports created and saved`);
+};
+
+// ########## OPERATION
+
+compare();

package/digest.js

@@ -1,6 +1,7 @@
 /*
   digest.js
   Testilo digesting script.
+  Usage example: node digest 35k1r-railpass dp10a
 */
 
 // ########## IMPORTS
@@ -8,13 +9,13 @@
 // Module to keep secrets.
 require('dotenv').config();
 // Module to read and write files.
-const fs = require('fs').promises;
+const fs = require('fs/promises');
 
 // ########## CONSTANTS
 
 const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
 const reportDirDigested = process.env.REPORTDIR_DIGESTED || 'reports/digested';
-const reportID = process.argv[2];
+const reportIDStart = process.argv[2];
 const digesterID = process.argv[3];
 
 // ########## FUNCTIONS
@@ -24,15 +25,23 @@ const replaceHolders = (content, query) => content
 .replace(/__([a-zA-Z]+)__/g, (ph, qp) => query[qp]);
 // Creates a digest.
 const digest = async () => {
-  const reportJSON = await fs.readFile(`${__dirname}/${reportDirScored}/${reportID}.json`, 'utf8');
-  const report = JSON.parse(reportJSON);
+  const reportDirScoredAbs = `${__dirname}/${reportDirScored}`;
+  const allReportFileNames = await fs.readdir(reportDirScoredAbs);
+  const sourceReportFileNames = allReportFileNames
+  .filter(fileName => fileName.startsWith(reportIDStart) && fileName.endsWith('.json'));
   const {makeQuery} = require(`${__dirname}/procs/digest/${digesterID}/index.js`);
-  const query = {};
-  makeQuery(report, query);
-  const template = await fs.readFile(`${__dirname}/procs/digest/${digesterID}/index.html`, 'utf8');
-  const digest = replaceHolders(template, query);
-  await fs.writeFile(`${__dirname}/${reportDirDigested}/${reportID}.html`, digest);
-  console.log(`Report ${reportID} digested and saved`);
+  for (const fileName of sourceReportFileNames) {
+    const reportJSON = await fs.readFile(`${reportDirScoredAbs}/${fileName}`, 'utf8');
+    const report = JSON.parse(reportJSON);
+    const query = {};
+    makeQuery(report, query);
+    const template = await fs
+    .readFile(`${__dirname}/procs/digest/${digesterID}/index.html`, 'utf8');
+    const digest = replaceHolders(template, query);
+    const fileNameBase = fileName.slice(0, -5);
+    await fs.writeFile(`${__dirname}/${reportDirDigested}/${fileNameBase}.html`, digest);
+    console.log(`Report ${fileNameBase} digested and saved`);
+  };
 };
 
 // ########## OPERATION

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testilo",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Client that scores and digests Testaro reports",
   "main": "index.js",
   "scripts": {

package/procs/compare/cp0/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Testilo">
+    <meta name="creator" content="Testilo">
+    <meta name="publisher" name="Testilo">
+    <meta name="description" content="comparison of accessibility scores from tsp10 procedure">
+    <meta name="keywords" content="accessibility a11y web testing">
+    <title>Accessibility score comparison</title>
+    <link rel="icon" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Accessibility score comparison</h1>
+      </header>
+      <h2>Introduction</h2>
+      <p>The <code>tp10</code> <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> testing procedure was executed by <a href="https://www.npmjs.com/package/testaro">Testaro</a> on __pageCount__ web pages. The procedure performed 808 tests on each page. Of these, 16 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others. Testaro produced reports enumerating the test results.</p>
+      <p>Given the reports produced by Testaro, another application, <a href="https://www.npmjs.com/package/testilo">Testilo</a>, used its <code>sp10a</code> procedure to assigned weights to the tests and compute a total score for each page (where 0 is the best possible score), adding a section on scoring to each report.</p>
+      <p>Testilo used a third procedure, <code>dp10a</code>, to create a digest from each report, summarizing the tests and how the score was computed. The report for each page is included, as an appendix, in the page&rsquo;s digest.</p>
+      <p>Testilo produced this comparison page with a fourth procedure, <code>cp0</code>, listing the tested web pages in order of their scores (best to worst) and showing their scores in a table. The table includes links to the pages and to the digests.</p>
+      <p>Tests and scoring formulae are fallible and subjective. The reported faults merit investigation as potential opportunities for improved accessibility. But some may not actually harm accessibility, and some other accessibility faults may have escaped detection by any of the tests. Different reasonable procedures could yield different test results and different scores. Both Testaro and Testilo can be customized to fit different definitions and weightings of types of accessibility.</p>
+      <h2>Comparison</h2>
+      <table class="allBorder">
+        <caption>Accessibility scores of web pages</caption>
+        <thead>
+          <tr><th scope="col">Page</th><th scope="col" colspan="2">Score (lower is better)</tr>
+        </thead>
+        <tbody class="linkSmaller secondCellRight">
+          __tableBody__
+        </tbody>
+      </table>
+      <footer>
+        <p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
+      </footer>
+    </main>
+  </body>
+</html>

package/procs/compare/cp0/index.js

@@ -0,0 +1,72 @@
+/*
+  ttp0.js
+  Returns a query for an HTML page including a bar-graph table.
+*/
+
+// ########## IMPORTS
+
+// Module to keep secrets local.
+require('dotenv').config();
+// Module to access files.
+const fs = require('fs/promises');
+
+// ########## CONSTANTS
+
+const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
+const reportIDStart = process.argv[2];
+const query = {};
+
+// ########## FUNCTIONS
+
+// Gets data on the hosts and their scores and adds query parameter.
+const getData = async () => {
+  const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
+  const reportFileNamesAll = await fs.readdir(reportDirAbs);
+  const reportFileNamesSource = reportFileNamesAll
+  .filter(fileName => fileName.startsWith(reportIDStart) && fileName.endsWith('.json'));
+  const pageCount = reportFileNamesSource.length;
+  const bodyData = [];
+  for (const fileName of reportFileNamesSource) {
+    const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
+    const file = JSON.parse(fileJSON);
+    const {id, host, score} = file;
+    bodyData.push({
+      id,
+      host,
+      score: score.scores.total
+    });
+  };
+  return {
+    pageCount,
+    bodyData
+  }
+};
+// Gets the maximum score.
+const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
+// Converts report data to a table body.
+const getTableBody = async bodyData => {
+  const maxScore = getMaxScore(bodyData);
+  const rows = bodyData
+  .sort((a, b) => a.score - b.score)
+  .map(item => {
+    const {id, host, score} = item;
+    const pageCell = `<th scope="row"><a href="${host.which}">${host.what}</a></th>`;
+    const numCell = `<td><a href="reports/${id}.html">${score}</a></td>`;
+    const barWidth = 100 * score / maxScore;
+    const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
+    const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
+    const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
+    return row;
+  });
+  return rows.join('\n          ');
+};
+// Returns a query for a comparative table.
+exports.getQuery = async () => {
+  const data = await getData();
+  query.pageCount = data.pageCount;
+  query.tableBody = await getTableBody(data.bodyData);
+  const date = new Date();
+  query.dateISO = date.toISOString().slice(0, 10);
+  query.dateSlash = query.dateISO.replace(/-/g, '/');
+  return query;
+};

package/procs/digest/{tsp10a → dp10a}/index.html

@@ -16,14 +16,20 @@
     <main>
       <header>
         <h1>Accessibility test digest</h1>
-        <p class="summary bold">__org__</p>
-        <p class="summary">Testilo, <code>tsp10</code> procedure</p>
-        <p class="summary">Score: __totalScore__</p>
+        <h2>Summary</h2>
+        <div id="summary">
+          <p>Page: __org__</p>
+          <p>URL: __url__</p>
+          <p>Score: __totalScore__</p>
+          <p>Tested by: Testaro, <code>tp10</code></p>
+          <p>Scored by: Testilo, <code>sp10a</code></p>
+          <p>Digested by: Testilo, <code>dp10a</code></p>
+        </dl>
       </header>
       <h2>Introduction</h2>
-      <p>The <code>tsp10</code> accessibility testing procedure was executed by <a href="https://www.npmjs.com/package/testaro">Testaro</a> on the web page at <a href="__url__">__url__</a>, belonging to __org__, on __dateSlash__. The procedure performed 808 tests. Of these, 16 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others. Testaro produced a report enumerating the test results.</p>
+      <p>The <code>tp10</code> <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> testing procedure was executed by <a href="https://www.npmjs.com/package/testaro">Testaro</a> on the web page at <a href="__url__">__url__</a>, belonging to __org__, on __dateSlash__. The procedure performed 808 tests. Of these, 16 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others. Testaro produced a report enumerating the test results. The report is appended, below, to this page.</p>
       <p>These tests&mdash;like all tests&mdash;are fallible. The failures described below merit investigation as <strong>potential</strong> opportunities for improved accessibility. But some reported faults may not actually harm accessibility, and some accessibility faults can escape detection by any of these tests.</p>
-      <p>Given the report produced by Testaro, another procedure, <code>tsp10a</code>, assigned weights to the tests and computed a total score for the page, __totalScore__ (where 0 is the best possible score). Just as tests are fallible, any scoring procedure is subjective, and different reasonable procedures could assign different scores on the basis of the same report. This digest explains how <code>tsp10a</code> computed a score for the page.</p>
+      <p>Given the report produced by Testaro, another procedure, <code>sp10a</code>, was executed by <a href="https://www.npmjs.com/package/testilo">Testilo</a>. The procedure assigned weights to the tests and computed a total score for the page, __totalScore__ (where 0 is the best possible score). Just as tests are fallible, any scoring procedure is subjective, and different reasonable procedures could assign different scores on the basis of the same report. Testilo used procedure <code>dp10a</code> to produce this digest, explaining how <code>sp10a</code> computed the score.</p>
       <h2>Summary</h2>
       <p>The packages&rsquo; and custom tests&rsquo; contributions to the score were:</p>
       <table class="allBorder secondCellRight">
@@ -121,6 +127,8 @@
         <li>Measuring success is a prerequisite for achieving success, so interfering with accessibility measurement interferes with accessibility.</li>
         <li>Users with disabilities often rely on assistive technologies to mediate between them and web applications. Applications that interfere with automated testing are at risk of interfering with some assistive technologies, too.</li>
       </ul>
+      <h2>Report</h2>
+      <pre>__report__</pre>
       <footer>
         <p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
       </footer>

package/procs/digest/{tsp10a → dp10a}/index.js

@@ -1,6 +1,7 @@
 /*
-  index: digester for procedure tsp10.
+  index: digester for scoring procedure sp10.
   Creator of parameters for substitution into index.html.
+  Usage example: node digest 35k1r-railpass dp10a
 */
 exports.makeQuery = (report, query) => {
   // Makes strings HTML-safe.
@@ -12,7 +13,12 @@ exports.makeQuery = (report, query) => {
   const joiner = '\n      ';
   const innerJoiner = '\n        ';
   // Create an HTML identification of the host report.
-  const {id, script, acts, host, score} = report;
+  const {script, host, score} = report;
+  const reportJSON = JSON.stringify(report, null, 2);
+  const reportJSONSafe = reportJSON
+  .replace(/</g, '&lt;')
+  .replace(/&/g, '&amp;');
+  query.report = reportJSONSafe;
   // Creates a packaged-test success message.
   const packageSucceedText = package =>
     `<p>The page <strong>passed</strong> the <code>${package}</code> test.</p>`;
@@ -146,8 +152,9 @@ exports.makeQuery = (report, query) => {
   if (scores.tenon) {
     const testAct = actOf('tenon');
     const tenonResult = testAct.result.data.resultSet;
-    const tenonItems = new Set(tenonResult.map(result => result.errorTitle));
-    const tenonFailures = Array.from(tenonItems).join(innerJoiner);
+    const tenonSet = new Set(tenonResult.map(result => result.errorTitle));
+    const tenonItems = Array.from(tenonSet).map(item => `<li>${item}</li>`);
+    const tenonFailures = tenonItems.join(innerJoiner);
     query.tenonResult = packageFailText(scores.tenon, 'tenon', tenonFailures);
   }
   else if (inferences.tenon) {

package/procs/score/{tsp10a.js → sp10a.js}

@@ -1,8 +1,9 @@
 /*
-  tsp10a
+  sp10a
   Testilo score proc 10a
-  Computes scores from script tsp10 and adds them to a report. Does not discount tenon. Tenon
-  discounting is planned future work.
+  Computes scores from Testaro script tp10 and adds them to a report. Does not discount tenon.
+  Tenon discounting is planned future work.
+  Usage example: node score 35k1r sp10a
 */
 exports.scorer = report => {
   // CONSTANTS
@@ -304,6 +305,33 @@ exports.scorer = report => {
             scores.total += scores.tenon;
           }
         }
+        else if (which === 'wave') {
+          facts = test.result && test.result.categories;
+          if (facts) {
+            rules.wave
+              = 'multiply alerts by 2*, contrast errors by 3*, errors by 4* (*discounted); sum';
+            const weights = {
+              error: 4,
+              contrast: 3,
+              alert: 2
+            };
+            const waveScores = {
+              error: 0,
+              contrast: 0,
+              alert: 0
+            };
+            ['error', 'contrast', 'alert'].forEach(level => {
+              const {items} = facts[level];
+              waveScores[level] = Math.round(Object.keys(items).reduce((total, ruleID) => {
+                const rawScore = items[ruleID].count * weights[level];
+                const divisor = duplications.wave[`${level.slice(0, 1)}:${ruleID}`] + 1 || 1;
+                return total + rawScore / divisor;
+              }, 0));
+            });
+            scores.wave = waveScores.error + waveScores.contrast + waveScores.alert;
+            scores.total += scores.wave;
+          }
+        }
         else if (which === 'bulk') {
           facts = test.result && test.result.visibleElements;
           if (typeof facts === 'number') {

package/reports/comparative/35k1r-.html

@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Testilo">
+    <meta name="creator" content="Testilo">
+    <meta name="publisher" name="Testilo">
+    <meta name="description" content="comparison of accessibility scores from tsp10 procedure">
+    <meta name="keywords" content="accessibility a11y web testing">
+    <title>Accessibility score comparison</title>
+    <link rel="icon" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Accessibility score comparison</h1>
+      </header>
+      <h2>Introduction</h2>
+      <p>The <code>tp10</code> <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> testing procedure was executed by <a href="https://www.npmjs.com/package/testaro">Testaro</a> on 1 web pages. The procedure performed 808 tests on each page. Of these, 16 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others. Testaro produced reports enumerating the test results.</p>
+      <p>Given the reports produced by Testaro, another application, <a href="https://www.npmjs.com/package/testilo">Testilo</a>, used its <code>sp10a</code> procedure to assigned weights to the tests and compute a total score for each page (where 0 is the best possible score), adding a section on scoring to each report.</p>
+      <p>Testilo used a third procedure, <code>dp10a</code>, to create a digest from each report, summarizing the tests and how the score was computed. The report for each page is included, as an appendix, in the page&rsquo;s digest.</p>
+      <p>Testilo produced this comparison page with a fourth procedure, <code>cp0</code>, listing the tested web pages in order of their scores (best to worst) and showing their scores in a table. The table includes links to the pages and to the digests.</p>
+      <p>Tests and scoring formulae are fallible and subjective. The reported faults merit investigation as potential opportunities for improved accessibility. But some may not actually harm accessibility, and some other accessibility faults may have escaped detection by any of the tests. Different reasonable procedures could yield different test results and different scores. Both Testaro and Testilo can be customized to fit different definitions and weightings of types of accessibility.</p>
+      <h2>Comparison</h2>
+      <table class="allBorder">
+        <caption>Accessibility scores of web pages</caption>
+        <thead>
+          <tr><th scope="col">Page</th><th scope="col" colspan="2">Score (lower is better)</tr>
+        </thead>
+        <tbody class="linkSmaller secondCellRight">
+          <tr><th scope="row"><a href="https://www.railpass.com/">Railpass</a></th><td><a href="reports/35k1r-railpass.html">1589</a></td><td aria-hidden="true"><svg width="100%" height="0.7em"><rect height="100%" width="100%" fill="red"></rect></svg></td></tr>
+        </tbody>
+      </table>
+      <footer>
+        <p class="date">Produced <time itemprop="datePublished" datetime="2022-06-08">2022/06/08</time></p>
+      </footer>
+    </main>
+  </body>
+</html>

package/reports/comparative/style.css

@@ -0,0 +1,85 @@
+*:focus {
+  outline: solid 0.2rem #00f;
+  outline-offset: 0.2rem;
+}
+body {
+  margin: 2rem;
+  font-size: large;
+}
+.bold {
+  font-weight: 700;
+}
+button {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.5rem;
+  border: solid 0.2rem #03a;
+  border-radius: 1rem;
+  font-size: inherit;
+  font-weight: 700;
+  color: #fff;
+  background-color: #03a;
+}
+button:hover {
+  color: #000;
+  background-color: #9df;
+}
+caption {
+  margin: 1rem 0;
+  font-weight: 700;
+  font-style: italic;
+}
+code {
+  font-family: sans-serif;
+  color: #832703;
+}
+.error {
+  font-weight: 700;
+  color: #c00;
+}
+fieldset {
+  width: max-content;
+  margin-top: 1rem;
+}
+.firstCellRight td:nth-child(1) {
+  text-align: right;
+}
+form {
+  margin-top: 1rem;
+}
+h2 {
+  margin: 1rem auto 0.5rem auto;
+  color: #006666;
+}
+input {
+  margin: 0.5rem 0;
+  font-size: inherit;
+}
+legend {
+  font-weight: 700;
+}
+.secondCellRight td:nth-child(2) {
+  text-align: right;
+}
+section:not(.wide) {
+  max-width: 36rem;
+}
+table {
+  border-collapse: collapse;
+}
+table.allBorder th {
+  padding-bottom: 0;
+}
+table.allBorder th, table.allBorder td, tbody td {
+  border: 1px gray solid;
+}
+tbody th {
+  padding-right: 1rem;
+  text-align: right;
+}
+td, th {
+  padding: 0 0.5rem;
+}
+thead th {
+  padding-bottom: 1rem;
+}