testilo 13.9.0 → 13.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "testilo",
3
- "version": "13.9.0",
3
+ "version": "13.10.1",
4
4
  "description": "Prepares and processes Testaro reports",
5
5
  "main": "aim.js",
6
6
  "scripts": {
@@ -0,0 +1,47 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang="en-US">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="author" content="Testilo">
7
+ <meta name="creator" content="Testilo">
8
+ <meta name="publisher" name="Testilo">
9
+ <meta name="description" content="comparison of accessibility scores">
10
+ <meta name="keywords" content="accessibility a11y web testing">
11
+ <title>Accessibility score comparison</title>
12
+ <link rel="icon" href="favicon.png">
13
+ <link rel="stylesheet" href="style.css">
14
+ </head>
15
+ <body>
16
+ <main>
17
+ <header>
18
+ <h1>Accessibility score comparison</h1>
19
+ </header>
20
+ <h2>Introduction</h2>
21
+ <p>The table below compares __pageCount__ web pages on <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a>. The page names are links to the pages on the web. The scores are links to digests that explain in detail how the scores were computed.</p>
22
+ <p>The pages were:</p>
23
+ <ol id="summary">
24
+ <li>Tested by <a href="https://www.npmjs.com/package/testaro">Testaro</a> with procedure <code>__scriptID__</code></li>
25
+ <li>Scored by <a href="https://www.npmjs.com/package/testilo">Testilo</a> with procedure <code>__scorer__</code></li>
26
+ <li>Digested by Testilo with procedure <code>__digester__</code></li>
27
+ <li>Compared by Testilo with procedure <code>__comparer__</code></li>
28
+ </ol>
29
+ <p>Testaro used ten tools (Alfa, Axe, Continuum, Equal Access, HTML CodeSniffer, Nu Html Checker, Tenon, Testaro, and WAVE) to perform about 1350 automated accessibility tests. Testilo used its scoring procedure to assign a score to each page, with 0 being perfect.</p>
30
+ <h2>Comparison</h2>
31
+ <table class="allBorder">
32
+ <caption>Accessibility scores of web pages</caption>
33
+ <thead>
34
+ <tr><th scope="col">Page</th><th scope="col" colspan="2">Score (from best to worst)</tr>
35
+ </thead>
36
+ <tbody class="linkSmaller secondCellRight">
37
+ __tableBody__
38
+ </tbody>
39
+ </table>
40
+ <h2>Disclaimer</h2>
41
+ <p>Other tests and scoring formulae would produce different results. The algorithms underlying these results can be inspected in the Testaro and Testilo packages and can be revised to fit different definitions and weightings of types of accessibility.</p>
42
+ <footer>
43
+ <p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
44
+ </footer>
45
+ </main>
46
+ </body>
47
+ </html>
@@ -0,0 +1,83 @@
1
+ // index: comparer for scoring procedure tsp28
2
+
3
+ // ########## IMPORTS
4
+
5
+ // Module to access files.
6
+ const fs = require('fs/promises');
7
+
8
+ // CONSTANTS
9
+
10
+ // Digester ID.
11
+ const id = 'tcp28';
12
+ // Newlines with indentations.
13
+ const joiner = '\n ';
14
+ const innerJoiner = '\n ';
15
+ const innestJoiner = '\n ';
16
+
17
+ // ########## FUNCTIONS
18
+
19
+ // Returns data on the targets.
20
+ const getData = async scoredReports => {
21
+ const bodyData = [];
22
+ for (const report of scoredReports) {
23
+ const {id, sources, score} = report;
24
+ bodyData.push({
25
+ id,
26
+ org: sources.target.what,
27
+ url: sources.target.which,
28
+ score: score.summary.total
29
+ });
30
+ };
31
+ return {
32
+ pageCount: scoredReports.length,
33
+ script: scoredReports[0].sources.script,
34
+ bodyData
35
+ }
36
+ };
37
+ // Returns the maximum score.
38
+ const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
39
+ // Converts report data to a table body.
40
+ const getTableBody = async bodyData => {
41
+ const maxScore = getMaxScore(bodyData);
42
+ const rows = bodyData
43
+ .sort((a, b) => a.score - b.score)
44
+ .map(item => {
45
+ const {id, org, url, score} = item;
46
+ const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
47
+ const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
48
+ // Make the bar width proportional.
49
+ const barWidth = 100 * score / maxScore;
50
+ const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
51
+ const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
52
+ const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
53
+ return row;
54
+ });
55
+ return rows.join(innestJoiner);
56
+ };
57
+ // Populates a query for a comparative table.
58
+ const populateQuery = async (scoredReports, query) => {
59
+ const data = await getData(scoredReports);
60
+ query.pageCount = data.pageCount;
61
+ query.scriptID = scoredReports[0].sources.script;
62
+ query.scorer = 'tsp28';
63
+ query.digester = 'tdp28';
64
+ query.comparer = 'tcp28';
65
+ query.tableBody = await getTableBody(data.bodyData);
66
+ const date = new Date();
67
+ query.dateISO = date.toISOString().slice(0, 10);
68
+ query.dateSlash = query.dateISO.replace(/-/g, '/');
69
+ };
70
+ // Returns a digested report.
71
+ exports.comparer = async scoredReports => {
72
+ // Create a query to replace placeholders.
73
+ const query = {};
74
+ populateQuery(scoredReports, query);
75
+ // Get the template.
76
+ let template = await fs.readFile(`${__dirname}/index.html`, 'utf8');
77
+ // Replace its placeholders.
78
+ Object.keys(query).forEach(param => {
79
+ template = template.replace(new RegExp(`__${param}__`, 'g'), query[param]);
80
+ });
81
+ // Return the digest.
82
+ return template;
83
+ };
@@ -0,0 +1,72 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang="en-US">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="author" content="Testilo">
7
+ <meta name="creator" content="Testilo">
8
+ <meta name="publisher" name="Testilo">
9
+ <meta name="description" content="report of accessibility testing of a web page">
10
+ <meta name="keywords" content="accessibility a11y web testing">
11
+ <title>Accessibility digest</title>
12
+ <link rel="icon" href="favicon.png">
13
+ <link rel="stylesheet" href="style.css">
14
+ </head>
15
+ <body>
16
+ <main>
17
+ <header>
18
+ <h1>Accessibility digest</h1>
19
+ <table class="allBorder">
20
+ <caption>Synopsis</caption>
21
+ <tr><th>Page</th><td>__org__</td></tr>
22
+ <tr><th>URL</th><td>__url__</td></tr>
23
+ <tr><th>Requester</th><td>__requester__</td></tr>
24
+ <tr><th>Test date</th><td>__dateSlash__</td></tr>
25
+ <tr><th>Score</th><td>__total__</td></tr>
26
+ <tr><th>Tested by</th><td>Testaro, procedure <code>__ts__</code></td></tr>
27
+ <tr><th>Scored by</th><td>Testilo, procedure <code>__sp__</code></td></tr>
28
+ <tr><th>Digested by</th><td>Testilo, procedure <code>__dp__</code></td></tr>
29
+ </table>
30
+ </header>
31
+ <h2>Introduction</h2>
32
+ <p>This is a digest of results from a battery of <a href="https://www.w3.org/WAI/">web accessibility</a> tests.</p>
33
+ <p>Ten different <dfn>tools</dfn> (Alfa, Axe, Continuum, Equal Access, HTML CodeSniffer, Nu Html Checker, QualWeb, Tenon, Testaro, and WAVE) tested the web page of __org__ at __url__ to check its compliance with various <dfn>rules</dfn>. There were a total of about 1350 rules, classified into about 250 accessibility <dfn>issues</dfn>.</p>
34
+ <p>The results were interpreted to yield an aggregate score of __total__, where 0 would be <q>perfect</q>.</p>
35
+ <h2>Total score</h2>
36
+ <p>The total score is the sum of five components.</p>
37
+ <table class="allBorder secondCellRight">
38
+ <caption>Score summary</caption>
39
+ <thead>
40
+ <tr><th>Component</th><th>Score</th><th>Description</th></tr>
41
+ </thead>
42
+ <tbody class="headersLeft">
43
+ <tr><th>total</th><td>__total__</td><td>Sum of the component scores</td></tr>
44
+ <tr><th>issue</th><td>__issue__</td><td>Severity and number of reported defects</td></tr>
45
+ <tr><th>tool</th><td>__tool__</td><td>Tool-by-tool defect ratings</td></tr>
46
+ <tr><th>prevention</th><td>__prevention__</td><td>Failed attempts by tools to test the page</td></tr>
47
+ <tr><th>log</th><td>__log__</td><td>Browser warnings about the page</td></tr>
48
+ <tr><th>latency</th><td>__latency__</td><td>Abnormal delay in page responses</td></tr>
49
+ </tbody>
50
+ </table>
51
+ <h2>Issue scores</h2>
52
+ <p>The score of an issue depends on the <dfn>severity</dfn> (user impact and certainty) of the issue and on how many instances were reported (by one or more tools).</p>
53
+ <table class="allBorder secondCellRight">
54
+ <caption>Issue scores</caption>
55
+ <thead>
56
+ <tr><th>Issue</th><th>Score</th></tr>
57
+ </thead>
58
+ <tbody class="headersLeft">
59
+ __issueRows__
60
+ </tbody>
61
+ </table>
62
+ <h2>Itemized issues</h2>
63
+ <p>The reported rule violations are itemized below, issue by issue. Additional details can be inspected in the complete report at the end of this page.</p>
64
+ __issueDetailRows__
65
+ <h2>Complete report</h2>
66
+ <pre>__report__</pre>
67
+ <footer>
68
+ <p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
69
+ </footer>
70
+ </main>
71
+ </body>
72
+ </html>
@@ -0,0 +1,105 @@
1
+ // index: digester for scoring procedure tsp28.
2
+
3
+ // IMPORTS
4
+
5
+ // Issue classification
6
+ const {issueClasses} = require('../../score/tic28');
7
+ // Function to process files.
8
+ const fs = require('fs/promises');
9
+
10
+ // CONSTANTS
11
+
12
+ // Digester ID.
13
+ const id = 'tdp28';
14
+ // Newlines with indentations.
15
+ const joiner = '\n ';
16
+ const innerJoiner = '\n ';
17
+
18
+ // FUNCTIONS
19
+
20
+ // Makes strings HTML-safe.
21
+ const htmlEscape = textOrNumber => textOrNumber
22
+ .toString()
23
+ .replace(/&/g, '&amp;')
24
+ .replace(/</g, '&lt;');
25
+ // Gets a row of the score-summary table.
26
+ const getScoreRow = (componentName, score) => `<tr><th>${componentName}</th><td>${score}</td></tr>`;
27
+ // Adds parameters to a query for a digest.
28
+ const populateQuery = (report, query) => {
29
+ const {sources, jobData, score} = report;
30
+ const {script, target, requester} = sources;
31
+ const {scoreProcID, summary, details} = score;
32
+ query.ts = script;
33
+ query.sp = scoreProcID;
34
+ query.dp = id;
35
+ // Add the job data to the query.
36
+ query.dateISO = jobData.endTime.slice(0, 10);
37
+ query.dateSlash = query.dateISO.replace(/-/g, '/');
38
+ query.org = target.what;
39
+ query.url = target.which;
40
+ query.requester = requester;
41
+ // Add values for the score-summary table to the query.
42
+ const rows = {
43
+ summaryRows: [],
44
+ issueRows: []
45
+ };
46
+ ['total', 'issue', 'tool', 'prevention', 'log', 'latency'].forEach(sumItem => {
47
+ query[sumItem] = summary[sumItem];
48
+ rows.summaryRows.push(getScoreRow(sumItem, query[sumItem]));
49
+ });
50
+ // Sort the issue IDs in descending score order.
51
+ const issueIDs = Object.keys(details.issue);
52
+ issueIDs.sort((a, b) => details.issue[b].score - details.issue[a].score);
53
+ // Get rows for the issue-score table.
54
+ issueIDs.forEach(issueID => {
55
+ rows.issueRows.push(getScoreRow(issueID, details.issue[issueID].score));
56
+ });
57
+ // Add the rows to the query.
58
+ ['summaryRows', 'issueRows'].forEach(rowType => {
59
+ query[rowType] = rows[rowType].join(innerJoiner);
60
+ });
61
+ // Add paragraph groups about the issue details to the query.
62
+ const issueDetailRows = [];
63
+ issueIDs.forEach(issueID => {
64
+ issueDetailRows.push(`<h3 class="bars">Issue <code>${issueID}</code></h3>`);
65
+ issueDetailRows.push(`<p>WCAG: ${issueClasses[issueID].wcag || 'N/A'}</p>`);
66
+ const issueData = details.issue[issueID];
67
+ issueDetailRows.push(`<p>Score: ${issueData.score}</p>`);
68
+ const toolIDs = Object.keys(issueData.tools);
69
+ toolIDs.forEach(toolID => {
70
+ issueDetailRows.push(`<h4>Complaints by <code>${toolID}</code></h5>`);
71
+ const ruleIDs = Object.keys(issueData.tools[toolID]);
72
+ ruleIDs.forEach(ruleID => {
73
+ const ruleData = issueData.tools[toolID][ruleID];
74
+ issueDetailRows.push(`<h5>Rule <code>${ruleID}</code></h5>`);
75
+ issueDetailRows.push(`<p>Description: ${ruleData.what}</p>`);
76
+ issueDetailRows.push(`<p>Count of instances: ${ruleData.complaints.countTotal}</p>`);
77
+ issueDetailRows.push('<h6>Complaint specifics</h6>');
78
+ issueDetailRows.push('<ul>');
79
+ ruleData.complaints.texts.forEach(text => {
80
+ issueDetailRows.push(` <li>${htmlEscape(text || '')}</li>`);
81
+ });
82
+ issueDetailRows.push('</ul>');
83
+ });
84
+ });
85
+ });
86
+ query.issueDetailRows = issueDetailRows.join(innerJoiner);
87
+ // Add an HTML-safe copy of the report to the query to be appended to the digest.
88
+ const reportJSON = JSON.stringify(report, null, 2);
89
+ const reportJSONSafe = htmlEscape(reportJSON);
90
+ query.report = reportJSONSafe;
91
+ };
92
+ // Returns a digested report.
93
+ exports.digester = async report => {
94
+ // Create a query to replace placeholders.
95
+ const query = {};
96
+ populateQuery(report, query);
97
+ // Get the template.
98
+ let template = await fs.readFile(`${__dirname}/index.html`, 'utf8');
99
+ // Replace its placeholders.
100
+ Object.keys(query).forEach(param => {
101
+ template = template.replace(new RegExp(`__${param}__`, 'g'), query[param]);
102
+ });
103
+ // Return the digest.
104
+ return template;
105
+ };
@@ -1,6 +1,6 @@
1
1
  /*
2
- tic26
3
- Testilo issue classification 26
2
+ tic28
3
+ Testilo issue classification 28
4
4
 
5
5
  Classifies tests of Testaro and its dependent tools into issues.
6
6
 
@@ -1719,6 +1719,13 @@ exports.issueClasses = {
1719
1719
  quality: 1,
1720
1720
  what: 'Links have the same text but different destinations'
1721
1721
  }
1722
+ },
1723
+ testaro: {
1724
+ linkAmb: {
1725
+ variable: false,
1726
+ quality: 1,
1727
+ what: 'Text content is identical in links with different destinations'
1728
+ }
1722
1729
  }
1723
1730
  }
1724
1731
  },
@@ -2138,7 +2145,7 @@ exports.issueClasses = {
2138
2145
  }
2139
2146
  }
2140
2147
  },
2141
- textRotated: {
2148
+ textDistorted: {
2142
2149
  wcag: '1.4.8',
2143
2150
  weight: 2,
2144
2151
  tools: {
@@ -2148,6 +2155,13 @@ exports.issueClasses = {
2148
2155
  quality: 1,
2149
2156
  what: 'Text is needlessly rotated 60+ degrees or more, hurting comprehension'
2150
2157
  }
2158
+ },
2159
+ testaro: {
2160
+ distortion: {
2161
+ variable: false,
2162
+ quality: 1,
2163
+ what: 'Element text content is distorted'
2164
+ }
2151
2165
  }
2152
2166
  }
2153
2167
  },
@@ -3727,6 +3741,11 @@ exports.issueClasses = {
3727
3741
  variable: false,
3728
3742
  quality: 1,
3729
3743
  what: 'Text alternative for the image in a link repeats text of the same or an adjacent link'
3744
+ },
3745
+ img_alt_redundant: {
3746
+ variable: false,
3747
+ quality: 1,
3748
+ what: 'Text alternative of the link image duplicates text in the same or an adjacent link'
3730
3749
  }
3731
3750
  },
3732
3751
  tenon: {
@@ -3790,6 +3809,13 @@ exports.issueClasses = {
3790
3809
  what: 'Link has a title attribute that is the same as the text inside the link'
3791
3810
  }
3792
3811
  },
3812
+ testaro: {
3813
+ linkTitle: {
3814
+ variable: false,
3815
+ quality: 1,
3816
+ what: 'Link has a title attribute that repeats link text content'
3817
+ }
3818
+ },
3793
3819
  wave: {
3794
3820
  title_redundant: {
3795
3821
  variable: false,
@@ -4188,6 +4214,13 @@ exports.issueClasses = {
4188
4214
  quality: 1,
4189
4215
  what: 'Multiple consecutive br elements may simulate paragraphs'
4190
4216
  }
4217
+ },
4218
+ testaro: {
4219
+ pseudoP: {
4220
+ variable: false,
4221
+ quality: 1,
4222
+ what: 'Element has 2 or more consecutive child br elements'
4223
+ }
4191
4224
  }
4192
4225
  }
4193
4226
  },
@@ -5251,6 +5284,13 @@ exports.issueClasses = {
5251
5284
  quality: 1,
5252
5285
  what: 'Long string of text is in all caps'
5253
5286
  }
5287
+ },
5288
+ testaro: {
5289
+ allCaps: {
5290
+ variable: false,
5291
+ quality: 1,
5292
+ what: 'Leaf element has entirely upper-case text content at least 8 characters long'
5293
+ }
5254
5294
  }
5255
5295
  }
5256
5296
  },
@@ -5271,6 +5311,13 @@ exports.issueClasses = {
5271
5311
  quality: 1,
5272
5312
  what: 'Long string of text is italic'
5273
5313
  }
5314
+ },
5315
+ testaro: {
5316
+ allSlanted: {
5317
+ variable: false,
5318
+ quality: 1,
5319
+ what: 'Leaf element has entirely italic or oblique text content at least 40 characters long'
5320
+ }
5274
5321
  }
5275
5322
  }
5276
5323
  },