testilo 3.9.11 → 3.9.15

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": "3.9.11",
3
+ "version": "3.9.15",
4
4
  "description": "Client that scores and digests Testaro reports",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -0,0 +1,39 @@
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>Transactional accessibility comparison</h1>
19
+ </header>
20
+ <h2>Introduction</h2>
21
+ <p>This report compares __pageCount__ web pages, rating each page on <dfn>transactional accessibility</dfn>. The score given to each page estimates the <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a> of one particular transaction, in which the user discovers how to report an accessibility issue with the page to those who are responsible for the page.</p>
22
+ <p>You can find a more detailed explanation of transactional accessibility and how the accessibility of this particular transaction is scored in each of the reports. The scores in the table below are links to those reports.</p>
23
+ <p>This report was produced by the <code>cpA11yMessage</code> procedure of <a href="https://www.npmjs.com/package/testilo">Testilo</a>.
24
+ <h2>Comparison</h2>
25
+ <table class="allBorder">
26
+ <caption>Accessibility scores of accessibility-reporting transactions</caption>
27
+ <thead>
28
+ <tr><th scope="col">Page</th><th scope="col" colspan="2">Score (higher is better)</tr>
29
+ </thead>
30
+ <tbody class="linkSmaller secondCellRight">
31
+ __tableBody__
32
+ </tbody>
33
+ </table>
34
+ <footer>
35
+ <p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
36
+ </footer>
37
+ </main>
38
+ </body>
39
+ </html>
@@ -0,0 +1,71 @@
1
+ /*
2
+ cpA11yMessage.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.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
+ };
@@ -27,18 +27,18 @@
27
27
  </div>
28
28
  </header>
29
29
  <h2>Introduction</h2>
30
- <p>This is a report on transactional <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a>. Suppose a person is visiting a website and wants to engage in some transaction with it. Is the transaction easy, predictable, and safe? If so, the website is <dfn>transactionally accessible</dfn>. Some disabilities make it difficult to discover how to do things on a website. Everybody, but especially any person with such a disability, benefits from transactions being designed to conform to the most common and standard conventions.</p>
31
- <p>This report deals with an issue-reporting transaction. Specifically, the transaction begins when a person notices an accessibility issue on a page or view of a website or web application and wants to report that issue to whoever is responsible for the website. The simple, standard, and thus predictable transaction is assumed to look like this:</p>
30
+ <p>This is a report on transactional <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a>. Suppose a person is visiting a website and wants to engage in some transaction with it. Is the transaction easy, predictable, and safe? If so, the website is <dfn>transactionally accessible</dfn>. To achieve transactional accessibility, websites can design transactions that conform to the most common and standard conventions. Then users will correctly guess what to do at each step. Users with some disabilities will especially benefit from being able to use existing knowledge and tools, without the need to discover how to do things on a website.</p>
31
+ <p>This transaction involves learning how to report a web-page issue. The transaction begins when a person opens a web page and notices an accessibility issue on the page. The user wants to report that issue to whoever is responsible for the website. The test assumes that there is a standard transaction structure in such a situation:</p>
32
32
  <ol>
33
- <li>The person finds an accessibility link on the page.</li>
34
- <li>The person clicks that link.</li>
35
- <li>That link takes the person to an accessibility page.</li>
33
+ <li>The user finds an accessibility link on the page.</li>
34
+ <li>The user clicks that link.</li>
35
+ <li>That link takes the user to an accessibility page.</li>
36
36
  <li>On the accessibility page, there is a link for sending an email message about accessibility, and there is another link for making a telephone call about accessibility.</li>
37
37
  </ol>
38
- <p>Thus, instead of the person needing to figure out how this particular website accepts issue reports, the person is assumed already to know how websites normally accept issue reports. So, instead of exploring the site to find its method, the person uses the standard method.</p>
38
+ <p>Thus, instead of the user needing to figure out how this particular website accepts accessibility issue reports, the user is assumed already to know how websites normally accept such reports. So, instead of exploring the site to find its method, the person uses the standard method.</p>
39
39
  <h2>Procedures</h2>
40
40
  <p>The <a href="https://www.npmjs.com/package/testaro">Testaro</a> application used its <code>tpA11yMessage</code> testing procedure to evaluate the accessibility of this transaction on the __org__ web page at <a href="__url__">__url__</a> on __dateSlash__. Testaro produced a report.</p>
41
- <p>The <a href="https://www.npmjs.com/package/testilo">Testilo</a> application processed the report and used the <code>spA11yMessage</code> scoring procedure to compute a score for the transaction. The total score is __totalScore__ (where 0 is the worst and 16 is the best possible score). The scored report is appended below.</p>
41
+ <p>The <a href="https://www.npmjs.com/package/testilo">Testilo</a> application processed the report and used the <code>spA11yMessage</code> scoring procedure to compute a score for the transaction. The total score is __totalScore__ (where 0 is the worst and 23 is the best possible score). The scored report is appended below.</p>
42
42
  <p>Finally, Testilo used procedure <code>dpA11yMessage</code> to produce this digest, briefly explaining how <code>spA11yMessage</code> computed the scores.</p>
43
43
  <h2>Score summary</h2>
44
44
  <table class="allBorder secondCellRight">
@@ -47,17 +47,28 @@
47
47
  __scoreRows__
48
48
  </tbody>
49
49
  </table>
50
- <h2>Discussion</h2>
50
+ <h2>Explanation</h2>
51
51
  <p>The components of the total score are:</p>
52
52
  <ul>
53
- <li><code>page</code>: Can the page be visited?</li>
54
- <li><code>a11yLink</code>: Does the page have a functioning <q>accessibility</q> link?</li>
55
- <li><code>title</code>: Is the page to which the link goes titled to show it is about accessibility?</li>
56
- <li><code>heading</code>: Does that page (the accessibility page) have a top heading indicating the page is about accessibility?</li>
57
- <li><code>mailLink</code>: Does the accessibility page have a link to send email about accessibility?.</li>
58
- <li><code>telLink</code>: Does the accessibility page have a link to make a telephone call about accessibility?</li>
53
+ <li><code>pageLoad</code>: 2 points if it was possible to visit the page</li>
54
+ <li><code>pageFast</code>: 2 points if the page loaded within 4 seconds, or 1 point if it loaded within 6 seconds</li>
55
+ <li><code>a11yLink</code>: 1 point if the page contained a link whose name included <q>accessibility</q></li>
56
+ <li><code>a11yLinkWork</code>: 2 points if clicking the link produced a new page</li>
57
+ <li><code>a11yLinkFast</code>: 2 points if the new page loaded within 3 seconds, or 1 point if it loaded within 5 seconds</li>
58
+ <li><code>a11yPageTitle</code>: 1 point if the new page had a title</li>
59
+ <li><code>a11yTitleGood</code>: 2 points if the title included <q>accessibility</q></li>
60
+ <li><code>a11yPageH1</code>: 1 point if the new page had 1 level-1 heading</li>
61
+ <li><code>a11yH1Good</code>: 2 points if that heading included <q>accessibility</q></li>
62
+ <li><code>mailLink</code>: 2 points if the new page contained any email (<code>mailto:</code>) link</li>
63
+ <li><code>mailLinkName</code>: 2 points if the name of an email link included <q>accessibility</q>, or 1 point if the context of an email link (i.e. the text content of its parent element) included <q>accessibility</q></li>
64
+ <li><code>telLink</code>: 2 points if the new page contained any telephone (<code>tel:</code>) link</li>
65
+ <li><code>telLinkName</code>: 2 points if the name of a telephone link included <q>accessibility</q>, or 1 point if the context of a telephone link included <q>accessibility</q></li>
59
66
  </ul>
60
67
  <p>The precise rules of <code>spA11yMessage</code> are found in the <a href="https://github.com/jrpool/testilo/blob/main/procs/score/spA11yMessage.js">code itself</a>.</p>
68
+ <h2>Suggestions</h2>
69
+ <ul>
70
+ __suggestions__
71
+ </ul>
61
72
  <h2>Report</h2>
62
73
  <pre>__report__</pre>
63
74
  <footer>
@@ -52,4 +52,89 @@ exports.makeQuery = (report, query) => {
52
52
  });
53
53
  query.totalScore = score.total;
54
54
  query.scoreRows = scoreRows.join(innerJoiner);
55
+ // Add suggestions to the query.
56
+ const suggestions = [];
57
+ if (score.pageLoad === 0) {
58
+ suggestions.push(['pageLoad', 'Make it possible to visit the page.']);
59
+ }
60
+ else {
61
+ if (score.pageFast < 2) {
62
+ suggestions.push(['pageFast', 'Make the page load faster.']);
63
+ }
64
+ if (score.a11yLink === 0) {
65
+ suggestions.push(['a11yLink', 'Add a link named Accessibility to the page.']);
66
+ }
67
+ else {
68
+ if (score.a11yLinkWork === 0) {
69
+ suggestions.push(['a11yLinkWork', 'Make the Accessibility link open a new page.']);
70
+ }
71
+ else {
72
+ if (score.a11yLinkFast < 2) {
73
+ suggestions.push(
74
+ ['a11yLinkFast', 'Make the page opened by the Accessibility link load faster.']
75
+ );
76
+ }
77
+ if (score.a11yPageTitle === 0) {
78
+ suggestions.push(['a11yPageTitle', 'Give the accessibility page a title.']);
79
+ }
80
+ else if (score.a11yTitleGood === 0) {
81
+ suggestions.push(
82
+ ['a11yTitleGood', 'Include accessibility in the title of the accessibility page.']
83
+ )
84
+ }
85
+ if (score.a11yPageH1 === 0) {
86
+ suggestions.push(['a11yPageH1', 'Give the accessibility page a single h1 heading.']);
87
+ }
88
+ else if (score.a11yH1Good === 0) {
89
+ suggestions.push(
90
+ [
91
+ 'a11yH1Good',
92
+ 'Include accessibility in the text of the h1 heading of the accessibility page.'
93
+ ]
94
+ );
95
+ }
96
+ if (score.mailLink === 0) {
97
+ suggestions.push(['mailLink', 'Add an email (mailto:) link to the accessibility page.']);
98
+ }
99
+ else if (score.mailLinkName === 1) {
100
+ suggestions.push(
101
+ [
102
+ 'mailLinkName',
103
+ 'Include accessibility not only around, but within, an email link on the accessibility page.'
104
+ ]
105
+ );
106
+ }
107
+ else if (score.mailLinkName === 0) {
108
+ suggestions.push(
109
+ [
110
+ 'mailLinkName',
111
+ 'Include accessibility in the name of an email link on the accessibility page.'
112
+ ]
113
+ );
114
+ }
115
+ if (score.telLink === 0) {
116
+ suggestions.push(['telLink', 'Add a telephone (tel:) link to the accessibility page.']);
117
+ }
118
+ else if (score.telLinkName === 1) {
119
+ suggestions.push(
120
+ [
121
+ 'telLinkName',
122
+ 'Include accessibility not only around, but within, a telephone link on the accessibility page.'
123
+ ]
124
+ );
125
+ }
126
+ else if (score.telLinkName === 0) {
127
+ suggestions.push(
128
+ [
129
+ 'telLinkName',
130
+ 'Include accessibility in the name of a telephone link on the accessibility page.'
131
+ ]
132
+ );
133
+ }
134
+ }
135
+ }
136
+ }
137
+ query.suggestions = suggestions
138
+ .map(pair => `<li><code>${pair[0]}</code>: ${pair[1]}</li>`)
139
+ .join(innerJoiner);
55
140
  };
@@ -9,7 +9,7 @@
9
9
 
10
10
  This proc computes a score that is intended to represent how accessibly a web page offers
11
11
  a user an opportunity to report an accessibility issue about that page. Scores can range
12
- from 0 to 16.
12
+ from perfect 0 to 16.
13
13
  */
14
14
 
15
15
  // CONSTANTS
@@ -20,79 +20,101 @@ const scoreProcID = 'a11ymessage';
20
20
  // FUNCTIONS
21
21
 
22
22
  // Scores the contact links of a type.
23
- const contactScorer = (result, score, type) => {
23
+ const contactScorer = (result, score, linkProp, linkNameProp) => {
24
+ score[linkProp] = 2;
25
+ // If any of the links is named for accessibility:
24
26
  const links = result.items;
25
- score[type] += 1;
26
- if (
27
- links.some(
28
- link => link.textContent.toLowerCase().includes('accessibility')
29
- )
30
- ) {
31
- score[type] += 2;
27
+ if (links.some(
28
+ link => link.textContent.toLowerCase().includes('accessibility')
29
+ )) {
30
+ score[linkNameProp] = 2;
32
31
  }
33
- else if (
34
- links.some(
35
- link => link.parentTextContent.toLowerCase().includes('accessibility')
36
- )
37
- ) {
38
- score[type] += 1;
32
+ // Otherwise, if the link context refers to accessibility:
33
+ else if (links.some(
34
+ link => link.parentTextContent.toLowerCase().includes('accessibility')
35
+ )) {
36
+ score[linkNameProp] = 1;
39
37
  }
40
38
  };
41
39
  // Scores a report.
42
40
  exports.scorer = async report => {
43
41
  const {acts} = report;
42
+ report.scoreProcID = scoreProcID;
44
43
  report.score = {
45
- page: 0,
44
+ pageLoad: 0,
45
+ pageFast: 0,
46
46
  a11yLink: 0,
47
- title: 0,
48
- heading: 0,
47
+ a11yLinkWork: 0,
48
+ a11yLinkFast: 0,
49
+ a11yPageTitle: 0,
50
+ a11yTitleGood: 0,
51
+ a11yPageH1: 0,
52
+ a11yH1Good: 0,
49
53
  mailLink: 0,
54
+ mailLinkName: 0,
50
55
  telLink: 0,
51
- total: 0
56
+ telLinkName: 0
52
57
  };
53
58
  const {score} = report;
54
59
  if (Array.isArray(acts)) {
55
- // Act 1: page loads.
60
+ // Act 1: If the page loaded:
56
61
  if (acts[1].result.startsWith('http')) {
57
- score.page = 2;
58
- // Act 2: accessibility link exists and loads promptly.
59
- if (acts[2].result.move === 'clicked') {
60
- score.a11yLink = 2;
61
- const loadScore = ['incomplete', 'loaded', 'idle'].indexOf(acts[2].result.loadState);
62
- if (loadScore > -1) {
63
- score.a11yLink += loadScore;
64
- }
65
- // Act 3: next page has an accessibility title.
66
- const act3Result = acts[3].result;
67
- if (act3Result && act3Result.toLowerCase().includes('accessibility')) {
68
- score.title = 2;
69
- // Act 4: page has exactly 1 h1 heading.
70
- const act4Result = acts[4].result;
71
- if (act4Result && act4Result.total === 1) {
72
- score.heading = 1;
73
- // Act 4: h1 is an accessibility heading.
74
- if (act4Result.items[0].textContent.toLowerCase().includes('accessibility')) {
75
- score.heading += 1;
62
+ score.pageLoad = 2;
63
+ // If it loaded moderately fast:
64
+ const loadTime = acts[1].endTime - acts[1].startTime;
65
+ if (loadTime < 6000) {
66
+ score.pageFast = 1;
67
+ }
68
+ // If it loaded fast:
69
+ if (loadTime < 4000) {
70
+ score.pageFast = 2;
71
+ }
72
+ // Act 2: If the page has an accessibility link:
73
+ const {result} = acts[2];
74
+ if (result.found) {
75
+ score.a11yLink = 1;
76
+ // If it works:
77
+ if (result.success) {
78
+ score.a11yLinkWork = 2;
79
+ // If the resulting page loads fast:
80
+ const loadTime = acts[2].endTime - acts[2].startTime;
81
+ if (loadTime < 5000) {
82
+ score.a11yLinkFast = 1;
83
+ }
84
+ if (loadTime < 3000) {
85
+ score.a11yLinkFast = 2;
86
+ }
87
+ // Act 3: If the resulting page has a title:
88
+ let {result} = acts[3];
89
+ if (result && result.success) {
90
+ score.a11yPageTitle = 1;
91
+ // If it is an accessibility title:
92
+ if (result.title.toLowerCase().includes('accessibility')) {
93
+ score.a11yTitleGood = 2;
76
94
  }
77
95
  }
78
- }
79
- // Act 5: page has accessibility email and telephone links.
80
- const act5Result = acts[5].result;
81
- if (act5Result.total) {
82
- contactScorer(act5Result, score, 'mailLink');
83
- }
84
- // Act 6: page has accessibility email and telephone links.
85
- const act6Result = acts[6].result;
86
- if (act6Result.total) {
87
- contactScorer(act6Result, score, 'telLink');
96
+ // Act 4: If the resulting page has a top heading:
97
+ result = acts[4].result;
98
+ if (result && result.total === 1) {
99
+ score.a11yPageH1 = 1;
100
+ // If it is an accessibility heading:
101
+ if (result.items[0].textContent.toLowerCase().includes('accessibility')) {
102
+ score.a11yH1Good = 2;
103
+ }
104
+ }
105
+ // Act 5: If the resulting page has an accessibility email link:
106
+ result = acts[5].result;
107
+ if (result.total) {
108
+ contactScorer(result, score, 'mailLink', 'mailLinkName');
109
+ }
110
+ // Act 6: If the resulting page has accessibility telephone link:
111
+ result = acts[6].result;
112
+ if (result.total) {
113
+ contactScorer(result, score, 'telLink', 'telLinkName');
114
+ }
88
115
  }
89
116
  }
90
117
  }
91
118
  }
92
- score.total = score.page
93
- + score.a11yLink
94
- + score.title
95
- + score.heading
96
- + score.mailLink
97
- + score.telLink;
119
+ score.total = Object.values(score).reduce((total, current) => total + current);
98
120
  };