testilo 21.1.1 → 21.2.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 +1 -1
- package/procs/compare/{tcp37 → tcp38}/index.html +3 -3
- package/procs/compare/{tcp37 → tcp38}/index.js +6 -5
- package/procs/digest/tdp38/index.html +1 -1
- package/procs/compare/tcp31/index.html +0 -47
- package/procs/compare/tcp31/index.js +0 -83
- package/procs/compare/tcp33/index.html +0 -47
- package/procs/compare/tcp33/index.js +0 -83
package/package.json
CHANGED
|
@@ -21,12 +21,12 @@
|
|
|
21
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
22
|
<p>The pages were:</p>
|
|
23
23
|
<ol id="summary">
|
|
24
|
-
<li>Tested by <a href="https://www.npmjs.com/package/testaro">Testaro</a></li>
|
|
24
|
+
<li>Tested by <a href="https://www.npmjs.com/package/testaro">Testaro</a> with script <code>__script__</code></li>
|
|
25
25
|
<li>Scored by <a href="https://www.npmjs.com/package/testilo">Testilo</a> with procedure <code>__scorer__</code></li>
|
|
26
26
|
<li>Digested by Testilo with procedure <code>__digester__</code></li>
|
|
27
27
|
<li>Compared by Testilo with procedure <code>__comparer__</code></li>
|
|
28
28
|
</ol>
|
|
29
|
-
<p>Testaro used nine tools (Alfa, ASLint, Axe, Equal Access, HTML CodeSniffer, Nu Html Checker, Testaro, and WAVE) to perform about
|
|
29
|
+
<p>Testaro used nine tools (Alfa, ASLint, Axe, Equal Access, HTML CodeSniffer, Nu Html Checker, Testaro, and WAVE) to perform about 915 automated accessibility tests. Testilo assigned a score to each page, with 0 being perfect.</p>
|
|
30
30
|
<h2>Comparison</h2>
|
|
31
31
|
<table class="allBorder">
|
|
32
32
|
<caption>Accessibility scores of web pages</caption>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
</tbody>
|
|
39
39
|
</table>
|
|
40
40
|
<h2>Disclaimer</h2>
|
|
41
|
-
<p>
|
|
41
|
+
<p>Other procedures would yield different scores and rank orders among these pages.</p>
|
|
42
42
|
<footer>
|
|
43
43
|
<p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
|
|
44
44
|
</footer>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
index
|
|
3
|
-
Compares scores in reports scored by
|
|
3
|
+
Compares scores in reports scored by tsp38 for use by Testu.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
// ########## IMPORTS
|
|
@@ -11,7 +11,7 @@ const fs = require('fs/promises');
|
|
|
11
11
|
// CONSTANTS
|
|
12
12
|
|
|
13
13
|
// Digester ID.
|
|
14
|
-
const id = '
|
|
14
|
+
const id = 'tcp38';
|
|
15
15
|
// Newlines with indentations.
|
|
16
16
|
const joiner = '\n ';
|
|
17
17
|
const innerJoiner = '\n ';
|
|
@@ -65,9 +65,10 @@ const getTableBody = async bodyData => {
|
|
|
65
65
|
const populateQuery = async (scoredReports, query) => {
|
|
66
66
|
const data = await getData(scoredReports);
|
|
67
67
|
query.pageCount = data.pageCount;
|
|
68
|
-
query.
|
|
69
|
-
query.
|
|
70
|
-
query.
|
|
68
|
+
query.script = 'ts37';
|
|
69
|
+
query.scorer = 'tsp38';
|
|
70
|
+
query.digester = 'tdp38';
|
|
71
|
+
query.comparer = 'tcp38';
|
|
71
72
|
query.tableBody = await getTableBody(data.bodyData);
|
|
72
73
|
const date = new Date();
|
|
73
74
|
query.dateISO = date.toISOString().slice(0, 10);
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
</header>
|
|
32
32
|
<h2>Introduction</h2>
|
|
33
33
|
<p>How <a href="https://www.w3.org/WAI/">accessible</a> is the __org__ web page at <a href="__url__"><code>__url__</code></a>?</p>
|
|
34
|
-
<p>This digest can help answer that question. Nine different tools (Alfa, ASLint, Axe, Equal Access, HTML CodeSniffer, Nu Html Checker, QualWeb, Testaro, and WAVE) tested the page to check its compliance with their accessibility rules. In all, the tools define about
|
|
34
|
+
<p>This digest can help answer that question. Nine different tools (Alfa, ASLint, Axe, Equal Access, HTML CodeSniffer, Nu Html Checker, QualWeb, Testaro, and WAVE) tested the page to check its compliance with their accessibility rules. In all, the tools define about 915 rules, which are classified here into about 300 accessibility issues.</p>
|
|
35
35
|
<p>The results were interpreted to yield a score, with 0 being ideal. The score for this page was __total__, the sum of __issue__ for issues, __tool__ for tool-by-tool ratings, __prevention__ for the page preventing tools from running, __log__ for browser warnings, and __latency__ for delayed page responses.</p>
|
|
36
36
|
<h2>Issue summary</h2>
|
|
37
37
|
<table class="allBorder thirdCellRight">
|
|
@@ -1,47 +0,0 @@
|
|
|
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 nine tools (Alfa, Axe, Continuum, Equal Access, HTML CodeSniffer, Nu Html Checker, Testaro, and WAVE) to perform about 900 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>
|
|
@@ -1,83 +0,0 @@
|
|
|
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 = 'tcp31';
|
|
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
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
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 nine tools (Alfa, Axe, Continuum, Equal Access, HTML CodeSniffer, Nu Html Checker, Testaro, and WAVE) to perform about 920 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>
|
|
@@ -1,83 +0,0 @@
|
|
|
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 = 'tcp33';
|
|
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 = 'tsp33';
|
|
63
|
-
query.digester = 'tdp33';
|
|
64
|
-
query.comparer = 'tcp33';
|
|
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 comparative 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 comparison.
|
|
82
|
-
return template;
|
|
83
|
-
};
|