testilo 19.0.2 → 19.0.3
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/digest/tdp37/index.html +72 -0
- package/procs/digest/tdp37/index.js +99 -0
- package/procs/score/tic37.js +8215 -0
- package/procs/score/tsp37.js +278 -0
package/package.json
CHANGED
|
@@ -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
|
+
<tr><th>Full report</th><td><a href="__reportURL__"><code>__reportURL__</code></a></td></tr>
|
|
30
|
+
</table>
|
|
31
|
+
</header>
|
|
32
|
+
<h2>Introduction</h2>
|
|
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 960 rules, which are classified here into about 290 accessibility issues. The results were interpreted to yield a score. If the page passed every test, its score would be 0. The score for this page was __total__.</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>issue</th><td>__issue__</td><td>Severity and number of reported defects</td></tr>
|
|
44
|
+
<tr><th>tool</th><td>__tool__</td><td>Tool-by-tool defect ratings</td></tr>
|
|
45
|
+
<tr><th>prevention</th><td>__prevention__</td><td>Failed attempts by tools to test the page</td></tr>
|
|
46
|
+
<tr><th>log</th><td>__log__</td><td>Browser warnings about the page</td></tr>
|
|
47
|
+
<tr><th>latency</th><td>__latency__</td><td>Abnormal delay in page responses</td></tr>
|
|
48
|
+
</tbody>
|
|
49
|
+
<tfoot>
|
|
50
|
+
<tr><th>total</th><td>__total__</td><td>Sum of the component scores</td></tr>
|
|
51
|
+
</tfoot>
|
|
52
|
+
</table>
|
|
53
|
+
<h2>Issue scores</h2>
|
|
54
|
+
<p>The score on 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>
|
|
55
|
+
<table class="allBorder thirdCellRight">
|
|
56
|
+
<caption>Issue scores</caption>
|
|
57
|
+
<thead>
|
|
58
|
+
<tr><th>Issue</th><th>WCAG</th><th>Score</th><th>Tools Reporting the Issue</th></tr>
|
|
59
|
+
</thead>
|
|
60
|
+
<tbody class="headersLeft">
|
|
61
|
+
__issueRows__
|
|
62
|
+
</tbody>
|
|
63
|
+
</table>
|
|
64
|
+
<h2>Itemized issues</h2>
|
|
65
|
+
<p>The reported rule violations are itemized below, issue by issue. Additional details can be inspected in the <a href="__reportURL__">full report</a>.</p>
|
|
66
|
+
__issueDetailRows__
|
|
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,99 @@
|
|
|
1
|
+
// index: digester for scoring procedure tsp36.
|
|
2
|
+
|
|
3
|
+
// IMPORTS
|
|
4
|
+
|
|
5
|
+
// Module to classify tool rules into issues
|
|
6
|
+
const {issues} = require('../../score/tic37');
|
|
7
|
+
// Module to process files.
|
|
8
|
+
const fs = require('fs/promises');
|
|
9
|
+
|
|
10
|
+
// CONSTANTS
|
|
11
|
+
|
|
12
|
+
// Digester ID.
|
|
13
|
+
const id = 'tdp37';
|
|
14
|
+
// Newline with indentations.
|
|
15
|
+
const innerJoiner = '\n ';
|
|
16
|
+
|
|
17
|
+
// FUNCTIONS
|
|
18
|
+
|
|
19
|
+
// Gets a row of the score-summary table.
|
|
20
|
+
const getScoreRow = (componentName, score) => `<tr><th>${componentName}</th><td>${score}</td></tr>`;
|
|
21
|
+
// Gets a row of the issue-score-summary table.
|
|
22
|
+
const getIssueScoreRow = (issueID, wcag, score, [tools]) => {
|
|
23
|
+
const toolList = tools.join(', ');
|
|
24
|
+
return `<tr><th>${issueID}</th><td>${wcag}<td>${score}</td><td>${toolList}</tr>`;
|
|
25
|
+
};
|
|
26
|
+
// Adds parameters to a query for a digest.
|
|
27
|
+
const populateQuery = (report, query) => {
|
|
28
|
+
const {sources, jobData, score} = report;
|
|
29
|
+
const {script, target, requester} = sources;
|
|
30
|
+
const {scoreProcID, summary, details} = score;
|
|
31
|
+
query.ts = script;
|
|
32
|
+
query.sp = scoreProcID;
|
|
33
|
+
query.dp = id;
|
|
34
|
+
// Add the job data to the query.
|
|
35
|
+
query.dateISO = jobData.endTime.slice(0, 10);
|
|
36
|
+
query.dateSlash = query.dateISO.replace(/-/g, '/');
|
|
37
|
+
query.org = target.what;
|
|
38
|
+
query.url = target.which;
|
|
39
|
+
query.requester = requester;
|
|
40
|
+
query.reportURL = `report?jobID=${report.id}`;
|
|
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
|
+
const {score, tools} = details.issue[issueID];
|
|
56
|
+
rows.issueRows.push(
|
|
57
|
+
getIssueScoreRow(issueID, issues[issueID].wcag, score, Object.keys(tools))
|
|
58
|
+
);
|
|
59
|
+
});
|
|
60
|
+
// Add the rows to the query.
|
|
61
|
+
['summaryRows', 'issueRows'].forEach(rowType => {
|
|
62
|
+
query[rowType] = rows[rowType].join(innerJoiner);
|
|
63
|
+
});
|
|
64
|
+
// Add paragraph groups about the issue details to the query.
|
|
65
|
+
const issueDetailRows = [];
|
|
66
|
+
issueIDs.forEach(issueID => {
|
|
67
|
+
issueDetailRows.push(`<h3 class="bars">Issue <code>${issueID}</code></h3>`);
|
|
68
|
+
issueDetailRows.push(`<p>Impact: ${issues[issueID].why || 'N/A'}</p>`);
|
|
69
|
+
issueDetailRows.push(`<p>WCAG: ${issues[issueID].wcag || 'N/A'}</p>`);
|
|
70
|
+
const issueData = details.issue[issueID];
|
|
71
|
+
issueDetailRows.push(`<p>Score: ${issueData.score}</p>`);
|
|
72
|
+
const toolIDs = Object.keys(issueData.tools);
|
|
73
|
+
toolIDs.forEach(toolID => {
|
|
74
|
+
issueDetailRows.push(`<h4>Violations of <code>${toolID}</code> rules</h5>`);
|
|
75
|
+
const ruleIDs = Object.keys(issueData.tools[toolID]);
|
|
76
|
+
ruleIDs.forEach(ruleID => {
|
|
77
|
+
const ruleData = issueData.tools[toolID][ruleID];
|
|
78
|
+
issueDetailRows.push(`<h5>Rule <code>${ruleID}</code></h5>`);
|
|
79
|
+
issueDetailRows.push(`<p>Description: ${ruleData.what}</p>`);
|
|
80
|
+
issueDetailRows.push(`<p>Count of instances: ${ruleData.complaints.countTotal}</p>`);
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
query.issueDetailRows = issueDetailRows.join(innerJoiner);
|
|
85
|
+
};
|
|
86
|
+
// Returns a digested report.
|
|
87
|
+
exports.digester = async report => {
|
|
88
|
+
// Create a query to replace placeholders.
|
|
89
|
+
const query = {};
|
|
90
|
+
populateQuery(report, query);
|
|
91
|
+
// Get the template.
|
|
92
|
+
let template = await fs.readFile(`${__dirname}/index.html`, 'utf8');
|
|
93
|
+
// Replace its placeholders.
|
|
94
|
+
Object.keys(query).forEach(param => {
|
|
95
|
+
template = template.replace(new RegExp(`__${param}__`, 'g'), query[param]);
|
|
96
|
+
});
|
|
97
|
+
// Return the digest.
|
|
98
|
+
return template;
|
|
99
|
+
};
|