testilo 10.3.1 → 11.0.2
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/README.md +215 -188
- package/batch.js +64 -0
- package/call.js +29 -4
- package/compare.js +2 -2
- package/merge.js +1 -7
- package/package.json +1 -1
- package/procs/compare/cp20sqrt/index.js +7 -10
- package/procs/compare/{cp15b → tcp24}/index.html +5 -5
- package/procs/compare/{cp12a → tcp24}/index.js +13 -20
- package/procs/score/tic25.js +1 -1
- package/procs/score/{tic24.js → tic26.js} +205 -199
- package/procs/score/tsp24.js +9 -3
- package/procs/score/tsp26.js +120 -0
- package/score.js +2 -8
- package/procs/compare/cp0/index.html +0 -46
- package/procs/compare/cp0/index.js +0 -70
- package/procs/compare/cp1/index.html +0 -46
- package/procs/compare/cp1/index.js +0 -71
- package/procs/compare/cp12a/index.html +0 -47
- package/procs/compare/cp12b/index.html +0 -47
- package/procs/compare/cp12b/index.js +0 -71
- package/procs/compare/cp14a/index.html +0 -47
- package/procs/compare/cp14a/index.js +0 -71
- package/procs/compare/cp15a/index.html +0 -47
- package/procs/compare/cp15a/index.js +0 -71
- package/procs/compare/cp15b/index.js +0 -74
- package/procs/compare/cp16a/index.html +0 -47
- package/procs/compare/cp16a/index.js +0 -74
- package/procs/compare/cp16b/index.html +0 -47
- package/procs/compare/cp16b/index.js +0 -74
- package/procs/digest/dp10a/index.html +0 -137
- package/procs/digest/dp10a/index.js +0 -402
- package/procs/digest/dp10b/index.html +0 -74
- package/procs/digest/dp10b/index.js +0 -130
- package/procs/digest/dp10c/index.html +0 -55
- package/procs/digest/dp10c/index.js +0 -129
- package/procs/digest/dp11a/index.html +0 -76
- package/procs/digest/dp11a/index.js +0 -127
- package/procs/digest/dp12a/index.html +0 -78
- package/procs/digest/dp12a/index.js +0 -126
- package/procs/digest/dp12b/index.html +0 -78
- package/procs/digest/dp12b/index.js +0 -126
- package/procs/digest/dp13a/index.html +0 -78
- package/procs/digest/dp13a/index.js +0 -126
- package/procs/digest/dp14a/index.html +0 -79
- package/procs/digest/dp14a/index.js +0 -126
- package/procs/digest/dp15a/index.html +0 -80
- package/procs/digest/dp15a/index.js +0 -126
- package/procs/digest/dp16a/index.html +0 -80
- package/procs/digest/dp16a/index.js +0 -126
- package/procs/digest/dp16b/index.html +0 -80
- package/procs/digest/dp16b/index.js +0 -126
- package/procs/digest/dp18a/index.html +0 -80
- package/procs/digest/dp18a/index.js +0 -129
- package/procs/digest/dp20c/index.html +0 -54
- package/procs/digest/dp20c/index.js +0 -117
- package/procs/digest/dp20d/index.html +0 -54
- package/procs/digest/dp20d/index.js +0 -121
- package/procs/digest/tdp09a/index.html +0 -126
- package/procs/digest/tdp09a/index.js +0 -381
- package/procs/digest/tdp22/index.html +0 -54
- package/procs/digest/tdp22/index.js +0 -120
- package/procs/score/tic21.js +0 -6868
- package/procs/score/tic22.js +0 -6911
- package/procs/score/tic23.js +0 -6924
- package/procs/score/tsp21.js +0 -720
- package/procs/score/tsp22.js +0 -720
- package/procs/score/tsp23.js +0 -720
- package/specs/batches/orgs.json +0 -43
- package/specs/scripts/ts21.json +0 -213
- package/specs/scripts/ts23.json +0 -219
- package/specs/scripts/ts24.json +0 -225
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
cp12b.js
|
|
3
|
-
Returns a query for an HTML page including a bar-graph table.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// ########## IMPORTS
|
|
7
|
-
|
|
8
|
-
// Module to keep secrets local.
|
|
9
|
-
require('dotenv').config();
|
|
10
|
-
// Module to access files.
|
|
11
|
-
const fs = require('fs/promises');
|
|
12
|
-
|
|
13
|
-
// ########## CONSTANTS
|
|
14
|
-
|
|
15
|
-
const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
|
|
16
|
-
const query = {};
|
|
17
|
-
|
|
18
|
-
// ########## FUNCTIONS
|
|
19
|
-
|
|
20
|
-
// Returns data on the hosts in the report directory.
|
|
21
|
-
const getData = async () => {
|
|
22
|
-
const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
|
|
23
|
-
const reportFileNamesAll = await fs.readdir(reportDirAbs);
|
|
24
|
-
const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
|
|
25
|
-
const pageCount = reportFileNamesSource.length;
|
|
26
|
-
const bodyData = [];
|
|
27
|
-
for (const fileName of reportFileNamesSource) {
|
|
28
|
-
const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
|
|
29
|
-
const file = JSON.parse(fileJSON);
|
|
30
|
-
const {id, host, score} = file;
|
|
31
|
-
bodyData.push({
|
|
32
|
-
id,
|
|
33
|
-
org: host.what,
|
|
34
|
-
url: host.which,
|
|
35
|
-
score: score.summary.total
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
return {
|
|
39
|
-
pageCount,
|
|
40
|
-
bodyData
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
// Returns the maximum score.
|
|
44
|
-
const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
|
|
45
|
-
// Converts report data to a table body.
|
|
46
|
-
const getTableBody = async bodyData => {
|
|
47
|
-
const maxScore = getMaxScore(bodyData);
|
|
48
|
-
const rows = bodyData
|
|
49
|
-
.sort((a, b) => a.score - b.score)
|
|
50
|
-
.map(item => {
|
|
51
|
-
const {id, org, url, score} = item;
|
|
52
|
-
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
53
|
-
const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
|
|
54
|
-
const barWidth = 100 * score / maxScore;
|
|
55
|
-
const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
|
|
56
|
-
const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
|
|
57
|
-
const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
|
|
58
|
-
return row;
|
|
59
|
-
});
|
|
60
|
-
return rows.join('\n ');
|
|
61
|
-
};
|
|
62
|
-
// Returns a query for a comparative table.
|
|
63
|
-
exports.getQuery = async () => {
|
|
64
|
-
const data = await getData();
|
|
65
|
-
query.pageCount = data.pageCount;
|
|
66
|
-
query.tableBody = await getTableBody(data.bodyData);
|
|
67
|
-
const date = new Date();
|
|
68
|
-
query.dateISO = date.toISOString().slice(0, 10);
|
|
69
|
-
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
70
|
-
return query;
|
|
71
|
-
};
|
|
@@ -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>tp15</code></li>
|
|
25
|
-
<li>Scored by <a href="https://www.npmjs.com/package/testilo">Testilo</a> with procedure <code>sp15c</code></li>
|
|
26
|
-
<li>Digested by Testilo with procedure <code>dp15a</code></li>
|
|
27
|
-
<li>Compared by Testilo with procedure <code>cp15a</code></li>
|
|
28
|
-
</ol>
|
|
29
|
-
<p>The Testaro procedure performs 1230 tests on each page. Of these, 24 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others.</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 (lower is better)</tr>
|
|
35
|
-
</thead>
|
|
36
|
-
<tbody class="linkSmaller secondCellRight">
|
|
37
|
-
__tableBody__
|
|
38
|
-
</tbody>
|
|
39
|
-
</table>
|
|
40
|
-
<h2>Discussion</h2>
|
|
41
|
-
<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 are not detectable with these tests. Different reasonable procedures could yield different test results and different scores. Testaro and Testilo can be customized 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,71 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
cp15a.js
|
|
3
|
-
Returns a query for an HTML page including a bar-graph table.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// ########## IMPORTS
|
|
7
|
-
|
|
8
|
-
// Module to keep secrets local.
|
|
9
|
-
require('dotenv').config();
|
|
10
|
-
// Module to access files.
|
|
11
|
-
const fs = require('fs/promises');
|
|
12
|
-
|
|
13
|
-
// ########## CONSTANTS
|
|
14
|
-
|
|
15
|
-
const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
|
|
16
|
-
const query = {};
|
|
17
|
-
|
|
18
|
-
// ########## FUNCTIONS
|
|
19
|
-
|
|
20
|
-
// Returns data on the hosts in the report directory.
|
|
21
|
-
const getData = async () => {
|
|
22
|
-
const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
|
|
23
|
-
const reportFileNamesAll = await fs.readdir(reportDirAbs);
|
|
24
|
-
const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
|
|
25
|
-
const pageCount = reportFileNamesSource.length;
|
|
26
|
-
const bodyData = [];
|
|
27
|
-
for (const fileName of reportFileNamesSource) {
|
|
28
|
-
const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
|
|
29
|
-
const file = JSON.parse(fileJSON);
|
|
30
|
-
const {id, host, score} = file;
|
|
31
|
-
bodyData.push({
|
|
32
|
-
id,
|
|
33
|
-
org: host.what,
|
|
34
|
-
url: host.which,
|
|
35
|
-
score: score.summary.total
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
return {
|
|
39
|
-
pageCount,
|
|
40
|
-
bodyData
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
// Returns the maximum score.
|
|
44
|
-
const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
|
|
45
|
-
// Converts report data to a table body.
|
|
46
|
-
const getTableBody = async bodyData => {
|
|
47
|
-
const maxScore = getMaxScore(bodyData);
|
|
48
|
-
const rows = bodyData
|
|
49
|
-
.sort((a, b) => a.score - b.score)
|
|
50
|
-
.map(item => {
|
|
51
|
-
const {id, org, url, score} = item;
|
|
52
|
-
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
53
|
-
const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
|
|
54
|
-
const barWidth = 100 * score / maxScore;
|
|
55
|
-
const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
|
|
56
|
-
const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
|
|
57
|
-
const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
|
|
58
|
-
return row;
|
|
59
|
-
});
|
|
60
|
-
return rows.join('\n ');
|
|
61
|
-
};
|
|
62
|
-
// Returns a query for a comparative table.
|
|
63
|
-
exports.getQuery = async () => {
|
|
64
|
-
const data = await getData();
|
|
65
|
-
query.pageCount = data.pageCount;
|
|
66
|
-
query.tableBody = await getTableBody(data.bodyData);
|
|
67
|
-
const date = new Date();
|
|
68
|
-
query.dateISO = date.toISOString().slice(0, 10);
|
|
69
|
-
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
70
|
-
return query;
|
|
71
|
-
};
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
cp15b.js
|
|
3
|
-
Returns a query for an HTML page including a bar-graph table.
|
|
4
|
-
Makes the bar widths the square roots of their proportional widths, for cases of extreme
|
|
5
|
-
score disparity.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
// ########## IMPORTS
|
|
9
|
-
|
|
10
|
-
// Module to keep secrets local.
|
|
11
|
-
require('dotenv').config();
|
|
12
|
-
// Module to access files.
|
|
13
|
-
const fs = require('fs/promises');
|
|
14
|
-
|
|
15
|
-
// ########## CONSTANTS
|
|
16
|
-
|
|
17
|
-
const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
|
|
18
|
-
const query = {};
|
|
19
|
-
|
|
20
|
-
// ########## FUNCTIONS
|
|
21
|
-
|
|
22
|
-
// Returns data on the hosts in the report directory.
|
|
23
|
-
const getData = async () => {
|
|
24
|
-
const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
|
|
25
|
-
const reportFileNamesAll = await fs.readdir(reportDirAbs);
|
|
26
|
-
const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
|
|
27
|
-
const pageCount = reportFileNamesSource.length;
|
|
28
|
-
const bodyData = [];
|
|
29
|
-
for (const fileName of reportFileNamesSource) {
|
|
30
|
-
const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
|
|
31
|
-
const file = JSON.parse(fileJSON);
|
|
32
|
-
const {id, host, score} = file;
|
|
33
|
-
bodyData.push({
|
|
34
|
-
id,
|
|
35
|
-
org: host.what,
|
|
36
|
-
url: host.which,
|
|
37
|
-
score: score.summary.total
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
return {
|
|
41
|
-
pageCount,
|
|
42
|
-
bodyData
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
// Returns the maximum score.
|
|
46
|
-
const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
|
|
47
|
-
// Converts report data to a table body.
|
|
48
|
-
const getTableBody = async bodyData => {
|
|
49
|
-
const maxScore = getMaxScore(bodyData);
|
|
50
|
-
const rows = bodyData
|
|
51
|
-
.sort((a, b) => a.score - b.score)
|
|
52
|
-
.map(item => {
|
|
53
|
-
const {id, org, url, score} = item;
|
|
54
|
-
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
55
|
-
const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
|
|
56
|
-
// Make the bar width the square root of its proportional width.
|
|
57
|
-
const barWidth = 100 * Math.sqrt(score / maxScore);
|
|
58
|
-
const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
|
|
59
|
-
const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
|
|
60
|
-
const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
|
|
61
|
-
return row;
|
|
62
|
-
});
|
|
63
|
-
return rows.join('\n ');
|
|
64
|
-
};
|
|
65
|
-
// Returns a query for a comparative table.
|
|
66
|
-
exports.getQuery = async () => {
|
|
67
|
-
const data = await getData();
|
|
68
|
-
query.pageCount = data.pageCount;
|
|
69
|
-
query.tableBody = await getTableBody(data.bodyData);
|
|
70
|
-
const date = new Date();
|
|
71
|
-
query.dateISO = date.toISOString().slice(0, 10);
|
|
72
|
-
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
73
|
-
return query;
|
|
74
|
-
};
|
|
@@ -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>tp16</code></li>
|
|
25
|
-
<li>Scored by <a href="https://www.npmjs.com/package/testilo">Testilo</a> with procedure <code>sp16a</code></li>
|
|
26
|
-
<li>Digested by Testilo with procedure <code>dp16a</code></li>
|
|
27
|
-
<li>Compared by Testilo with procedure <code>cp16a</code></li>
|
|
28
|
-
</ol>
|
|
29
|
-
<p>The Testaro procedure performs 1225 tests on each page. Of these, 19 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others.</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 (lower is better)</tr>
|
|
35
|
-
</thead>
|
|
36
|
-
<tbody class="linkSmaller secondCellRight">
|
|
37
|
-
__tableBody__
|
|
38
|
-
</tbody>
|
|
39
|
-
</table>
|
|
40
|
-
<h2>Discussion</h2>
|
|
41
|
-
<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 are not detectable with these tests. Different reasonable procedures could yield different test results and different scores. Testaro and Testilo can be customized 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,74 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
cp16a.js
|
|
3
|
-
Returns a query for an HTML page including a bar-graph table.
|
|
4
|
-
Makes the bar widths the square roots of their proportional widths, for cases of extreme
|
|
5
|
-
score disparity.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
// ########## IMPORTS
|
|
9
|
-
|
|
10
|
-
// Module to keep secrets local.
|
|
11
|
-
require('dotenv').config();
|
|
12
|
-
// Module to access files.
|
|
13
|
-
const fs = require('fs/promises');
|
|
14
|
-
|
|
15
|
-
// ########## CONSTANTS
|
|
16
|
-
|
|
17
|
-
const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
|
|
18
|
-
const query = {};
|
|
19
|
-
|
|
20
|
-
// ########## FUNCTIONS
|
|
21
|
-
|
|
22
|
-
// Returns data on the hosts in the report directory.
|
|
23
|
-
const getData = async () => {
|
|
24
|
-
const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
|
|
25
|
-
const reportFileNamesAll = await fs.readdir(reportDirAbs);
|
|
26
|
-
const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
|
|
27
|
-
const pageCount = reportFileNamesSource.length;
|
|
28
|
-
const bodyData = [];
|
|
29
|
-
for (const fileName of reportFileNamesSource) {
|
|
30
|
-
const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
|
|
31
|
-
const file = JSON.parse(fileJSON);
|
|
32
|
-
const {id, host, score} = file;
|
|
33
|
-
bodyData.push({
|
|
34
|
-
id,
|
|
35
|
-
org: host.what,
|
|
36
|
-
url: host.which,
|
|
37
|
-
score: score.summary.total
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
return {
|
|
41
|
-
pageCount,
|
|
42
|
-
bodyData
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
// Returns the maximum score.
|
|
46
|
-
const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
|
|
47
|
-
// Converts report data to a table body.
|
|
48
|
-
const getTableBody = async bodyData => {
|
|
49
|
-
const maxScore = getMaxScore(bodyData);
|
|
50
|
-
const rows = bodyData
|
|
51
|
-
.sort((a, b) => a.score - b.score)
|
|
52
|
-
.map(item => {
|
|
53
|
-
const {id, org, url, score} = item;
|
|
54
|
-
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
55
|
-
const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
|
|
56
|
-
// Make the bar width the square root of its proportional width.
|
|
57
|
-
const barWidth = 100 * Math.sqrt(score / maxScore);
|
|
58
|
-
const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
|
|
59
|
-
const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
|
|
60
|
-
const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
|
|
61
|
-
return row;
|
|
62
|
-
});
|
|
63
|
-
return rows.join('\n ');
|
|
64
|
-
};
|
|
65
|
-
// Returns a query for a comparative table.
|
|
66
|
-
exports.getQuery = async () => {
|
|
67
|
-
const data = await getData();
|
|
68
|
-
query.pageCount = data.pageCount;
|
|
69
|
-
query.tableBody = await getTableBody(data.bodyData);
|
|
70
|
-
const date = new Date();
|
|
71
|
-
query.dateISO = date.toISOString().slice(0, 10);
|
|
72
|
-
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
73
|
-
return query;
|
|
74
|
-
};
|
|
@@ -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>tp16</code></li>
|
|
25
|
-
<li>Scored by <a href="https://www.npmjs.com/package/testilo">Testilo</a> with procedure <code>sp16a</code></li>
|
|
26
|
-
<li>Digested by Testilo with procedure <code>dp16a</code></li>
|
|
27
|
-
<li>Compared by Testilo with procedure <code>cp16a</code></li>
|
|
28
|
-
</ol>
|
|
29
|
-
<p>The Testaro procedure performs 1225 tests on each page. Of these, 19 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others.</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 (lower is better)</tr>
|
|
35
|
-
</thead>
|
|
36
|
-
<tbody class="linkSmaller secondCellRight">
|
|
37
|
-
__tableBody__
|
|
38
|
-
</tbody>
|
|
39
|
-
</table>
|
|
40
|
-
<h2>Discussion</h2>
|
|
41
|
-
<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 are not detectable with these tests. Different reasonable procedures could yield different test results and different scores. Testaro and Testilo can be customized 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,74 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
cp16a.js
|
|
3
|
-
Returns a query for an HTML page including a bar-graph table.
|
|
4
|
-
Makes the bar widths the square roots of their proportional widths, for cases of extreme
|
|
5
|
-
score disparity.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
// ########## IMPORTS
|
|
9
|
-
|
|
10
|
-
// Module to keep secrets local.
|
|
11
|
-
require('dotenv').config();
|
|
12
|
-
// Module to access files.
|
|
13
|
-
const fs = require('fs/promises');
|
|
14
|
-
|
|
15
|
-
// ########## CONSTANTS
|
|
16
|
-
|
|
17
|
-
const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
|
|
18
|
-
const query = {};
|
|
19
|
-
|
|
20
|
-
// ########## FUNCTIONS
|
|
21
|
-
|
|
22
|
-
// Returns data on the hosts in the scored-report directory.
|
|
23
|
-
const getData = async () => {
|
|
24
|
-
const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
|
|
25
|
-
const reportFileNamesAll = await fs.readdir(reportDirAbs);
|
|
26
|
-
const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
|
|
27
|
-
const pageCount = reportFileNamesSource.length;
|
|
28
|
-
const bodyData = [];
|
|
29
|
-
for (const fileName of reportFileNamesSource) {
|
|
30
|
-
const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
|
|
31
|
-
const file = JSON.parse(fileJSON);
|
|
32
|
-
const {id, host, score} = file;
|
|
33
|
-
bodyData.push({
|
|
34
|
-
id,
|
|
35
|
-
org: host.what,
|
|
36
|
-
url: host.which,
|
|
37
|
-
score: score.summary.total
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
return {
|
|
41
|
-
pageCount,
|
|
42
|
-
bodyData
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
// Returns the maximum score.
|
|
46
|
-
const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
|
|
47
|
-
// Converts report data to a table body.
|
|
48
|
-
const getTableBody = async bodyData => {
|
|
49
|
-
const maxScore = getMaxScore(bodyData);
|
|
50
|
-
const rows = bodyData
|
|
51
|
-
.sort((a, b) => a.score - b.score)
|
|
52
|
-
.map(item => {
|
|
53
|
-
const {id, org, url, score} = item;
|
|
54
|
-
const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
|
|
55
|
-
const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
|
|
56
|
-
// Make the bar width proportional.
|
|
57
|
-
const barWidth = 100 * score / maxScore;
|
|
58
|
-
const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
|
|
59
|
-
const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
|
|
60
|
-
const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
|
|
61
|
-
return row;
|
|
62
|
-
});
|
|
63
|
-
return rows.join('\n ');
|
|
64
|
-
};
|
|
65
|
-
// Returns a query for a comparative table.
|
|
66
|
-
exports.getQuery = async () => {
|
|
67
|
-
const data = await getData();
|
|
68
|
-
query.pageCount = data.pageCount;
|
|
69
|
-
query.tableBody = await getTableBody(data.bodyData);
|
|
70
|
-
const date = new Date();
|
|
71
|
-
query.dateISO = date.toISOString().slice(0, 10);
|
|
72
|
-
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
73
|
-
return query;
|
|
74
|
-
};
|