├── .gitignore
├── CONTRIBUTING.md
├── Dockerfile
├── README.md
├── a11ym
├── a11ym-dashboard
├── a11ym-sniffers
├── a11ym.yml.example
├── lib
    ├── a11ym.js
    ├── crawler.js
    ├── logger.js
    └── tester.js
├── package.json
├── reporter
    └── html.js
├── resource
    ├── screenshots
    │   ├── dashboard.jpg
    │   ├── index.png
    │   └── report.png
    ├── sniffers.js
    ├── sniffers
    │   └── custom.example
    │   │   ├── ruleset.js
    │   │   └── sniffs
    │   │       └── A.js
    └── vnu
    │   ├── LICENSE
    │   ├── Makefile
    │   ├── README.md
    │   └── vnu.jar
└── view
    ├── common.css
    ├── dashboard
        └── index.html
    └── reports
        ├── index-report.html
        ├── index.html
        └── report.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /a11ym_output
3 | /resource/vnu/validator


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | This small document explains how to contribute to this project.
 4 | 
 5 | ## Boards
 6 | 
 7 | A kanban board is available to track tasks to do, ready to do, in progress or
 8 | done. Please, check https://waffle.io/liip/TheA11yMachine/.
 9 | 
10 | ## Tools
11 | 
12 | To hack this project, only [Git](http://git-scm.com/) and
13 | [NPM](https://npmjs.org/) are required. The latter comes with
14 | [Node.js](https://nodejs.org/) as a dependency manager. A browser may also be
15 | required, but this is not necessary.
16 | 
17 | ## Set up your environment
18 | 
19 | First, you need to clone the Git repository:
20 | 
21 | ```sh
22 | $ git clone git@github.com:liip/TheA11yMachine.git
23 | $ cd TheA11yMachine
24 | ```
25 | 
26 | From here, you must install the dependencies with NPM:
27 | 
28 | ```sh
29 | $ npm install
30 | ```
31 | 
32 | Now you're ready to develop.
33 | Please, commits your patches on another branch than `master`. This is easier for
34 | you to receive updates. For instance:
35 | 
36 | ```sh
37 | $ git checkout -b my_new_feature
38 | ```
39 | 
40 | ## Running tests
41 | 
42 | Unfortunately we have no test suites yet. This is a nice contribution!
43 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:5
 2 | 
 3 | ENV NPM_CONFIG_LOGLEVEL=warn \
 4 |     NPM_CONFIG_PROGRESS=false \
 5 |     NPM_CONFIG_SPIN=false
 6 | 
 7 | RUN npm install -g the-a11y-machine
 8 | 
 9 | ENTRYPOINT ["a11ym"]
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://liip.ch/"><img src="https://github.com/liip.png" alt="Liip" width="150px" /></a><br />
  3 |   <em>presents</em><br />
  4 |   The Accessibility Testing Machine
  5 | </p>
  6 | 
  7 | <hr />
  8 | 
  9 | # The A11y Machine
 10 | 
 11 | [![Version](https://img.shields.io/npm/v/the-a11y-machine.svg)](https://github.com/liip/TheA11yMachine)
 12 | [![Downloads](https://img.shields.io/npm/dt/the-a11y-machine.svg)](https://www.npmjs.com/package/the-a11y-machine)
 13 | [![License](https://img.shields.io/npm/l/the-a11y-machine.svg)](#authors-and-license)
 14 | 
 15 | > Note: TheA11yMachine is no longer maintained.
 16 | 
 17 | **The A11y Machine** (or `a11ym` for short, spelled “alym”) is an **automated
 18 | accessibility testing tool** which **crawls** and **tests** pages of any Web
 19 | application to produce detailed reports. It validates pages against the
 20 | following specifications/laws:
 21 | 
 22 |   * [W3C Web Content Accessibility Guidelines](http://www.w3.org/TR/WCAG20/)
 23 |     (WCAG) 2.0, including A, AA and AAA levels ([understanding levels of
 24 |     conformance](http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-levels-head)),
 25 |   * U.S. [Section 508](http://www.section508.gov/) legislation,
 26 |   * [W3C HTML5 Recommendation](https://www.w3.org/TR/html/).
 27 | 
 28 | ## Table of contents
 29 | 
 30 | * [Why?](#why)
 31 | * [Installation](#installation)
 32 | * [Usage](#usage)
 33 |   * [List of URLs instead of crawling](#list-of-urls-instead-of-crawling)
 34 |   * [Possible output](#possible-output)
 35 |   * [How does it work?](#how-does-it-work)
 36 |   * [Write your custom rules](#write-your-custom-rules)
 37 |   * [Watch the dashboard](#watch-the-dashboard)
 38 | * [Roadmap and board](#roadmap-and-board)
 39 | * [Authors and license](#authors-and-license)
 40 | 
 41 | ## Why?
 42 | 
 43 | If **privacy** matters for you, you're likely to install The A11y Machine over
 44 | any SaaS services: It runs locally so you don't need to send your code
 45 | somewhere, you can test all parts of your application including the ones which
 46 | require an authentification (like a checkout, a back-office etc.)…
 47 | 
 48 | Here are some pros and cons compared to SaaS solutions:
 49 | 
 50 | Properties | The A11y Machine | SaaS services
 51 | -----------|------------------|---------------
 52 | Can run locally              | yes | no
 53 | Can test each patch          | yes | no (except if deployed)
 54 | Reduce the test loop         | yes | no (the loop is longer)
 55 | Can test private code        | yes | no (you must send your code)
 56 | Can test auth-required parts | yes | no
 57 | Can crawl all your pages     | yes | yes (but it can be pricey)
 58 | 
 59 | Accessibility is not only a concern for disabled people. Bots can be considered
 60 | as such, like [DuckDuckGo](https://duckduckgo.com),
 61 | [Google](https://google.com/) or [Bing](https://bing.com/). By respecting these
 62 | standards, you're likely to have a better ranking. Also it helps to clean your
 63 | code. Accessibility issues are often left unaddressed for budget reasons. In
 64 | fact most of the cost is spent looking for errors on your website. The A11y
 65 | Machine greatly help with this task, you can thus focus on fixing your code and
 66 | reap the benefits.
 67 | 
 68 | ## Installation
 69 | 
 70 | [NPM](http://npmjs.org/) is required. Then, execute the following lines:
 71 | 
 72 | ```sh
 73 | $ npm install -g the-a11y-machine
 74 | ```
 75 | 
 76 | If you would like to validate your pages against the HTML5 recommendation, then
 77 | you need to [install Java](https://www.java.com/en/download/).
 78 | 
 79 | As an alternative you can run a Docker image instead, which will ensure the image
 80 | is available locally:
 81 | 
 82 | ```sh
 83 | $ docker build -t liip/the-a11y-machine .
 84 | $ docker run liip/the-a11y-machine --help
 85 | ```
 86 | 
 87 | To get access to a report you will need to:
 88 | 
 89 |   * Mount a path into the container,
 90 |   * Specifify that internal path in your `a11ym` CLI options.
 91 | 
 92 | For example:
 93 | 
 94 | ```sh
 95 | $ docker run -v $PWD:/var/output liip/the-a11y-machine -o /var/output http://example.org
 96 | ```
 97 | 
 98 | ## Usage
 99 | 
100 | As a prelude, see the help:
101 | 
102 | ```sh
103 |   Usage: a11ym [options] url …
104 | 
105 |   Options:
106 | 
107 |     -h, --help                                 output usage information
108 |     -b, --bootstrap <path>                     Bootstrap file, i.e. the configuration file. All CLI options will overwrite options defined in the configuration file.
109 |     -e, --error-level <error_level>            Minimum error level: In ascending order, `notice` (default), `warning`, and `error` (e.g. `warning` includes all warnings and errors).
110 |     -c, --filter-by-codes <codes>              Filter results by comma-separated WCAG codes (e.g. `H25,H91,G18`).
111 |     -C, --exclude-by-codes <codes>             Exclude results by comma-separated WCAG codes (e.g. `H25,H91,G18`).
112 |     -d, --maximum-depth <depth>                Explore up to a maximum depth (hops).
113 |     -m, --maximum-urls <maximum_urls>          Maximum number of URLs to compute.
114 |     -o, --output-directory <output_directory>  Output directory.
115 |     -r, --report <report>                      Report format: `cli`, `csv`, `html` (default), `json` or `markdown`.
116 |     -s, --standards <standards>                Standard to use: `WCAG2A`, `WCAG2AA` (default), ` WCAG2AAA`, `Section508`, `HTML` or your own (see `--sniffers`). `HTML` can be combined with any other by a comma.
117 |     -S, --sniffers <sniffers>                  Path to the sniffers file, e.g. `resource/sniffers.js` (default).
118 |     -u, --filter-by-urls <urls>                Filter URL to test by using a regular expression without delimiters (e.g. 'news|contact').
119 |     -U, --exclude-by-urls <urls>               Exclude URL to test by using a regular expression without delimiters (e.g. 'news|contact').
120 |     -w, --workers <workers>                    Number of workers, i.e. number of URLs computed in parallel.
121 |     --http-auth-user <http_auth_user>          Username to authenticate all HTTP requests.
122 |     --http-auth-password <http_auth_password>  Password to authenticate all HTTP requests.
123 |     --http-tls-disable                         Disable TLS/SSL when crawling or downloading pages.
124 |     -V, --no-verbose                           Make the program silent.
125 |     --ignore-robots-txt                        Ignore robots.txt file.
126 | 
127 | ```
128 | 
129 | Thus, the simplest use is to run `a11ym` with a URL:
130 | 
131 | ```sh
132 | $ ./a11ym http://example.org/
133 | ```
134 | 
135 | All URLs accessible from `http://example.org/` will be tested against the
136 | WCAG2AA standard. See the `--maximum-urls` options to reduce the number of
137 | URLs to test.
138 | 
139 | Then open `a11ym_output/index.html` and browser the result!
140 | 
141 | ### List of URLs instead of crawling
142 | 
143 | You can compute several URLs by adding them to the command-line, like this:
144 | 
145 | ```sh
146 | $ ./a11ym http://example.org/A http://example.org/B http://example.org/C
147 | ```
148 | 
149 | Alternatively, this is possible to read URLs from STDIN, as follows:
150 | 
151 | ```sh
152 | $ cat URLs.lists | ./a11ym -
153 | ```
154 | 
155 | Note the `-`: It means “Read URLs from STDIN please”.
156 | 
157 | When reading several URLs, the `--maximum-depth` option will be forced to 1.
158 | 
159 | ### Possible output
160 | 
161 | The index of the reports:
162 | 
163 | ![Index of the report](resource/screenshots/index.png)
164 | 
165 | Report of a specific URL:
166 | 
167 | ![Report of a specific URL](resource/screenshots/report.png)
168 | 
169 | The dashboard of all reports:
170 | 
171 | ![Dashboard of all reports](resource/screenshots/dashboard.jpg)
172 | 
173 | ### Selecting standards
174 | 
175 | As mentionned, the following standards are supported:
176 |   * W3C WCAG,
177 |   * U.S. Section 508 legislation,
178 |   * W3C HTML5 recommendation.
179 | 
180 | You cannot combine standards between each other, except HTML5 that can be
181 | combined with any other. So for instance, to run `WCAG2AAA`:
182 | 
183 | ```sh
184 | $ ./a11ym --standards WCAG2AAA http://example.org/
185 | ```
186 | 
187 | To run `WCAG2AA` along with `HTML`:
188 | 
189 | ```sh
190 | $ ./a11ym --standards WCAG2AA,HTML http://example.org/
191 | ```
192 | 
193 | ### How does it work?
194 | 
195 | The pipe looks like this:
196 | 
197 |   1. The [`node-simplecrawler`](https://github.com/cgiffard/node-simplecrawler/)
198 |      tool is used to crawl a Web application based on the given URLs, with **our
199 |      own specific exploration algorithm** to provide better results quickly, in
200 |      addition to support **parallelism**,
201 |   2. For each URL found, 2 kind of tests are applied:
202 |       1. **Accessibility**: [PhantomJS](http://phantomjs.org/) runs and
203 |          [`HTML_CodeSniffer`](https://github.com/squizlabs/HTML_CodeSniffer) is
204 |          injected in order to check the page conformance; This step is
205 |          semi-automated by the help of
206 |          [`pa11y`](https://github.com/nature/pa11y), which is a very thin layer
207 |          of code wrapping PhantomJS and `HTML_CodeSniffer`,
208 |       2. **HTML**: [The Nu Html Checker](http://validator.github.io/validator/)
209 |          (v.Nu) is run on the same URL.
210 |   3. Finally, results from different tools are normalized, and enhanced and easy
211 |      to use reports are produced.
212 | 
213 | PhantomJS and `HTML_CodeSniffer` are widely-used, tested and precise tools.
214 | `pa11y` simplifies the use of these two latters. The Nu Html Checker is the tool
215 | used by the W3C to validate documents online. However, in this case, we **do all
216 | validations offline**! Nothing is sent over the network. Again, privacy.
217 | 
218 | ### Write your custom rules
219 | 
220 | `HTML_CodeSniffer` is build in a way that allows you to extend existing rules or
221 | write your own. A rule is represented as a sniffer (this is another
222 | terminology). The `resource/sniffers/` directory contains an example of
223 | a custom sniffer.
224 | 
225 | The A11y Machine comes with a default file containing all the sniffers:
226 | `resource/sniffers.js`. You can provide your own by using the `--sniffers`
227 | option. To build your own sniffers, simply copy the `resource/sniffers/`
228 | somewhere as a basis, complete it, then compile it with the `a11ym-sniffers`
229 | utility:
230 | 
231 | ```sh
232 | $ ./a11ym-sniffers --directory my/sniffers/ --output-directory my_sniffers.js
233 | ```
234 | 
235 | Then, to effectively use it:
236 | 
237 | ```sh
238 | $ ./a11ym --sniffers my_sniffers.js --standard MyStandard http://example.org/
239 | ```
240 | 
241 | ### Watch the dashboard
242 | 
243 | Run the `a11ym-dashboard` command to serve the dashboard. The dashboard is an
244 | overview of several reports generated by the `a11ym` command. The command can
245 | serves the dashboard over HTTP, or over static files. In addition to requiring
246 | a root directory, it requires: In the first case, an address, and a port, in the
247 | second, nothing more than just a flag. For instance, if the reports are
248 | generated with the following command:
249 | 
250 | ```sh
251 | $ ./a11ym --output-directory my_reports/`date +%s`/ http://example.org/A http://example.org/B
252 | ```
253 | 
254 | Then, the root directory is `my_reports/` and thus the dashboard will be started
255 | over HTTP with the following command:
256 | 
257 | ```sh
258 | $ ./a11ym-dashboard --root my_reports
259 | ```
260 | 
261 | Browse `127.0.0.1:8080` (by default) to see the dashboard!
262 | 
263 | Or to generate static files:
264 | 
265 | ```sh
266 | $ ./a11ym-dashboard --root my_reports --static-output
267 | ```
268 | 
269 | Open `my_reports/index.html`, and do the same!
270 | 
271 | Bonus: Use the `--open` option to automatically open the dashboard in your
272 | favorite browser.
273 | 
274 | ## Roadmap and board
275 | 
276 | The roadmap is public:
277 |   * See [the incoming
278 |     milestones](https://github.com/liip/TheA11yMachine/milestones),
279 |   * See [the in progress
280 |     issues](https://github.com/liip/TheA11yMachine/labels/in%20progress).
281 | 
282 | The board is publicly available at the following URL: https://waffle.io/liip/TheA11yMachine.
283 | 
284 | ## Authors and license
285 | 
286 | Original author is [Ivan Enderlin](http://mnt.io/), accompagnied by [Gilles
287 | Crettenand](https://github.com/krtek4) and [David
288 | Jeanmonod](https://github.com/jeanmonod). This software is backed by
289 | [Liip](https://liip.ch/).
290 | 
291 | [BSD-3-Clause](http://opensource.org/licenses/BSD-3-Clause):
292 | 
293 | > Copyright (c), Ivan Enderlin and Liip
294 | > All rights reserved.
295 | >
296 | > Redistribution and use in source and binary forms, with or without modification,
297 | > are permitted provided that the following conditions are met:
298 | >
299 | > 1. Redistributions of source code must retain the above copyright notice, this
300 | >    list of conditions and the following disclaimer.
301 | >
302 | > 2. Redistributions in binary form must reproduce the above copyright notice,
303 | >    this list of conditions and the following disclaimer in the documentation
304 | >    and/or other materials provided with the distribution.
305 | >
306 | > 3. Neither the name of the copyright holder nor the names of its contributors
307 | >    may be used to endorse or promote products derived from this software without
308 | >    specific prior written permission.
309 | >
310 | > THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
311 | > ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
312 | > WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
313 | > DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
314 | > ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
315 | > (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
316 | >  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
317 | > ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
318 | > (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
319 | > SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
320 | 


--------------------------------------------------------------------------------
/a11ym:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | 'use strict';
  4 | 
  5 | /**
  6 |  * Copyright (c) 2016, Ivan Enderlin and Liip
  7 |  * All rights reserved.
  8 |  *
  9 |  * Redistribution and use in source and binary forms, with or without modification,
 10 |  * are permitted provided that the following conditions are met:
 11 |  *
 12 |  * 1. Redistributions of source code must retain the above copyright notice, this
 13 |  *    list of conditions and the following disclaimer.
 14 |  *
 15 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 16 |  *    this list of conditions and the following disclaimer in the documentation
 17 |  *    and/or other materials provided with the distribution.
 18 |  *
 19 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 20 |  *    may be used to endorse or promote products derived from this software without
 21 |  *    specific prior written permission.
 22 |  *
 23 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 24 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 25 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 26 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 27 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 28 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 29 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 30 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 31 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 32 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 33 |  */
 34 | 
 35 | var a11ym   = require('./lib/a11ym');
 36 | var program = require('commander');
 37 | 
 38 | // Define all the options, with their description and default value.
 39 | program
 40 |     .usage('[options] url …')
 41 |     .option(
 42 |         '-b, --bootstrap <path>',
 43 |         'Bootstrap file, i.e. the configuration file. All CLI options will overwrite options defined in the configuration file.'
 44 |     )
 45 |     .option(
 46 |         '-e, --error-level <error_level>',
 47 |         'Minimum error level: In ascending order, `notice` (default), `warning`, and `error` (e.g. `warning` includes all warnings and errors).',
 48 |         /^notice|warning|error$/i
 49 |     )
 50 |     .option(
 51 |         '-c, --filter-by-codes <codes>',
 52 |         'Filter results by comma-separated WCAG codes (e.g. `H25,H91,G18`).'
 53 |     )
 54 |     .option(
 55 |         '-C, --exclude-by-codes <codes>',
 56 |         'Exclude results by comma-separated WCAG codes (e.g. `H25,H91,G18`).'
 57 |     )
 58 |     .option(
 59 |         '-d, --maximum-depth <depth>',
 60 |         'Explore up to a maximum depth (hops).',
 61 |         /^\d+$/
 62 |     )
 63 |     .option(
 64 |         '-m, --maximum-urls <maximum_urls>',
 65 |         'Maximum number of URLs to compute.',
 66 |         /^\d+$/
 67 |     )
 68 |     .option(
 69 |         '-o, --output-directory <output_directory>',
 70 |         'Output directory.'
 71 |     )
 72 |     .option(
 73 |         '-r, --report <report>',
 74 |         'Report format: `cli`, `csv`, `html` (default), `json` or `markdown`, or your own absolute path to a reporter.'
 75 |     )
 76 |     .option(
 77 |         '--report-options <options>',
 78 |         'Report options, as a JSON formatted object.'
 79 |     )
 80 |     .option(
 81 |         '-s, --standards <standards>',
 82 |         'Standard to use: `WCAG2A`, `WCAG2AA` (default), ` WCAG2AAA`, `Section508`, `HTML` or your own (see `--sniffers`). `HTML` can be combined with any other by a comma.'
 83 |     )
 84 |     .option(
 85 |         '-S, --sniffers <sniffers>',
 86 |         'Path to the sniffers file, e.g. `resource/sniffers.js` (default).'
 87 |     )
 88 |     .option(
 89 |         '-u, --filter-by-urls <urls>',
 90 |         'Filter URL to test by using a regular expression without delimiters (e.g. \'news|contact\').'
 91 |     )
 92 |     .option(
 93 |         '-U, --exclude-by-urls <urls>',
 94 |         'Exclude URL to test by using a regular expression without delimiters (e.g. \'news|contact\').'
 95 |     )
 96 |     .option(
 97 |         '-w, --workers <workers>',
 98 |         'Number of workers, i.e. number of URLs computed in parallel.',
 99 |         /^\d+$/i
100 |     )
101 |     .option(
102 |         '--http-auth-user <http_auth_user>',
103 |         'Username to authenticate all HTTP requests.'
104 |     )
105 |     .option(
106 |         '--http-auth-password <http_auth_password>',
107 |         'Password to authenticate all HTTP requests.'
108 |     )
109 |     .option(
110 |         '--http-tls-disable',
111 |         'Disable TLS/SSL when crawling or downloading pages.'
112 |     )
113 |     .option(
114 |         '-V, --no-verbose',
115 |         'Make the program silent.'
116 |     )
117 |     .option(
118 |         '--ignore-robots-txt',
119 |         'Ignore robots.txt file.'
120 |     )
121 |     .parse(process.argv);
122 | 
123 | if (false === a11ym.start(program.opts(), program.args)) {
124 |     program.help();
125 |     process.exit(1);
126 | }
127 | 


--------------------------------------------------------------------------------
/a11ym-dashboard:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | 'use strict';
  4 | 
  5 | /**
  6 |  * Copyright (c) 2016, Ivan Enderlin and Liip
  7 |  * All rights reserved.
  8 |  *
  9 |  * Redistribution and use in source and binary forms, with or without modification,
 10 |  * are permitted provided that the following conditions are met:
 11 |  *
 12 |  * 1. Redistributions of source code must retain the above copyright notice, this
 13 |  *    list of conditions and the following disclaimer.
 14 |  *
 15 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 16 |  *    this list of conditions and the following disclaimer in the documentation
 17 |  *    and/or other materials provided with the distribution.
 18 |  *
 19 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 20 |  *    may be used to endorse or promote products derived from this software without
 21 |  *    specific prior written permission.
 22 |  *
 23 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 24 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 25 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 26 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 27 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 28 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 29 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 30 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 31 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 32 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 33 |  */
 34 | 
 35 | var URL     = require('url');
 36 | var _       = require('underscore');
 37 | var fs      = require('fs');
 38 | var glob    = require('glob');
 39 | var http    = require('http');
 40 | var open    = require('open');
 41 | var path    = require('path');
 42 | var program = require('commander');
 43 | 
 44 | // Define all the options, with their description and default value.
 45 | program
 46 |     .usage('[options]')
 47 |     .option(
 48 |         '-r, --root <root>',
 49 |         'Path to the directory containing all the report directories.'
 50 |     )
 51 |     .option(
 52 |         '-a, --address <address>',
 53 |         'Start an HTTP server, and listen this address.',
 54 |         '127.0.0.1'
 55 |     )
 56 |     .option(
 57 |         '-p, --port <port>',
 58 |         'Port the HTTP server must listen to.',
 59 |         8080
 60 |     )
 61 |     .option(
 62 |         '-s, --static-output',
 63 |         'Generate static files instead of serving them over HTTP.'
 64 |     )
 65 |     .option(
 66 |         '-o, --open',
 67 |         'Directly open the dashboard in your favorite browser.'
 68 |     )
 69 |     .parse(process.argv);
 70 | 
 71 | // No address and port to compute? Then exit.
 72 | if (!program.root) {
 73 |     program.help();
 74 |     process.exit(2);
 75 | }
 76 | 
 77 | function computeIndex() {
 78 |     var render = _.template(
 79 |         fs.readFileSync(__dirname + '/view/dashboard/index.html', {encoding: 'utf-8'})
 80 |     );
 81 | 
 82 |     return render({
 83 |         css: {
 84 |             common: fs.readFileSync(__dirname + '/view/common.css', {encoding: 'utf-8'})
 85 |         },
 86 |         js: {
 87 |             allStatistics: JSON.stringify(computeAllStatistics())
 88 |         }
 89 |     });
 90 | }
 91 | 
 92 | function computeAllStatistics() {
 93 |     var stats = [];
 94 | 
 95 |     glob
 96 |         .sync(program.root + '/*/statistics.json')
 97 |         .forEach(
 98 |             function (file) {
 99 |                 stats.push(
100 |                     JSON
101 |                         .parse(fs.readFileSync(file, {encoding: 'utf-8'}))
102 |                         .reduce(
103 |                             function (previous, current) {
104 |                                 return {
105 |                                     reportId       : previous.reportId,
106 |                                     reportDirectory: previous.reportDirectory,
107 |                                     date           : previous.date || current.date,
108 |                                     errorCount     : previous.errorCount   + current.errorCount,
109 |                                     warningCount   : previous.warningCount + current.warningCount,
110 |                                     noticeCount    : previous.noticeCount  + current.noticeCount,
111 |                                 }
112 |                             },
113 |                             {
114 |                                 reportId       : path.basename(path.dirname(file)),
115 |                                 reportDirectory: path.basename(path.dirname(path.dirname(file))),
116 |                                 date           : null,
117 |                                 errorCount     : 0,
118 |                                 noticeCount    : 0,
119 |                                 warningCount   : 0
120 |                             }
121 |                         )
122 |                 );
123 |             }
124 |         );
125 | 
126 |     return stats;
127 | }
128 | 
129 | // Create an HTTP server.
130 | if (undefined === program.staticOutput) {
131 |     var server = http.createServer(
132 |         new function () {
133 |             var indexRegex  = /^\/$/;
134 |             var reportRegex = new RegExp('^\/([^/]+)/(.+)');
135 | 
136 |             return function (request, response) {
137 |                 var url     = URL.parse(request.url);
138 |                 var matches = null;
139 | 
140 |                 if (url.pathname.match(indexRegex)) {
141 |                     response.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
142 | 
143 |                     response.end(computeIndex());
144 |                 } else if (matches = url.pathname.match(reportRegex)) {
145 |                     var index = program.root + '/' + matches[1] + '/' + matches[2];
146 | 
147 |                     fs.access(
148 |                         index,
149 |                         fs.R_OK,
150 |                         function (error) {
151 |                             if (error) {
152 |                                 response.writeHead(404, {'Content-Type': 'text/plain'});
153 |                                 response.end('Report not found! Sorry.');
154 | 
155 |                                 return;
156 |                             }
157 | 
158 |                             response.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
159 |                             response.end(fs.readFileSync(index));
160 |                         }
161 |                     );
162 |                 } else {
163 |                     response.writeHead(404, {'Content-Type': 'text/plain'});
164 |                     response.end('URL not found! Sorry.');
165 |                 }
166 |             };
167 |         }
168 |     );
169 | 
170 |     // Listen!
171 |     server.listen(program.port, program.address);
172 | 
173 |     console.log('Server is listening on ' + program.address + ':' + program.port + '!');
174 | 
175 |     if (program.open) {
176 |         open('http://' + program.address + ':' + program.port);
177 |     }
178 | }
179 | // Generate static files.
180 | else {
181 |     var dashboardIndexPath = program.root + '/index.html';
182 |     var dashboardIndex     = fs.createWriteStream(
183 |         dashboardIndexPath,
184 |         {
185 |             flag           : 'w',
186 |             defaultEncoding: 'utf8'
187 |         }
188 |     );
189 |     dashboardIndex.write(computeIndex());
190 | 
191 |     console.log('Dashboard generated!');
192 | 
193 |     if (program.open) {
194 |         open(dashboardIndexPath);
195 |     }
196 | }
197 | 


--------------------------------------------------------------------------------
/a11ym-sniffers:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | 'use strict';
  4 | 
  5 | /**
  6 |  * Copyright (c) 2016, Ivan Enderlin and Liip
  7 |  * All rights reserved.
  8 |  *
  9 |  * Redistribution and use in source and binary forms, with or without modification,
 10 |  * are permitted provided that the following conditions are met:
 11 |  *
 12 |  * 1. Redistributions of source code must retain the above copyright notice, this
 13 |  *    list of conditions and the following disclaimer.
 14 |  *
 15 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 16 |  *    this list of conditions and the following disclaimer in the documentation
 17 |  *    and/or other materials provided with the distribution.
 18 |  *
 19 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 20 |  *    may be used to endorse or promote products derived from this software without
 21 |  *    specific prior written permission.
 22 |  *
 23 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 24 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 25 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 26 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 27 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 28 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 29 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 30 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 31 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 32 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 33 |  */
 34 | 
 35 | var fs      = require('fs');
 36 | var glob    = require('glob');
 37 | var path    = require('path');
 38 | var program = require('commander');
 39 | 
 40 | program
 41 |     .usage('[options]')
 42 |     .option(
 43 |         '-d, --directory <directory>',
 44 |         'Directory where sniffer files are located.'
 45 |     )
 46 |     .option(
 47 |         '-o, --output <output>',
 48 |         'Filename where to write the compiled sniffers.',
 49 |         __dirname + '/resource/sniffers.js'
 50 |     )
 51 |     .parse(process.argv);
 52 | 
 53 | if (!program.directory) {
 54 |     program.help();
 55 |     process.exit(1);
 56 | }
 57 | 
 58 | var output = fs.createWriteStream(
 59 |     program.output,
 60 |     {
 61 |         flag: 'a',
 62 |         defaultEncoding: 'utf8'
 63 |     }
 64 | );
 65 | 
 66 | var appendToOutput = function (file) {
 67 |     process.stdout.write(file + "\n");
 68 |     fs.writeFileSync(
 69 |         program.output,
 70 |         fs.readFileSync(file, {encoding: 'utf-8'}),
 71 |         {
 72 |             flag    : 'a',
 73 |             encoding: 'utf8'
 74 |         }
 75 |     );
 76 | };
 77 | 
 78 | function findNodeModules() {
 79 |     var out = __dirname;
 80 | 
 81 |     while (false === fs.existsSync(out + '/node_modules')) {
 82 |         out = path.dirname(out);
 83 | 
 84 |         if ('/' === out) {
 85 |             return null;
 86 |         }
 87 |     }
 88 | 
 89 |     return out + '/node_modules';
 90 | }
 91 | 
 92 | var nodeModulesPath = findNodeModules();
 93 | 
 94 | if (null !== nodeModulesPath) {
 95 |     glob.sync(nodeModulesPath + '/HTML_CodeSniffer/Standards/**/*.js').forEach(appendToOutput);
 96 |     glob.sync(nodeModulesPath + '/HTML_CodeSniffer/HTMLCS.js').forEach(appendToOutput);
 97 | }
 98 | 
 99 | glob.sync(program.directory + '/**/*.js').forEach(appendToOutput);
100 | 


--------------------------------------------------------------------------------
/a11ym.yml.example:
--------------------------------------------------------------------------------
 1 | # List of URLs to test.
 2 | urls:
 3 |   - https://www.liip.ch/en
 4 |   - https://www.liip.ch/en/who
 5 |   - https://www.liip.ch/en/what
 6 | 
 7 | # Minimum error level: In ascending order, `notice`, `warning`, and `error`.
 8 | errorLevel: notice
 9 | 
10 | # Filter results by comma-separated WCAG codes.
11 | filterByCodes: H25,H91,G18
12 | 
13 | # Exclude results by comma-separated WCAG codes.
14 | excludeByCodes: H25,H91,G18
15 | 
16 | # Explore up to a maximum depth (hops).
17 | maximumDepth: 3
18 | 
19 | # Maximum number of URLs to compute.
20 | maximumUrls: 128
21 | 
22 | # Output directory.
23 | outputDirectory: ./a11ym_output
24 | 
25 | # Report format: `cli`, `csv`, `html`, `json`, or `markdown`.
26 | report: html
27 | 
28 | # Report options.
29 | reportOptions:
30 |   - foo: bar
31 | 
32 | # Standard to use: `WCAG2A`, `WCAG2AA`, `WCAG2AAA`, `Section508`, `HTML` or your own. `HTML` can be combined with any other by a comma.
33 | standards: WCAG2AA
34 | 
35 | # Path to the sniffer file.
36 | sniffers: /resource/sniffers.js
37 | 
38 | # Filter URL to test by using a regular expression without delimiters.
39 | filterByUrls: news|contact
40 | 
41 | # Exclude URL to test by using a regular expression without delimiters.
42 | excludeByUrls: news|contact
43 | 
44 | # Number of workers, i.e. number of URLs computed in parallel.
45 | workers: 4
46 | 
47 | # Username to authenticate all HTTP requests.
48 | httpAuthUser: gordon
49 | 
50 | # Password to authenticate all HTTP requests.
51 | httpAuthPassword: fr33m4n
52 | 
53 | # Disable TLS/SSL when crawling or downloading pages.
54 | httpTlsDisable: false
55 | 
56 | # Make the program verbose.
57 | verbose: true
58 | 


--------------------------------------------------------------------------------
/lib/a11ym.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * Copyright (c), Ivan Enderlin and Liip
  5 |  * All rights reserved.
  6 |  *
  7 |  * Redistribution and use in source and binary forms, with or without modification,
  8 |  * are permitted provided that the following conditions are met:
  9 |  *
 10 |  * 1. Redistributions of source code must retain the above copyright notice, this
 11 |  *    list of conditions and the following disclaimer.
 12 |  *
 13 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 14 |  *    this list of conditions and the following disclaimer in the documentation
 15 |  *    and/or other materials provided with the distribution.
 16 |  *
 17 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 18 |  *    may be used to endorse or promote products derived from this software without
 19 |  *    specific prior written permission.
 20 |  *
 21 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 22 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 23 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 24 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 25 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 26 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 27 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 28 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 29 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 30 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 31 |  */
 32 | 
 33 | var Logger   = require('./logger');
 34 | var Tester   = require('./tester');
 35 | var async    = require('async');
 36 | var fs       = require('fs');
 37 | var merge    = require('merge');
 38 | var process  = require('process');
 39 | var readline = require('readline');
 40 | var yaml     = require('js-yaml');
 41 | 
 42 | // All options.
 43 | var defaultOptions = {
 44 |     bootstrap       : './a11ym.yml',
 45 |     errorLevel      : 'notice',
 46 |     filterByCodes   : undefined,
 47 |     excludeByCodes  : undefined,
 48 |     maximumDepth    : 3,
 49 |     maximumUrls     : 128,
 50 |     outputDirectory : './a11ym_output',
 51 |     report          : 'html',
 52 |     reportOptions   : {},
 53 |     standards       : 'WCAG2AA',
 54 |     sniffers        : __dirname + '/../resource/sniffers.js',
 55 |     filterByUrls    : undefined,
 56 |     excludeByUrls   : undefined,
 57 |     workers         : 4,
 58 |     httpAuthUser    : undefined,
 59 |     httpAuthPassword: undefined,
 60 |     httpTlsDisable  : undefined,
 61 |     verbose         : true,
 62 |     ignoreRobotsTxt : false
 63 | };
 64 | 
 65 | // Set the logger.
 66 | var logger = new Logger();
 67 | 
 68 | // Maximum number of URL to compute.
 69 | var maximumUrls = 0;
 70 | 
 71 | // When an error occurs, update this flag. It will change the exit code of the
 72 | // process.
 73 | var hasErrors = false;
 74 | 
 75 | // The test queue.
 76 | // Queue of URL waiting to be tested. This queue has a user-defined concurrency
 77 | // level. When a test is executed, it calls the “complete” callback on the
 78 | // task. When the maximum number of URL is reached, then we kill this queue.
 79 | var testQueue = null;
 80 | 
 81 | // When the test queue has been stopped once, update this flag. It avoids to do
 82 | // the “stop computation” more than once.
 83 | var isStopped = false;
 84 | 
 85 | // The crawler instance.
 86 | var crawler = undefined;
 87 | 
 88 | // Force to quit the program. If errors, exit with a non 0 exit code.
 89 | function quit() {
 90 |     if (true === hasErrors) {
 91 |         logger.write(loggers.colorize.red('Quiting with errors…'));
 92 |         process.exit(2);
 93 |     } else {
 94 |         logger.write(logger.colorize.green('Quitting with success…'));
 95 |         process.exit(0);
 96 |     }
 97 | }
 98 | 
 99 | // Kill the test queue and stop the crawler.
100 | function killQueue(reason) {
101 |     if (false !== isStopped) {
102 |         return;
103 |     }
104 | 
105 |     isStopped = true;
106 |     logger.write(logger.colorize.white.bgRed('Test queue is stopping. ' + reason) + '\n');
107 | 
108 |     if(undefined !== crawler) {
109 |         crawler.stop();
110 |     }
111 | 
112 |     testQueue.kill();
113 |     logger.write(logger.colorize.white.bgRed(testQueue.running() + ' tests are still running, waiting…') + '\n');
114 | }
115 | 
116 | // The tester instance.
117 | var tester = null;
118 | 
119 | process.on(
120 |     'SIGINT',
121 |     new function () {
122 |         var firstSignal = true;
123 | 
124 |         return function () {
125 |             killQueue('SIGINT');
126 | 
127 |             if (false === firstSignal) {
128 |                 logger.write(logger.colorize.white.bgRed('OK OK, I do it!') + '\n');
129 | 
130 |                 process.exit(255);
131 |             }
132 | 
133 |             firstSignal = false;
134 |         }
135 |     }
136 | );
137 | 
138 | module.exports = {
139 |     defaultOptions: defaultOptions,
140 |     start         : function (options, inputs) {
141 |         inputs = inputs || [];
142 | 
143 |         if (options.reportOptions &&
144 |             typeof options.reportOptions === 'string') {
145 |             options.reportOptions = JSON.parse(options.reportOptions);
146 | 
147 |             if (typeof options.reportOptions !== 'object') {
148 |                 throw "Report options must be a JSON formatted object. Got:" + options.reportOptions + ".";
149 |             }
150 |         }
151 | 
152 |         var optionsFromConfigurationFile = {};
153 |         var configurationFile            = options.bootstrap;
154 |         var defaultConfigurationFileUsed = false;
155 | 
156 |         if (undefined === configurationFile) {
157 |             configurationFile            = defaultOptions.bootstrap;
158 |             defaultConfigurationFileUsed = true;
159 |         }
160 | 
161 |         if (false === defaultConfigurationFileUsed ||
162 |             true  === fs.existsSync(configurationFile)) {
163 |             try {
164 |                 optionsFromConfigurationFile = yaml.safeLoad(
165 |                     fs.readFileSync(
166 |                         configurationFile,
167 |                         'utf8'
168 |                     )
169 |                 );
170 |             } catch (e) {
171 |                 var _logger = new Logger({verbose: true});
172 |                 _logger.write(
173 |                     _logger.colorize.white.bgRed('Error while reading the bootstrap file ' + configurationFile + '.') + '\n'
174 |                 );
175 |                 console.log(e.message);
176 | 
177 |                 process.exit(1);
178 |             }
179 | 
180 |             var urls = optionsFromConfigurationFile.urls;
181 | 
182 |             if (undefined !== urls) {
183 |                 if ('string' === typeof urls) {
184 |                     urls = [urls];
185 |                 }
186 | 
187 |                 if (0 === inputs.length) {
188 |                     inputs = urls;
189 |                 }
190 |             }
191 |         }
192 | 
193 |         var stagedOptions = merge(defaultOptions, optionsFromConfigurationFile);
194 | 
195 |         Object.keys(options).forEach(function (key) {
196 |             if (undefined !== options[key]) {
197 |                 stagedOptions[key] = options[key];
198 |             }
199 |         });
200 | 
201 |         options = stagedOptions;
202 | 
203 |         logger      = new Logger(options);
204 |         tester      = Tester(options);
205 |         maximumUrls = +options.maximumUrls;
206 | 
207 |         testQueue = async.queue(
208 |             function (url, onTaskComplete) {
209 |                 if (--maximumUrls < 0) {
210 |                     onTaskComplete();
211 |                     killQueue('Maximum URLs reached.');
212 | 
213 |                     return;
214 |                 }
215 | 
216 |                 var _wrap = function (callback) {
217 |                     return function () {
218 |                         callback();
219 | 
220 |                         if (0 === testQueue.running()) {
221 |                             quit();
222 |                         }
223 |                     };
224 |                 };
225 | 
226 |                 logger.write(
227 |                     logger.colorize.black.bgGreen(' ' + (options.maximumUrls - maximumUrls) + '/' + options.maximumUrls + ' ') +
228 |                     ' ' +
229 |                     logger.colorize.black.bgGreen('Run: ' + url + '.') +
230 |                     '\n'
231 |                 );
232 |                 tester(
233 |                     url,
234 |                     _wrap(
235 |                         function (results) {
236 |                             onTaskComplete(null, results);
237 |                         }
238 |                     ),
239 |                     _wrap(
240 |                         function (error) {
241 |                             hasErrors = true;
242 |                             onTaskComplete(error);
243 |                         }
244 |                     )
245 |                 );
246 |             },
247 |             +options.workers
248 |         );
249 | 
250 |         if (0 === inputs.length) {
251 |             return false;
252 |         } else if ((1 === inputs.length && '-' === inputs[0]) || 1 < inputs.length) {
253 |             maximumUrls = 0;
254 | 
255 |             var add = function (url) {
256 |                 options.maximumUrls = ++maximumUrls;
257 |                 testQueue.push(url);
258 |             };
259 | 
260 |             if('-' === inputs[0]) {
261 |                 readline
262 |                     .createInterface(process.stdin, undefined)
263 |                     .on('line', add);
264 |             } else {
265 |                 inputs.forEach(add);
266 |                 options.maximumUrls = maximumUrls;
267 |             }
268 |         } else if (1 === maximumUrls) {
269 |             testQueue.push(inputs[0]);
270 |         } else {
271 |             var Crawler = require('./crawler');
272 |             crawler     = new Crawler(options);
273 | 
274 |             crawler.add(inputs[0]);
275 |             crawler.start(testQueue);
276 |         }
277 |     }
278 | };
279 | 


--------------------------------------------------------------------------------
/lib/crawler.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * Copyright (c), Ivan Enderlin and Liip
  5 |  * All rights reserved.
  6 |  *
  7 |  * Redistribution and use in source and binary forms, with or without modification,
  8 |  * are permitted provided that the following conditions are met:
  9 |  *
 10 |  * 1. Redistributions of source code must retain the above copyright notice, this
 11 |  *    list of conditions and the following disclaimer.
 12 |  *
 13 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 14 |  *    this list of conditions and the following disclaimer in the documentation
 15 |  *    and/or other materials provided with the distribution.
 16 |  *
 17 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 18 |  *    may be used to endorse or promote products derived from this software without
 19 |  *    specific prior written permission.
 20 |  *
 21 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 22 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 23 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 24 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 25 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 26 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 27 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 28 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 29 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 30 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 31 |  */
 32 | 
 33 | var Crawler = require('simplecrawler');
 34 | var Logger  = require('./logger');
 35 | var URL     = require('url');
 36 | var async   = require('async');
 37 | var process = require('process');
 38 | 
 39 | // Set the logger.
 40 | var logger = null;
 41 | 
 42 | // History of all URL being crawled or already crawled.
 43 | var history = {};
 44 | 
 45 | function newCrawler(initialUrl) {
 46 |     // Set the crawler.
 47 |     var crawler = new Crawler(initialUrl);
 48 | 
 49 |     crawler.interval                 = 50;
 50 |     crawler.maxConcurrency           = 5;
 51 |     crawler.userAgent                = 'liip/a11ym';
 52 |     crawler.timeout                  = 10 * 1000;
 53 |     crawler.filterByDomain           = true;
 54 |     crawler.allowInitialDomainChange = false;
 55 |     crawler.scanSubdomains           = true;
 56 | 
 57 |     // Register our own `queueURL` so we can have buckets.
 58 |     crawler.oldQueueUrl = crawler.queueURL;
 59 |     crawler.queueURL    = function(url, queueItem) {
 60 |         var parsedUrl    = 'object' === typeof url ? url : parseURL(url);
 61 |         var urlQueueName = (parsedUrl.path.split('/', 2)[1] || '__root__');
 62 | 
 63 |         var newUrl =
 64 |             parsedUrl.protocol + '://' +
 65 |             parsedUrl.host +
 66 |             (
 67 |                 !(
 68 |                     ('https' === parsedUrl.protocol && 443 === parsedUrl.port) ||
 69 |                     ('http'  === parsedUrl.protocol &&  80 === parsedUrl.port)
 70 |                 )
 71 |                 ? (parsedUrl.port ? ':' + parsedUrl.port : '')
 72 |                 : ''
 73 |             ) +
 74 |             parsedUrl.path;
 75 | 
 76 |         if (true === history[newUrl]) {
 77 |             return;
 78 |         }
 79 | 
 80 |         history[newUrl] = true;
 81 | 
 82 |         if (true !== crawler.domainValid(parsedUrl.host)) {
 83 |             return;
 84 |         }
 85 | 
 86 |         // Create the URL “bucket”.
 87 |         if (undefined === urlQueues[urlQueueName]) {
 88 |             urlQueues[urlQueueName] = async.queue(
 89 |                 function (task, onTaskComplete) {
 90 |                     logger.write(
 91 |                         logger.colorize.white('Fetching ' + task.url + '.\n')
 92 |                     );
 93 |                     crawler.oldQueueUrl(task.url, task.queueItem);
 94 |                     onFetchCompleteCallbacks[task.url] = onTaskComplete;
 95 |                 }
 96 |             );
 97 |         }
 98 | 
 99 |         urlQueues[urlQueueName].push({
100 |             url       : newUrl,
101 |             queueItem : queueItem
102 |         });
103 |     };
104 | 
105 |     crawler
106 |         .on('fetch404', error404)
107 |         .on('fetcherror', error)
108 |         .on('fetchcomplete', fetchComplete)
109 |         .on('fetchredirect', fetchRedirect);
110 | 
111 |     return crawler;
112 | }
113 | 
114 | // Set the crawler.
115 | var crawler = null;
116 | 
117 | // Declare the test queue variable. It will be redefined in `start`.
118 | var testQueue = null;
119 | 
120 | // Those to will be redefined in `start` if need be.
121 | var filterByUrl  = function () { return false; };
122 | var excludeByUrl = function () { return false; };
123 | 
124 | // Each URL is dispatched in a specific bucket. So far, a bucket is defined as
125 | // the first part of the pathname. For instance let's consider the `/a/b/c` URL;
126 | // its bucket is `a`. Each bucket is actually a queue. They are all computed in
127 | // parallel. Each queue waits for the outgoing URL to be totally consumed by the
128 | // fetcher (see bellow) before fetching another one.
129 | var urlQueues                = {};
130 | var onFetchCompleteCallbacks = {};
131 | 
132 | // Skip URL by its content-type.
133 | function skipByContentType(queueItem) {
134 |     return !queueItem.stateData.contentType || null === queueItem.stateData.contentType.match(/^text\/html/);
135 | }
136 | 
137 | // Call the bucket callback for this URL so that the next URL
138 | // in the bucket is added to the crawler queue.
139 | function didFetch(url) {
140 |     if (undefined !== onFetchCompleteCallbacks[url]) {
141 |         onFetchCompleteCallbacks[url]();
142 |     }
143 | }
144 | 
145 | function error404(queueItem) {
146 |     process.stderr.write(queueItem.url + ' responds with a 404.\n');
147 |     didFetch(queueItem.url);
148 | }
149 | 
150 | function error(queueItem) {
151 |     process.stderr.write(
152 |         queueItem.url + ' failed to fetch ' +
153 |         '(status code: ' + queueItem.stateData.code + ')' +
154 |         '.\n'
155 |     );
156 |     didFetch(queueItem.url);
157 | }
158 | 
159 | // URL is fetched. Send it to the test queue if it passes filters, and then
160 | // fetch another one in the same bucket.
161 | function fetchComplete(queueItem) {
162 |     var log = function (message) {
163 |         logger.write(
164 |             logger.colorize.yellow('Fetch complete for ' + queueItem.url + message + '\n')
165 |         );
166 |     };
167 | 
168 |     if (false === crawler.running) {
169 |         log('; cancelled, has been stopped.');
170 | 
171 |         return;
172 |     } else if (true === skipByContentType(queueItem)) {
173 |         log('; skipped, not text/html.');
174 |     } else if (true === filterByUrl(queueItem.url)) {
175 |         log('; filtered.');
176 |     } else if (true === excludeByUrl(queueItem.url)) {
177 |         log('; excluded.');
178 |     } else {
179 |         log('.');
180 |         logger.write(logger.colorize.magenta('Waiting to run ' + queueItem.url + '.\n'));
181 |         testQueue.push(queueItem.url);
182 |     }
183 | 
184 |     didFetch(queueItem.url);
185 | }
186 | 
187 | function fetchRedirect(queueItem, redirectQueueItem) {
188 |     logger.write(
189 |         logger.colorize.yellow(
190 |             'Fetch complete for ' + queueItem.url +
191 |             ', and redirect to ' + redirectQueueItem.url + '.\n'
192 |         )
193 |     );
194 |     history[queueItem.url] = true;
195 |     didFetch(queueItem.url);
196 | }
197 | 
198 | // Parse a URL, canonize them and set default values.
199 | function parseURL(url) {
200 |     var parsed = URL.parse(url);
201 | 
202 |     if (!parsed.protocol) {
203 |         parsed.protocol = 'http';
204 |     } else {
205 |         // Remove the trailing colon in the protocol.
206 |         parsed.protocol = parsed.protocol.replace(':', '');
207 |     }
208 | 
209 |     if (!parsed.port) {
210 |         parsed.port = 'http' === parsed.protocol ? 80 : 443;
211 |     }
212 | 
213 |     return {
214 |         protocol: parsed.protocol,
215 |         host    : parsed.hostname,
216 |         port    : parsed.port,
217 |         path    : parsed.path,
218 |         uriPath : parsed.path,
219 |         depth   : 2
220 |     };
221 | }
222 | 
223 | // Helper to add a URL to the crawler queue.
224 | var addURL = new function () {
225 |     var firstUrl = true;
226 | 
227 |     return function (_url) {
228 |         var url = parseURL(_url);
229 | 
230 |         if (!url.host) {
231 |             process.stderr.write('URL ' + _url + ' is invalid. Ignore it.\n');
232 | 
233 |             return;
234 |         }
235 | 
236 |         logger.write(
237 |             logger.colorize.white('Initializing with ' + _url + '.\n')
238 |         );
239 | 
240 |         history[_url] = true;
241 | 
242 |         if (true === firstUrl) {
243 |             firstUrl = false;
244 |             crawler  = newCrawler(_url);
245 |         } else {
246 |             crawler.queue.add(
247 |                 crawler.processURL(_url),
248 |                 true,
249 |                 function () { }
250 |             );
251 |         }
252 |     }
253 | };
254 | 
255 | function start(options, queue) {
256 |     if (!crawler) {
257 |         throw "Crawler has not been initialized. Must add URL with `add` before starting the crawler.";
258 |     }
259 | 
260 |     crawler.maxDepth = +options.maximumDepth;
261 |     testQueue        = queue;
262 | 
263 |     if (true === options.httpTlsDisable) {
264 |         process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
265 |         crawler.ignoreInvalidSSL                 = true;
266 |     }
267 | 
268 |     if (options.httpAuthUser) {
269 |         crawler.needsAuth = true;
270 |         crawler.authUser  = options.httpAuthUser;
271 |         crawler.authPass  = options.httpAuthPassword;
272 |     }
273 | 
274 |     if (options.filterByUrls) {
275 |         var filterByUrlRegex = new RegExp(options.filterByUrls, 'i');
276 | 
277 |         filterByUrl = function(url) {
278 |             return false === filterByUrlRegex.test(url);
279 |         };
280 |     }
281 | 
282 |     if (options.excludeByUrls) {
283 |         var excludeByUrlRegex = new RegExp(options.excludeByUrls, 'i');
284 | 
285 |         excludeByUrl = function(url) {
286 |             return true === excludeByUrlRegex.test(url);
287 |         };
288 |     }
289 | 
290 |     if (options.ignoreRobotsTxt) {
291 |         crawler.respectRobotsTxt = false;
292 |     }
293 | 
294 |     crawler.start()
295 | }
296 | 
297 | function stop() {
298 |     crawler.stop(true);
299 | 
300 |     Object
301 |         .keys(urlQueues)
302 |         .forEach(
303 |             function (key) {
304 |                 urlQueues[key].kill();
305 |             }
306 |         );
307 | }
308 | 
309 | module.exports = function (options) {
310 |     logger = new Logger(options);
311 | 
312 |     this.add   = addURL;
313 |     this.start = start.bind(null, options);
314 |     this.stop  = stop;
315 | };
316 | 


--------------------------------------------------------------------------------
/lib/logger.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * Copyright (c), Ivan Enderlin and Liip
 5 |  * All rights reserved.
 6 |  *
 7 |  * Redistribution and use in source and binary forms, with or without modification,
 8 |  * are permitted provided that the following conditions are met:
 9 |  *
10 |  * 1. Redistributions of source code must retain the above copyright notice, this
11 |  *    list of conditions and the following disclaimer.
12 |  *
13 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
14 |  *    this list of conditions and the following disclaimer in the documentation
15 |  *    and/or other materials provided with the distribution.
16 |  *
17 |  * 3. Neither the name of the copyright holder nor the names of its contributors
18 |  *    may be used to endorse or promote products derived from this software without
19 |  *    specific prior written permission.
20 |  *
21 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
22 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
23 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
24 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
25 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
26 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
27 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
28 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
29 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
30 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
31 |  */
32 | 
33 | var chalk = require('chalk');
34 | 
35 | function Log(options) {
36 |     if (options && true === options.verbose) {
37 |         this.write = process.stdout.write.bind(process.stdout);
38 |         this.error = process.stderr.write.bind(process.stderr);
39 |     } else {
40 |         this.write = function () {};
41 |         this.error = function () {};
42 |     }
43 | 
44 |     this.colorize = chalk;
45 | }
46 | 
47 | module.exports = Log;
48 | 


--------------------------------------------------------------------------------
/lib/tester.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * Copyright (c), Ivan Enderlin and Liip
  5 |  * All rights reserved.
  6 |  *
  7 |  * Redistribution and use in source and binary forms, with or without modification,
  8 |  * are permitted provided that the following conditions are met:
  9 |  *
 10 |  * 1. Redistributions of source code must retain the above copyright notice, this
 11 |  *    list of conditions and the following disclaimer.
 12 |  *
 13 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 14 |  *    this list of conditions and the following disclaimer in the documentation
 15 |  *    and/or other materials provided with the distribution.
 16 |  *
 17 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 18 |  *    may be used to endorse or promote products derived from this software without
 19 |  *    specific prior written permission.
 20 |  *
 21 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 22 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 23 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 24 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 25 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 26 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 27 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 28 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 29 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 30 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 31 |  */
 32 | 
 33 | var spawn = require('child_process').spawn;
 34 | var pa11y = require('pa11y');
 35 | var getInstalledPath = require('get-installed-path');
 36 | 
 37 | // Running a test includes:
 38 | // 1. Using pa11y to run a PhantomJS instance to open a URL, inject sniffers,
 39 | //    execute them, read the raw reports and transform them,
 40 | // 2. Using The Nu Html Checker, read the raw reports and transform them.
 41 | function tester(options) {
 42 |     var reporter = null,
 43 |         pa11yInstalledPath = getInstalledPath.sync('pa11y', { local: true });
 44 | 
 45 |     if (!options.reportOptions) {
 46 |         options.reportOptions = {};
 47 |     }
 48 | 
 49 |     options.reportOptions.outputDirectory = options.outputDirectory;
 50 | 
 51 |     switch (options.report) {
 52 |         case 'html':
 53 |             reporter = require('../reporter/html');
 54 |             reporter.config(options.reportOptions);
 55 | 
 56 |             break;
 57 | 
 58 |         case 'cli':
 59 |         case 'csv':
 60 |         case 'json':
 61 |             reporter = require(pa11yInstalledPath + '/reporter/' + options.report);
 62 | 
 63 |             break;
 64 | 
 65 |         default:
 66 |             reporter = require(options.report);
 67 |             reporter.config(options.reportOptions);
 68 |     }
 69 | 
 70 |     var a11yStandard = null;
 71 |     var htmlStandard = false;
 72 |     var standards    = options.standards.split(',');
 73 |     var _index       = standards.indexOf('HTML');
 74 | 
 75 |     if (-1 !== _index) {
 76 |         htmlStandard = true;
 77 |         standards.splice(_index, 1);
 78 |         a11yStandard = standards.join('');
 79 |     } else {
 80 |         a11yStandard = standards.join('');
 81 |     }
 82 | 
 83 |     var testerOptions = {
 84 |         log             : reporter,
 85 |         standard        : a11yStandard,
 86 |         allowedStandards: [a11yStandard],
 87 |         htmlcs          : options.sniffers,
 88 |         page            : {
 89 |             headers: {
 90 |                 'User-Agent': 'liip/a11ym'
 91 |             },
 92 |             settings: {},
 93 |             viewport: {
 94 |                 width : 1280,
 95 |                 height: 720
 96 |             }
 97 |         },
 98 |         phantom: {
 99 |             parameters: {
100 |                 'ignore-ssl-errors': 'true',
101 |                 'proxy-type'       : 'none'
102 |             }
103 |         }
104 |     };
105 | 
106 |     if (options.httpAuthUser) {
107 |         testerOptions.page.settings.userName = options.httpAuthUser;
108 |         testerOptions.page.settings.password = options.httpAuthPassword;
109 |     }
110 | 
111 |     var errorLevelToInteger = function (errorLevel) {
112 |         switch (errorLevel) {
113 |             case 'notice':
114 |                 return 1;
115 | 
116 |             case 'warning':
117 |                 return 2;
118 | 
119 |             case 'error':
120 |                 return 3;
121 | 
122 |             default:
123 |                 return 0;
124 |         }
125 |     };
126 | 
127 |     var minimumErrorLevel   = errorLevelToInteger(options.errorLevel);
128 |     var filterByErrorLevels = function (errorLevel) {
129 |         return minimumErrorLevel <= errorLevelToInteger(errorLevel);
130 |     };
131 |     var filterByCodes  = function () { return true; };
132 |     var excludeByCodes = function () { return true; };
133 | 
134 |     if (options.filterByCodes) {
135 |         var filterByCodesRegex = new RegExp('\\b(' + options.filterByCodes.replace(/[\s,]/g, '|') + ')\\b', 'i');
136 | 
137 |         filterByCodes = function(code) {
138 |             return code && filterByCodesRegex.test(code);
139 |         };
140 |     }
141 | 
142 |     if (options.excludeByCodes) {
143 |         var excludeByCodesRegex = new RegExp('\\b(' + options.excludeByCodes.replace(/[\s,]/g, '|') + ')\\b', 'i');
144 | 
145 |         excludeByCodes = function(code) {
146 |             return code && !excludeByCodesRegex.test(code);
147 |         };
148 |     }
149 | 
150 |     var testHTML = new function () {
151 |         return function (url, onComplete) {
152 |             if (true !== htmlStandard) {
153 |                 onComplete(null, []);
154 | 
155 |                 return;
156 |             }
157 | 
158 |             var results = '';
159 |             var vnu     = spawn(
160 |                 'java',
161 |                 [
162 |                     '-Xss2048k',
163 |                     '-jar',
164 |                     __dirname + '/../resource/vnu/vnu.jar',
165 |                     '--format',
166 |                     'json',
167 |                     url
168 |                 ]
169 |             );
170 |             vnu.stderr.on(
171 |                 'data',
172 |                 function (data) {
173 |                     results += data;
174 |                 }
175 |             );
176 |             vnu.on(
177 |                 'exit',
178 |                 function () {
179 |                     onComplete(
180 |                         null,
181 |                         JSON
182 |                             .parse(results)
183 |                             .messages
184 |                             .map(
185 |                                 function (result) {
186 |                                     return {
187 |                                         type: 'html',
188 |                                         // error, warning, notice
189 |                                         level: result.type.replace('info', 'notice'),
190 |                                         // nothing
191 |                                         code: null,
192 |                                         // HTML piece
193 |                                         context: (result.extract || '').trim(),
194 |                                         // nothing
195 |                                         selector: null,
196 |                                         // message
197 |                                         message: result.message
198 |                                     };
199 |                                 }
200 |                             )
201 |                             .filter(
202 |                                 function (result) {
203 |                                     return filterByErrorLevels(result.level);
204 |                                 }
205 |                             )
206 |                     );
207 |                 }
208 |             );
209 |         };
210 |     };
211 |     var testA11y = new function () {
212 |         if (!a11yStandard) {
213 |             return function (url, onComplete) {
214 |                 onComplete(null, []);
215 |             };
216 |         }
217 | 
218 |         return function (url, onComplete) {
219 |             pa11y(testerOptions).run(url, onComplete);
220 |         };
221 |     };
222 | 
223 |     return function (url, onSuccess, onError) {
224 |         var lateAccumulator = function (counter, callback) {
225 |             var accumulator = [];
226 | 
227 |             return function (values, logger) {
228 |                 accumulator = accumulator.concat(values);
229 | 
230 |                 if (--counter === 0) {
231 |                     var handle = logger(accumulator, url);
232 | 
233 |                     if (handle instanceof Promise) {
234 |                         handle.then(
235 |                             function () {
236 |                                 callback(accumulator);
237 |                             }
238 |                         ).catch(
239 |                             function () {
240 |                                 callback(accumulator);
241 |                             }
242 |                         );
243 |                     } else {
244 |                         callback(accumulator);
245 |                     }
246 |                 }
247 |             };
248 |         };
249 |         var _onSuccess = lateAccumulator(2, onSuccess);
250 |         var _onError   = lateAccumulator(2, onError);
251 | 
252 |         try {
253 |             testA11y(
254 |                 url,
255 |                 function (error, results) {
256 |                     if (error) {
257 |                         return _onError(error, testerOptions.log.error);
258 |                     }
259 | 
260 |                     results =
261 |                         results
262 |                             .map(
263 |                                 function (result) {
264 |                                     return {
265 |                                         type: 'a11y',
266 |                                         // error, warning or notice.
267 |                                         level: result.type,
268 |                                         // e.g. WCAG2AA.PrincipleX.GuidelineX_Y.X_Y_Z.….…
269 |                                         code: result.code,
270 |                                         // e.g. <title>Foobar</title>
271 |                                         context: result.context,
272 |                                         // e.g. 'html > head > title'
273 |                                         selector: result.selector,
274 |                                         // message
275 |                                         message: result.message
276 |                                     };
277 |                                 }
278 |                             )
279 |                             .filter(
280 |                                 function (result) {
281 |                                     return filterByErrorLevels(result.level) &&
282 |                                         filterByCodes(result.code) &&
283 |                                         excludeByCodes(result.code);
284 |                                 }
285 |                             );
286 | 
287 |                     _onSuccess(results, testerOptions.log.results);
288 |                 }
289 |             );
290 | 
291 |             testHTML(
292 |                 url,
293 |                 function (error, results) {
294 |                     _onSuccess(results, testerOptions.log.results);
295 |                 }
296 |             );
297 |         } catch (error) {
298 |             testerOptions.log.error(error.stack);
299 |             process.exit(1);
300 |         }
301 |     };
302 | };
303 | 
304 | module.exports = tester;
305 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "the-a11y-machine",
 3 |   "version": "0.9.3",
 4 |   "description": "The A11y Machine is an automated accessibility testing tool which crawls and tests all pages of any website.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/liip/TheA11yMachine.git"
 8 |   },
 9 |   "keywords": [
10 |     "accessibility",
11 |     "test",
12 |     "wcag",
13 |     "crawl"
14 |   ],
15 |   "author": "Ivan Enderlin",
16 |   "license": "BSD-3-Clause",
17 |   "bugs": {
18 |     "url": "https://github.com/liip/TheA11yMachine/issues"
19 |   },
20 |   "homepage": "https://github.com/liip/TheA11yMachine#readme",
21 |   "main": "./lib/a11ym.js",
22 |   "dependencies": {
23 |     "html_codesniffer": "^2.2.0",
24 |     "async": "^2.1.4",
25 |     "chalk": "^1.1.3",
26 |     "commander": "^2.9.0",
27 |     "get-installed-path": "^2.0.3",
28 |     "glob": "^6.0.4",
29 |     "js-yaml": "^3.7.0",
30 |     "merge": "^1.2.0",
31 |     "mkdirp": "^0.5.1",
32 |     "open": "0.0.5",
33 |     "pa11y": "^4.3.0",
34 |     "phantomjs-prebuilt": "^2.1.14",
35 |     "process": "^0.11.9",
36 |     "simplecrawler": "^1.0.3",
37 |     "underscore": "^1.8.3"
38 |   },
39 |   "engines": {
40 |     "node": ">=0.12.9"
41 |   },
42 |   "bin": {
43 |     "a11ym": "./a11ym",
44 |     "a11ym-dashboard": "./a11ym-dashboard",
45 |     "a11ym-sniffers": "./a11ym-sniffers"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/reporter/html.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * Copyright (c) 2016, Ivan Enderlin and Liip
  5 |  * All rights reserved.
  6 |  *
  7 |  * Redistribution and use in source and binary forms, with or without modification,
  8 |  * are permitted provided that the following conditions are met:
  9 |  *
 10 |  * 1. Redistributions of source code must retain the above copyright notice, this
 11 |  *    list of conditions and the following disclaimer.
 12 |  *
 13 |  * 2. Redistributions in binary form must reproduce the above copyright notice,
 14 |  *    this list of conditions and the following disclaimer in the documentation
 15 |  *    and/or other materials provided with the distribution.
 16 |  *
 17 |  * 3. Neither the name of the copyright holder nor the names of its contributors
 18 |  *    may be used to endorse or promote products derived from this software without
 19 |  *    specific prior written permission.
 20 |  *
 21 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 22 |  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 23 |  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 24 |  * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 25 |  * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 26 |  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 27 |  *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 28 |  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 29 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 30 |  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 31 |  */
 32 | 
 33 | var _      = require('underscore');
 34 | var crypto = require('crypto');
 35 | var fs     = require('fs');
 36 | var mkdirp = require('mkdirp');
 37 | 
 38 | module.exports = {
 39 |     config : config,
 40 |     error  : reportError,
 41 |     debug  : emptyFunction,
 42 |     info   : emptyFunction,
 43 |     results: reportResults
 44 | };
 45 | 
 46 | var outputDirectory = null;
 47 | var indexHtmlStream = null;
 48 | var statistics      = [];
 49 | 
 50 | function emptyFunction() {}
 51 | 
 52 | function config(options) {
 53 |     if (!options.outputDirectory) {
 54 |         throw "The `html` reporter must have a `outputDirectory` option.";
 55 |     }
 56 | 
 57 |     outputDirectory = options.outputDirectory;
 58 |     mkdirp.sync(outputDirectory);
 59 |     indexHtmlStream = fs.createWriteStream(
 60 |         outputDirectory + '/index.html',
 61 |         {
 62 |             flag           : 'a',
 63 |             defaultEncoding: 'utf8'
 64 |         }
 65 |     );
 66 | 
 67 |     var indexDotHtml = _.template(
 68 |         fs.readFileSync(__dirname + '/../view/reports/index.html', {encoding: 'utf-8'})
 69 |     );
 70 | 
 71 |     indexHtmlStream.write(
 72 |         indexDotHtml(
 73 |             {
 74 |                 date: new Date(),
 75 |                 css : {
 76 |                     common: fs.readFileSync(__dirname + '/../view/common.css', {encoding: 'utf-8'})
 77 |                 }
 78 |             }
 79 |         )
 80 |     );
 81 | }
 82 | 
 83 | function reportError(message) {
 84 |     console.error(message);
 85 | }
 86 | 
 87 | function reportResults(results, url) {
 88 |     var hash = crypto.createHash('sha1').update(url).digest('hex');
 89 | 
 90 |     var noteCodes    = {};
 91 |     var errorCount   = 0;
 92 |     var warningCount = 0;
 93 |     var noticeCount  = 0;
 94 | 
 95 |     results.forEach(
 96 |         function(result, index) {
 97 |             if (true === /Principle.+Guideline/.test(result.code)) {
 98 |                 result.noteCodes = result.code.split('.')[4].split(',');
 99 |             } else {
100 |                 result.noteCodes = [];
101 |             }
102 | 
103 |             result.noteCodes.forEach(
104 |                 function (value) {
105 |                     noteCodes[value] = value;
106 |                 }
107 |             );
108 | 
109 |             if (true === isError(result)) {
110 |                 ++errorCount;
111 |             } else if (true === isWarning(result)) {
112 |                 ++warningCount;
113 |             } else if (true === isNotice(result)) {
114 |                 ++noticeCount;
115 |             }
116 |         }
117 |     );
118 | 
119 |     noteCodes = Object.keys(noteCodes);
120 | 
121 |     var total             = Math.max(errorCount + warningCount + noticeCount, 1);
122 |     var errorPercentage   = (errorCount * 100) / total;
123 |     var warningPercentage = (warningCount * 100) / total;
124 |     var noticePercentage  = (noticeCount * 100) / total;
125 | 
126 |     var reportDotHtml = _.template(
127 |         fs.readFileSync(__dirname + '/../view/reports/report.html', {encoding: 'utf-8'})
128 |     );
129 |     var indexReportDotHtml = _.template(
130 |         fs.readFileSync(__dirname + '/../view/reports/index-report.html', {encoding: 'utf-8'})
131 |     );
132 | 
133 |     var options = {
134 |         url              : url,
135 |         reportUrl        : './' + hash + '.html',
136 |         date             : new Date(),
137 |         errorCount       : errorCount,
138 |         errorPercentage  : errorPercentage,
139 |         warningCount     : warningCount,
140 |         warningPercentage: warningPercentage,
141 |         noticeCount      : noticeCount,
142 |         noticePercentage : noticePercentage,
143 |         results          : results,
144 |         noteCodes        : noteCodes,
145 |         css              : {
146 |             common: fs.readFileSync(__dirname + '/../view/common.css', {encoding: 'utf-8'})
147 |         }
148 |     };
149 | 
150 |     statistics.push({
151 |         url         : url,
152 |         hash        : hash,
153 |         date        : new Date(),
154 |         errorCount  : errorCount,
155 |         warningCount: warningCount,
156 |         noticeCount : noticeCount
157 |     });
158 | 
159 |     fs.writeFileSync(
160 |         outputDirectory + '/' + hash + '.html',
161 |         reportDotHtml(options),
162 |         {
163 |             flag    : 'w',
164 |             encoding: 'utf8'
165 |         }
166 |     );
167 |     indexHtmlStream.write(indexReportDotHtml(options));
168 |     fs.writeFileSync(
169 |         outputDirectory + '/statistics.json',
170 |         JSON.stringify(statistics),
171 |         {
172 |             flag    : 'w',
173 |             encoding: 'utf8'
174 |         }
175 | 
176 |     );
177 | }
178 | 
179 | function upperCaseFirst(string) {
180 |     return string.charAt(0).toUpperCase() + string.slice(1);
181 | }
182 | 
183 | function isError(result) {
184 |     return (result.level === 'error');
185 | }
186 | 
187 | function isNotice(result) {
188 |     return (result.level === 'notice');
189 | }
190 | 
191 | function isWarning(result) {
192 |     return (result.level === 'warning');
193 | }
194 | 
195 | // Polyfill from
196 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill.
197 | if (!Array.from) {
198 |     Array.from = (function () {
199 |         var toStr = Object.prototype.toString;
200 |         var isCallable = function (fn) {
201 |             return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
202 |         };
203 |         var toInteger = function (value) {
204 |             var number = Number(value);
205 |             if (isNaN(number)) { return 0; }
206 |             if (number === 0 || !isFinite(number)) { return number; }
207 |             return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
208 |         };
209 |         var maxSafeInteger = Math.pow(2, 53) - 1;
210 |         var toLength = function (value) {
211 |             var len = toInteger(value);
212 |             return Math.min(Math.max(len, 0), maxSafeInteger);
213 |         };
214 | 
215 |         // The length property of the from method is 1.
216 |         return function from(arrayLike/*, mapFn, thisArg */) {
217 |             // 1. Let C be the this value.
218 |             var C = this;
219 | 
220 |             // 2. Let items be ToObject(arrayLike).
221 |             var items = Object(arrayLike);
222 | 
223 |             // 3. ReturnIfAbrupt(items).
224 |             if (arrayLike == null) {
225 |                 throw new TypeError("Array.from requires an array-like object - not null or undefined");
226 |             }
227 | 
228 |             // 4. If mapfn is undefined, then let mapping be false.
229 |             var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
230 |             var T;
231 |             if (typeof mapFn !== 'undefined') {
232 |                 // 5. else
233 |                 // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
234 |                 if (!isCallable(mapFn)) {
235 |                     throw new TypeError('Array.from: when provided, the second argument must be a function');
236 |                 }
237 | 
238 |                 // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
239 |                 if (arguments.length > 2) {
240 |                     T = arguments[2];
241 |                 }
242 |             }
243 | 
244 |             // 10. Let lenValue be Get(items, "length").
245 |             // 11. Let len be ToLength(lenValue).
246 |             var len = toLength(items.length);
247 | 
248 |             // 13. If IsConstructor(C) is true, then
249 |             // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
250 |             // 14. a. Else, Let A be ArrayCreate(len).
251 |             var A = isCallable(C) ? Object(new C(len)) : new Array(len);
252 | 
253 |             // 16. Let k be 0.
254 |             var k = 0;
255 |             // 17. Repeat, while k < len… (also steps a - h)
256 |             var kValue;
257 |             while (k < len) {
258 |                 kValue = items[k];
259 |                 if (mapFn) {
260 |                     A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
261 |                 } else {
262 |                     A[k] = kValue;
263 |                 }
264 |                 k += 1;
265 |             }
266 |             // 18. Let putStatus be Put(A, "length", len, true).
267 |             A.length = len;
268 |             // 20. Return A.
269 |             return A;
270 |         };
271 |     }());
272 | }
273 | 


--------------------------------------------------------------------------------
/resource/screenshots/dashboard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liip/TheA11yMachine/b66654881e9ace89f670cb28a71499b278702616/resource/screenshots/dashboard.jpg


--------------------------------------------------------------------------------
/resource/screenshots/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liip/TheA11yMachine/b66654881e9ace89f670cb28a71499b278702616/resource/screenshots/index.png


--------------------------------------------------------------------------------
/resource/screenshots/report.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liip/TheA11yMachine/b66654881e9ace89f670cb28a71499b278702616/resource/screenshots/report.png


--------------------------------------------------------------------------------
/resource/sniffers/custom.example/ruleset.js:
--------------------------------------------------------------------------------
 1 | window.HTMLCS_Custom = {
 2 |     name: 'Custom',
 3 |     description: 'Custom standard template.',
 4 |     sniffs: [
 5 |         'A',
 6 |         {
 7 |             standard: 'WCAG2AAA',
 8 |             include: [
 9 |                'Principle1.Guideline1_1.1_1_1',
10 |                'Principle1.Guideline1_2.1_2_1',
11 |                'Principle1.Guideline1_2.1_2_2',
12 |                'Principle1.Guideline1_2.1_2_4',
13 |                'Principle1.Guideline1_2.1_2_5',
14 |                'Principle1.Guideline1_3.1_3_1',
15 |                'Principle1.Guideline1_3.1_3_1_A',
16 |                'Principle1.Guideline1_3.1_3_2',
17 |                'Principle1.Guideline1_3.1_3_3',
18 |                'Principle1.Guideline1_4.1_4_1',
19 |                'Principle1.Guideline1_4.1_4_2',
20 |                'Principle1.Guideline1_4.1_4_3',
21 |                'Principle1.Guideline1_4.1_4_3_F24',
22 |                'Principle1.Guideline1_4.1_4_3_Contrast',
23 |                'Principle1.Guideline1_4.1_4_4',
24 |                'Principle1.Guideline1_4.1_4_5',
25 |                'Principle2.Guideline2_1.2_1_1',
26 |                'Principle2.Guideline2_1.2_1_2',
27 |                'Principle2.Guideline2_2.2_2_1',
28 |                'Principle2.Guideline2_2.2_2_2',
29 |                'Principle2.Guideline2_3.2_3_1',
30 |                'Principle2.Guideline2_4.2_4_1',
31 |                'Principle2.Guideline2_4.2_4_2',
32 |                'Principle2.Guideline2_4.2_4_3',
33 |                'Principle2.Guideline2_4.2_4_4',
34 |                'Principle2.Guideline2_4.2_4_5',
35 |                'Principle2.Guideline2_4.2_4_6',
36 |                'Principle2.Guideline2_4.2_4_7',
37 |                'Principle3.Guideline3_1.3_1_1',
38 |                'Principle3.Guideline3_1.3_1_2',
39 |                'Principle3.Guideline3_2.3_2_1',
40 |                'Principle3.Guideline3_2.3_2_2',
41 |                'Principle3.Guideline3_2.3_2_3',
42 |                'Principle3.Guideline3_2.3_2_4',
43 |                'Principle3.Guideline3_3.3_3_1',
44 |                'Principle3.Guideline3_3.3_3_2',
45 |                'Principle3.Guideline3_3.3_3_3',
46 |                'Principle3.Guideline3_3.3_3_4',
47 |                'Principle4.Guideline4_1.4_1_1',
48 |                'Principle4.Guideline4_1.4_1_2'
49 |            ]
50 |         }
51 |     ],
52 |     getMsgInfo: function(code) {
53 |         return [];
54 |     }
55 | };


--------------------------------------------------------------------------------
/resource/sniffers/custom.example/sniffs/A.js:
--------------------------------------------------------------------------------
 1 | var HTMLCS_Custom_Sniffs_A = {
 2 |     /**
 3 |      * Determines the elements to register for processing.
 4 |      *
 5 |      * Each element of the returned array can either be an element name, or "_top"
 6 |      * which is the top element of the tested code.
 7 |      *
 8 |      * @returns {Array} The list of elements.
 9 |      */
10 |     register: function()
11 |     {
12 |         return [
13 |             //'html',
14 |             //'a'
15 |         ];
16 |     },
17 | 
18 |     /**
19 |      * Process the registered element.
20 |      *
21 |      * @param {DOMNode} element The element registered.
22 |      * @param {DOMNode} top     The top element of the tested code.
23 |      */
24 |     process: function(element, top)
25 |     {
26 |         /*
27 |         var nodeName = element.nodeName.toLowerCase();
28 | 
29 |         switch (nodeName) {
30 |             default:
31 |                 this.testSomething(element);
32 |             break;
33 |         }
34 |         */
35 |     },
36 | 
37 |     /**
38 |      * Test something custom.
39 |      *
40 |      * We throw a notice to ensure that …
41 |      *
42 |      * @param {DOMNode} element The element to test.
43 |      *
44 |      * @returns void
45 |      */
46 |     testSomething: function(element)
47 |     {
48 |         // HTMLCS.addMessage(HTMLCS.NOTICE, element, 'Hello world!', 'Custom01');
49 |     }
50 | };
51 | 


--------------------------------------------------------------------------------
/resource/vnu/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2007-2016 Mozilla Foundation
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a
 4 | copy of this software and associated documentation files (the "Software"),
 5 | to deal in the Software without restriction, including without limitation
 6 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
 7 | and/or sell copies of the Software, and to permit persons to whom the
 8 | Software is furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
18 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
19 | DEALINGS IN THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/resource/vnu/Makefile:
--------------------------------------------------------------------------------
 1 | all:
 2 | 	git clone https://github.com/validator/validator
 3 | 	cd validator
 4 | 	python build/build.py \
 5 | 		--presets-file="resources/nu-presets.txt" \
 6 | 		--follow-w3c-spec \
 7 | 		--html5link=http://www.w3.org/html/wg/drafts/html/master/single-page.html \
 8 | 		update dldeps build jar
 9 | 	cp build/dist/vnu.jar ..
10 | 


--------------------------------------------------------------------------------
/resource/vnu/README.md:
--------------------------------------------------------------------------------
 1 | # vnu instance
 2 | 
 3 | vnu source code is located in https://github.com/validator/validator.
 4 | 
 5 | To build the vnu instance with the W3C HTML ruleset, please (i) be
 6 | sure you have `JAVA_HOME` correctly set, and (ii) run the `Makefile`:
 7 | 
 8 | ```sh
 9 | make
10 | ```
11 | 
12 | On macOS, `JAVA_HOME` must be set to `/usr/libexec/java_home` per
13 | default. On Linux, it might be `/usr/lib/jvm/java-8-openjdk-amd64` for
14 | instance.
15 | 
16 | See https://github.com/liip/TheA11yMachine/issues/98 for more details.
17 | 


--------------------------------------------------------------------------------
/resource/vnu/vnu.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liip/TheA11yMachine/b66654881e9ace89f670cb28a71499b278702616/resource/vnu/vnu.jar


--------------------------------------------------------------------------------
/view/common.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: Source Sans Pro;
  3 |   font-style: normal;
  4 |   font-weight: 200;
  5 |   src: local(Source Sans Pro ExtraLight),
  6 |        local(SourceSansPro-ExtraLight),
  7 |        url(https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGIAPdqzPmKFFIYQ-46z3JxY.woff2) format('woff2');
  8 | }
  9 | 
 10 | * {
 11 |   margin: 0;
 12 |   padding: 0;
 13 | }
 14 | 
 15 | body {
 16 |   font: .9em/1.2em Source Sans Pro;
 17 |   color: rgb(43, 6, 1);
 18 | }
 19 | 
 20 | h1 {
 21 |   text-align: center;
 22 |   margin: 1em 0;
 23 | }
 24 | 
 25 | a {
 26 |   color: inherit;
 27 | }
 28 | 
 29 | .infos {
 30 |   text-align: center;
 31 |   margin-bottom: 3em;
 32 | }
 33 | 
 34 | h2 {
 35 |   margin-bottom: 1em;
 36 |   line-height: 1.3em;
 37 | }
 38 | 
 39 | [data-result-level="error"] {
 40 |   fill: rgb(244, 96, 37);
 41 |   stroke: rgb(244, 96, 37);
 42 |   background-color: rgba(244, 96, 37, .1);
 43 | }
 44 | 
 45 |   [data-result-level="error"] h2 {
 46 |     color: rgb(244, 96, 37);
 47 |   }
 48 | 
 49 | [data-result-level="warning"] {
 50 |   fill: rgb(254, 178, 54);
 51 |   stroke: rgb(254, 178, 54);
 52 |   background-color: rgba(254, 178, 54, .1);
 53 | }
 54 | 
 55 |   [data-result-level="warning"] h2 {
 56 |     color: rgb(254, 178, 54);
 57 |   }
 58 | 
 59 | [data-result-level="notice"] {
 60 |   fill: rgb(10, 172, 207);
 61 |   stroke: rgb(10, 172, 207);
 62 |   background-color: rgba(10, 172, 207, .1);
 63 | }
 64 | 
 65 |   [data-result-level="notice"] h2 {
 66 |     color: rgb(10, 172, 207);
 67 |   }
 68 | 
 69 | text[data-result-level],
 70 | [data-result-level] text {
 71 |   fill: #000;
 72 | }
 73 | 
 74 | .pie {
 75 |   display: block;
 76 |   margin: 2em auto;
 77 |   max-width: 200px;
 78 |   border-radius: 50%;
 79 |   background-color: rgb(105, 211, 141);
 80 | }
 81 | 
 82 | .pie circle {
 83 |   stroke-width: 32;
 84 |   fill: none;
 85 | }
 86 | 
 87 | .pie text {
 88 |   font-size: .5em;
 89 |   color: inherit;
 90 |   stroke: none;
 91 |   text-anchor: middle;
 92 |   dominant-baseline: middle;
 93 |   visibility: hidden;
 94 | }
 95 | 
 96 | .pie [data-result-text-level="error"] > text {
 97 |   visibility: visible;
 98 | }
 99 | 
100 | .pie circle[data-result-level="warning"]:hover ~ [data-result-text-level="error"] > text,
101 | .pie circle[data-result-level="notice"]:hover ~ [data-result-text-level="error"] > text {
102 |   visibility: hidden;
103 | }
104 | 
105 | .pie circle[data-result-level="warning"]:hover ~ [data-result-text-level="warning"] > text,
106 | .pie circle[data-result-level="notice"]:hover ~ [data-result-text-level="notice"] > text {
107 |   visibility: visible;
108 | }
109 | 
110 | #controls {
111 |   margin: 0 2em 2em;
112 | }
113 | 
114 | #controls::after {
115 |   content: '';
116 |   display: block;
117 |   clear: both;
118 | }
119 | 
120 | #controls > p {
121 |   display: inline-block;
122 | }
123 | 
124 | #controls > p + p {
125 |   margin-left: 3em;
126 | }
127 | 
128 | #controls > .all-notes {
129 |   float: right;
130 |   width: 40%;
131 |   max-height: 1.1em;
132 |   overflow: hidden;
133 |   transition: max-height .5s ease-in-out;
134 | }
135 | 
136 |   #controls > .all-notes:hover {
137 |     max-height: 1000px;
138 |   }
139 | 
140 |   #controls > .all-notes > p {
141 |     cursor: pointer;
142 |     text-align: right;
143 |     text-decoration: underline;
144 |     margin-bottom: .7em;
145 |   }
146 | 
147 |   #controls > .all-notes > ul {
148 |     list-style: none;
149 |     -moz-column-width: 3.5em;
150 |     -moz-column-gap: 2.5em;
151 |     -webkit-column-width: 3.5em;
152 |     -webkit-column-gap: 2.5em;
153 |     column-width: 3.5em;
154 |     column-gap: 2.5em;
155 |   }
156 | 
157 |   #controls > .all-notes > ul > li > small {
158 |     float: right;
159 |   }
160 | 


--------------------------------------------------------------------------------
/view/dashboard/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | <head>
  5 |   <meta charset="utf-8" />
  6 |   <title>Dashboard — The Accessibility Machine</title>
  7 | 
  8 |   <style>
  9 |     <%= css.common %>
 10 | 
 11 |     body {
 12 |       margin: 0;
 13 |       padding: 0;
 14 |       text-align: center;
 15 |     }
 16 | 
 17 |     header {
 18 |       padding: 3em 0 2em 0;
 19 |       background: url('data:image/jpg;base64,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');
 20 |     }
 21 | 
 22 |     h1 {
 23 |       color: #fff;
 24 |       font-weight: bold;
 25 |       line-height: 1;
 26 |     }
 27 | 
 28 |     table {
 29 |       display: inline-table;
 30 |       margin: 0 auto;
 31 |       border-spacing: 3em 1em;
 32 |     }
 33 | 
 34 |     a {
 35 |       display: inline-block;
 36 |       overflow: hidden;
 37 |       text-indent: -9999px;
 38 |       width: 2em;
 39 |       height: 2em;
 40 |       border-radius: 50%;
 41 |       background: rgb(244, 96, 37) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEyNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ5Ljk3NiwyMC4wMjRjLTI5LjM4NywwLTQ1LjA3MSwyNC42ODItNDUuMDcxLDI5LjQ3OXMxNS42ODQsMjkuNDgsNDUuMDcxLDI5LjQ4ICBzNDUuMDcxLTI0LjY4Myw0NS4wNzEtMjkuNDhTNzkuMzYzLDIwLjAyNCw0OS45NzYsMjAuMDI0eiBNNDkuOTc2LDc0Ljk4NGMtMjcuMDg1LDAtNDAuODM0LTIyLjQyNy00MS4wNzEtMjUuNDU3ICBjMC4yMzctMy4wNzcsMTMuOTg3LTI1LjUwMyw0MS4wNzEtMjUuNTAzYzI3LjA4NCwwLDQwLjgzNCwyMi40MjYsNDEuMDcxLDI1LjQ1NkM5MC44MSw1Mi41NTgsNzcuMDYxLDc0Ljk4NCw0OS45NzYsNzQuOTg0eiIvPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik00OS45NjcsMzMuMDA1Yy05LjM2MywwLTE2Ljk4LDcuNDExLTE2Ljk4LDE2LjUxOWMwLDkuMTA5LDcuNjE3LDE2LjUyMSwxNi45OCwxNi41MjEgIHMxNi45ODEtNy40MTEsMTYuOTgxLTE2LjUyMUM2Ni45NDgsNDAuNDE2LDU5LjMzLDMzLjAwNSw0OS45NjcsMzMuMDA1eiBNNDkuOTY3LDYyLjA0NWMtNy4xNTcsMC0xMi45OC01LjYxNy0xMi45OC0xMi41MjEgIGMwLTYuOTAzLDUuODIzLTEyLjUxOSwxMi45OC0xMi41MTljNy4xNTgsMCwxMi45ODEsNS42MTYsMTIuOTgxLDEyLjUxOUM2Mi45NDgsNTYuNDI4LDU3LjEyNSw2Mi4wNDUsNDkuOTY3LDYyLjA0NXoiLz48L3N2Zz4=') no-repeat .25em .28em;
 42 |       background-size: 1.5em;
 43 |     }
 44 | 
 45 |     svg {
 46 |       display: block;
 47 |       margin: 0 auto 2em auto;
 48 |       max-height: 50vh;
 49 |       max-width: 800px;
 50 |       font-size: 1.2em;
 51 |       background: #fff;
 52 |     }
 53 | 
 54 |     svg text {
 55 |       text-anchor: start;
 56 |       dominant-baseline: central;
 57 |     }
 58 | 
 59 |     svg [role="tooltip"] {
 60 |       pointer-events: none;
 61 |       opacity: 0;
 62 | 
 63 |       transform: translate(1.8em);
 64 |       transition: transform .1s ease-out, opacity .1s ease-out;
 65 |     }
 66 | 
 67 |     svg g:hover > [role="tooltip"] {
 68 |       pointer-events: auto;
 69 |       opacity: 1;
 70 | 
 71 |       transform: translate(.9em);
 72 |     }
 73 |   </style>
 74 | 
 75 |   <script>
 76 |     function buildListing (data) {
 77 |         var tbody = document.querySelector('#listing tbody');
 78 | 
 79 |         data
 80 |             .sort(
 81 |                 function (a, b) {
 82 |                     return new Date(b.date) - new Date(a.date);
 83 |                 }
 84 |             )
 85 |             .forEach(
 86 |                 function (report) {
 87 |                     var tr = document.createElement('tr');
 88 | 
 89 |                     var tdReportId       = document.createElement('td');
 90 |                     tdReportId.innerHTML = report.reportId;
 91 | 
 92 |                     var tdDate      = document.createElement('td');
 93 |                     var dateOptions = {
 94 |                         weekday: 'long',
 95 |                         year   : 'numeric',
 96 |                         month  : 'long',
 97 |                         day    : 'numeric',
 98 |                         hour   : 'numeric',
 99 |                         minute : 'numeric'
100 |                     };
101 |                     var date         = new Date(report.date).toLocaleDateString('en-GB', dateOptions)
102 |                     tdDate.innerHTML = date;
103 | 
104 |                     var tdStatistics       = document.createElement('td');
105 |                     tdStatistics.innerHTML =
106 |                         '<span data-result-level="error">errors  : ' + report.errorCount + '</span>, ' +
107 |                         '<span data-result-level="warning">warnings: ' + report.warningCount + '</span>, ' +
108 |                         '<span data-result-level="notice">notices : ' + report.noticeCount + '</span>';
109 | 
110 |                     var tdLink       = document.createElement('td');
111 |                     tdLink.innerHTML =
112 |                         '<a href="' + report.reportId + '/index.html" ' +
113 |                         'target="_blank">See report from ' + date + '</a>';
114 | 
115 |                     tr.appendChild(tdReportId);
116 |                     tr.appendChild(tdDate);
117 |                     tr.appendChild(tdStatistics);
118 |                     tr.appendChild(tdLink);
119 |                     tbody.appendChild(tr);
120 |                 }
121 |             );
122 |     }
123 | 
124 |     function buildGraph (data) {
125 |         var svgNS        = 'http://www.w3.org/2000/svg';
126 |         var graphHeight  = 400;
127 |         var graphWidth   = 800;
128 |         var marginHeight = 50;
129 |         var marginWidth  = 50;
130 |         var graph        = document.querySelector('#graph');
131 |         graph.setAttribute(
132 |             'viewBox',
133 |             '0 0 ' + (graphWidth + marginWidth) + ' ' + (graphHeight + marginHeight)
134 | 
135 |         );
136 |         var polylines = document.createElementNS(svgNS, 'g');
137 |         var boundY    = 0;
138 | 
139 |         data
140 |             .sort(
141 |                 function (a, b) {
142 |                     return new Date(a.date) - new Date(b.date);
143 |                 }
144 |             )
145 |             .slice(0, 8)
146 |             .map(
147 |                 function (report) {
148 |                     boundY = Math.max(
149 |                         boundY,
150 |                         report.errorCount,
151 |                         report.warningCount,
152 |                         report.noticeCount
153 |                     );
154 | 
155 |                     return report;
156 |                 }
157 |             )
158 |             .map(
159 |                 function (report, index) {
160 |                     var x = 50 + 100 * index;
161 | 
162 |                     var computeY = function (count) {
163 |                         return Math.round((graphHeight + marginHeight) - ((count * graphHeight) / boundY));
164 |                     };
165 | 
166 |                     var createPoint = function (cx, cy, type) {
167 |                         var group = document.createElementNS(svgNS, 'g');
168 | 
169 |                         var point = document.createElementNS(svgNS, 'circle');
170 |                         point.setAttribute('cx', cx);
171 |                         point.setAttribute('cy', cy);
172 |                         point.setAttribute('r', 9);
173 |                         point.setAttribute('data-result-level', type);
174 | 
175 |                         var text = document.createElementNS(svgNS, 'text');
176 |                         text.setAttribute('x', cx);
177 |                         text.setAttribute('y', cy);
178 |                         text.setAttribute('role', 'tooltip');
179 |                         text.appendChild(document.createTextNode(report[type + 'Count'] + ' ' + type + 's'));
180 | 
181 |                         group.appendChild(point);
182 |                         group.appendChild(text);
183 | 
184 |                         return group;
185 |                     };
186 | 
187 |                     var coordinates = {
188 |                         error  : [x, computeY(report.errorCount)],
189 |                         warning: [x, computeY(report.warningCount)],
190 |                         notice : [x, computeY(report.noticeCount)]
191 |                     };
192 | 
193 |                     var errorPoint   = createPoint(coordinates.error[0],   coordinates.error[1],   'error');
194 |                     var warningPoint = createPoint(coordinates.warning[0], coordinates.warning[1], 'warning');
195 |                     var noticePoint  = createPoint(coordinates.notice[0],  coordinates.notice[1],  'notice');
196 | 
197 |                     var group = document.createElementNS(svgNS, 'g');
198 |                     group.appendChild(errorPoint);
199 |                     group.appendChild(warningPoint);
200 |                     group.appendChild(noticePoint);
201 | 
202 |                     graph.appendChild(group);
203 | 
204 |                     return coordinates;
205 |                 }
206 |             )
207 |             .reduce(
208 |                 function (previous, current) {
209 |                     if (null === previous) {
210 |                         return current;
211 |                     }
212 | 
213 |                     var createLine = function (type) {
214 |                         var line = document.createElementNS(svgNS, 'line');
215 |                         line.setAttribute('x1', previous[type][0]);
216 |                         line.setAttribute('y1', previous[type][1]);
217 |                         line.setAttribute('x2', current[type][0]);
218 |                         line.setAttribute('y2', current[type][1]);
219 |                         line.setAttribute('data-result-level', type);
220 | 
221 |                         return line;
222 |                     };
223 | 
224 |                     polylines.appendChild(createLine('error'));
225 |                     polylines.appendChild(createLine('warning'));
226 |                     polylines.appendChild(createLine('notice'));
227 | 
228 |                     return current;
229 |                 },
230 |                 null
231 |             );
232 | 
233 |         graph.appendChild(polylines);
234 |     }
235 | 
236 |     var allStatistics = <%= js.allStatistics %>;
237 | 
238 |     document.addEventListener(
239 |         'DOMContentLoaded',
240 |         function () {
241 |             buildListing(allStatistics);
242 |             buildGraph(allStatistics);
243 |         }
244 |     );
245 |   </script>
246 | </head>
247 | 
248 | <body>
249 | 
250 | <header>
251 |   <h1>The Accessibility Machine's Dashboard</h1>
252 | 
253 |   <svg viewBox="0 0 900 500" id="graph">
254 |   </svg>
255 | </header>
256 | 
257 | <table id="listing">
258 |   <thead>
259 |     <tr>
260 |       <th>Report ID</th>
261 |       <th>Date</th>
262 |       <th>Statistics</th>
263 |       <th><span style="display: none" aria-hidden="true">Links</span></th>
264 |     </tr>
265 |   </thead>
266 |   <tbody>
267 |   </tbody>
268 | </table>
269 | 
270 | </body>
271 | </html>
272 | 


--------------------------------------------------------------------------------
/view/reports/index-report.html:
--------------------------------------------------------------------------------
 1 | <li
 2 |   class="report"
 3 |   data-errors-count="<%- errorCount %>"
 4 |   data-warnings-count="<%- warningCount %>"
 5 |   data-notices-count="<%- noticeCount %>">
 6 |   <svg viewBox="0 0 64 64" class="small pie" data-result-level="error">
 7 |     <title>
 8 |       <%- errorCount %> errors,
 9 |       <%- warningCount %> warnings,
10 |       <%- noticeCount %> notices.
11 |     </title>
12 |     <circle
13 |       r="25%" cx="50%" cy="50%"
14 |       stroke-dashoffset="0"
15 |       stroke-dasharray="<%- errorPercentage %> 100"
16 |       data-result-level="error" />
17 |     <circle
18 |       r="25%" cx="50%" cy="50%"
19 |       stroke-dashoffset="<%- -errorPercentage %>"
20 |       stroke-dasharray="<%- warningPercentage %> 100"
21 |       data-result-level="warning" />
22 |     <circle
23 |       r="25%" cx="50%" cy="50%"
24 |       stroke-dashoffset="<%- -(errorPercentage + warningPercentage) %>"
25 |       stroke-dasharray="<%- noticePercentage %> 100"
26 |       data-result-level="notice" />
27 |   </svg>
28 |   <a href="<%- reportUrl %>"><%- url %></a>
29 |   <span class="notes">Note codes: <%=
30 |     _.map(
31 |         Array.from(noteCodes),
32 |         function (noteCode) {
33 |             return '<a href="http://www.w3.org/TR/WCAG20-TECHS/' + noteCode + '.html">' + noteCode + '</a>';
34 |         }
35 |     )
36 |     .join(', ')
37 |   %></span>
38 |   <script>
39 |     pushEWN({
40 |       errors: <%- errorCount %>,
41 |       warnings: <%- warningCount %>,
42 |       notices: <%- noticeCount %>
43 |     });
44 |     pushNotes([<%=
45 |         _.map(
46 |             Array.from(noteCodes),
47 |             function (noteCode) {
48 |                 return "'" + noteCode + "'";
49 |             }
50 |         )
51 |         .join(', ')
52 |     %>]);
53 |   </script>
54 | </li>
55 | 


--------------------------------------------------------------------------------
/view/reports/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | <head>
  5 |   <meta charset="utf-8" />
  6 |   <title>Accessibility report (<%- date %>)</title>
  7 |   <base href="." />
  8 | 
  9 |   <style>
 10 |     <%= css.common %>
 11 | 
 12 |     input[id^="sort-by"] {
 13 |       display: none;
 14 |     }
 15 | 
 16 |     input[id^="sort"] + label {
 17 |       cursor: pointer;
 18 |       font-weight: bold;
 19 |       margin-right: .4em;
 20 |       padding: .3em .8em;
 21 |       border-radius: .5em;
 22 |     }
 23 | 
 24 |     #sort-by-errors + label {
 25 |       color: rgb(244, 96, 37);
 26 |     }
 27 | 
 28 |       #sort-by-errors:checked + label {
 29 |         color: #fff;
 30 |         background: rgb(244, 96, 37);
 31 |       }
 32 | 
 33 |     #sort-by-warnings + label {
 34 |       color: rgb(254, 178, 54);
 35 |     }
 36 | 
 37 |       #sort-by-warnings:checked + label {
 38 |         color: #000;
 39 |         background: rgb(254, 178, 54);
 40 |       }
 41 | 
 42 |     #sort-by-notices + label {
 43 |       color: rgb(10, 172, 207);
 44 |     }
 45 | 
 46 |       #sort-by-notices:checked + label {
 47 |         color: #fff;
 48 |         background: rgb(10, 172, 207);
 49 |       }
 50 | 
 51 |     #reports {
 52 |       list-style: none;
 53 |     }
 54 | 
 55 |     .report {
 56 |       font-size: 1.2em;
 57 |       margin-bottom: 1em;
 58 |     }
 59 | 
 60 |     .report > .pie {
 61 |       display: inline-block;
 62 |       vertical-align: middle;
 63 |       max-width: 2.5em;
 64 |       margin: 0 2em;
 65 |     }
 66 | 
 67 |     .report > a,
 68 |     .report > .notes {
 69 |       display: inline-block;
 70 |       white-space: nowrap;
 71 |       text-overflow: ellipsis;
 72 |       overflow: hidden;
 73 |     }
 74 | 
 75 |     .report > a {
 76 |       max-width: 60%;
 77 |     }
 78 | 
 79 |     .report > .notes {
 80 |       margin: .5em 2em 0 2em;
 81 |       float: right;
 82 |       max-width: 40%;
 83 |     }
 84 |   </style>
 85 |   <script>
 86 |     var ewn   = [];
 87 |     var notes = {};
 88 | 
 89 |     function sort(name) {
 90 |         var reports = document.querySelectorAll('.report');
 91 |         var getReportScore = function (resultIndex) {
 92 |             return +reports.item(resultIndex).getAttribute('data-' + name + '-count');
 93 |         };
 94 | 
 95 |         document.querySelector('#reports').innerHTML =
 96 |             Object
 97 |                 .keys(reports)
 98 |                 .sort(
 99 |                     function (a, b) {
100 |                         return getReportScore(a) < getReportScore(b) ? 1 : -1;
101 |                     }
102 |                 )
103 |                 .map(
104 |                     function (i) {
105 |                         return reports.item(i).outerHTML;
106 |                     }
107 |                 )
108 |                 .join('\n');
109 |     }
110 | 
111 |     function pushEWN(_ewn) {
112 |         ewn.push(_ewn);
113 |     }
114 | 
115 |     function pushNotes(_notes) {
116 |         _notes.forEach(
117 |             function (note) {
118 |                 if (undefined === notes[note]) {
119 |                     notes[note] = 1;
120 |                 } else {
121 |                     ++notes[note];
122 |                 }
123 |             }
124 |         );
125 |     }
126 | 
127 |     document.addEventListener(
128 |         'DOMContentLoaded',
129 |         function () {
130 |             var reducer = function (key) {
131 |                 return function (accumulator, stat) {
132 |                     return accumulator + stat[key];
133 |                 };
134 |             };
135 |             var errorCount   = ewn.reduce(reducer('errors'), 0);
136 |             var warningCount = ewn.reduce(reducer('warnings'), 0);
137 |             var noticeCount  = ewn.reduce(reducer('notices'), 0);
138 |             var total        = Math.max(errorCount + warningCount + noticeCount, 1);
139 | 
140 |             var errorPercentage   = (errorCount * 100) / total;
141 |             var warningPercentage = (warningCount * 100) / total;
142 |             var noticePercentage  = (noticeCount * 100) / total;
143 | 
144 |             var pie = document.querySelector('#bigPie');
145 | 
146 |             pie.innerHTML =
147 |                 pie.innerHTML.
148 |                     replace(/{errorCount}/g, "" + errorCount).
149 |                     replace(/{errorPercentage}/g, "" + errorPercentage).
150 |                     replace(/{errorOffset}/g, "" + 0).
151 |                     replace(/{warningCount}/g, "" + warningCount).
152 |                     replace(/{warningPercentage}/g, "" + warningPercentage).
153 |                     replace(/{warningOffset}/g, "" + (-errorPercentage)).
154 |                     replace(/{noticeCount}/g, "" + noticeCount).
155 |                     replace(/{noticePercentage}/g, "" + noticePercentage).
156 |                     replace(/{noticeOffset}/g, "" + (-(errorPercentage + warningPercentage)));
157 | 
158 |             document.querySelector('.all-notes ul').innerHTML =
159 |                 '<li>' +
160 |                 Object
161 |                     .keys(notes)
162 |                     .sort(
163 |                         function (a, b) {
164 |                             return -(notes[a] - notes[b]);
165 |                         }
166 |                     )
167 |                     .map(
168 |                         function (code) {
169 |                             return '<a href="http://www.w3.org/TR/WCAG20-TECHS/' + code + '.html">' + code + '</a> <small>(' + notes[code] + ')</small>';
170 |                         }
171 |                     )
172 |                     .join('</li><li>') +
173 |                 '</li>';
174 | 
175 |             sort('errors');
176 |         },
177 |         false
178 |     );
179 |   </script>
180 | </head>
181 | 
182 | <body>
183 |   <h1>Accessibility report</h1>
184 |   <p class="infos">Generated at <%- date %>.</p>
185 | 
186 |   <svg id="bigPie" viewBox="0 0 64 64" class="pie" data-result-level="error">
187 |     <title>
188 |       {errorCount} errors,
189 |       {warningCount} warnings,
190 |       {noticeCount} notices.
191 |     </title>
192 |     <circle
193 |       r="25%" cx="50%" cy="50%"
194 |       stroke-dashoffset="{errorOffset}"
195 |       stroke-dasharray="{errorPercentage} 100"
196 |       data-result-level="error" />
197 |     <circle
198 |       r="25%" cx="50%" cy="50%"
199 |       stroke-dashoffset="{warningOffset}"
200 |       stroke-dasharray="{warningPercentage} 100"
201 |       data-result-level="warning" />
202 |     <circle
203 |       r="25%" cx="50%" cy="50%"
204 |       stroke-dashoffset="{noticeOffset}"
205 |       stroke-dasharray="{noticePercentage} 100"
206 |       data-result-level="notice" />
207 |     <circle
208 |       r="15%" cx="50%" cy="50%"
209 |       stroke="white"
210 |       style="stroke-width: 19" />
211 |     <g data-result-text-level="error">
212 |       <text x="50%" y="45%">{errorCount}</text>
213 |       <text x="50%" y="55%">errors</text>
214 |     </g>
215 |     <g data-result-text-level="warning">
216 |       <text x="50%" y="45%">{warningCount}</text>
217 |       <text x="50%" y="55%">warnings</text>
218 |     </g>
219 |     <g data-result-text-level="notice">
220 |       <text x="50%" y="45%">{noticeCount}</text>
221 |       <text x="50%" y="55%">notices</text>
222 |     </g>
223 |   </svg>
224 | 
225 |   <div id="controls">
226 |     <p>
227 |       Sort by:
228 |       <input
229 |         type="radio"
230 |         id="sort-by-errors"
231 |         name="sort"
232 |         value="errors"
233 |         checked="checked"
234 |         onclick="sort('errors')" />
235 |       <label for="sort-by-errors">errors</label>
236 |       <input
237 |         type="radio"
238 |         id="sort-by-warnings"
239 |         name="sort"
240 |         value="warnings"
241 |         onclick="sort('warnings')" />
242 |       <label for="sort-by-warnings">warnings</label>
243 |       <input
244 |         type="radio"
245 |         id="sort-by-notices"
246 |         name="sort"
247 |         value="notices"
248 |         onclick="sort('notices')" />
249 |       <label for="sort-by-notices">notices</label>
250 |     </p>
251 |     <div class="all-notes">
252 |       <p>See all notes</p>
253 |       <ul>
254 |       </ul>
255 |     </div>
256 |   </div>
257 | 
258 |   <ul id="reports">
259 | 


--------------------------------------------------------------------------------
/view/reports/report.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="en">
  4 | <head>
  5 |   <meta charset="utf-8" />
  6 |   <title>Accessibility report for “<%- url %>” (<%- date %>)</title>
  7 | 
  8 |   <style>
  9 |     <%= css.common %>
 10 | 
 11 |     input[id^="filter"] {
 12 |       display: none;
 13 |     }
 14 | 
 15 |     input[id^="filter"] + label {
 16 |       cursor: pointer;
 17 |       font-weight: bold;
 18 |       margin-right: .4em;
 19 |       padding: .3em .8em;
 20 |       border-radius: .5em;
 21 |     }
 22 | 
 23 |     #filter-errors + label {
 24 |       color: rgb(244, 96, 37);
 25 |     }
 26 | 
 27 |       #filter-errors:checked + label {
 28 |         color: #fff;
 29 |         background: rgb(244, 96, 37);
 30 |       }
 31 | 
 32 |     #filter-warnings + label {
 33 |       color: rgb(254, 178, 54);
 34 |     }
 35 | 
 36 |       #filter-warnings:checked + label {
 37 |         color: #000;
 38 |         background: rgb(254, 178, 54);
 39 |       }
 40 | 
 41 |     #filter-notices + label {
 42 |       color: rgb(10, 172, 207);
 43 |     }
 44 | 
 45 |       #filter-notices:checked + label {
 46 |         color: #fff;
 47 |         background: rgb(10, 172, 207);
 48 |       }
 49 | 
 50 |     input[name="sort-by"] {
 51 |       display: none;
 52 |     }
 53 | 
 54 |     #sort-by-document-order + label,
 55 |     #sort-by-category + label {
 56 |       cursor: pointer;
 57 |       position: relative;
 58 |     }
 59 | 
 60 |     #sort-by-category + label {
 61 |       margin-left: 3.2em;
 62 |     }
 63 | 
 64 |     #sort-by-document-order + label::after {
 65 |       position: absolute;
 66 |       content: '';
 67 |       top: -.15em;
 68 |       right: -3.2em;
 69 |       width: 3em;
 70 |       height: 1.5em;
 71 |       border-radius: 1.2em;
 72 |       background: rgb(105, 211, 141);
 73 |     }
 74 | 
 75 |     #sort-by-category + label::after {
 76 |       position: absolute;
 77 |       top: 0;
 78 |       left: -3.05em;
 79 |       content: '';
 80 |       display: block;
 81 |       width: 1.2em;
 82 |       height: 1.2em;
 83 |       border-radius: 1.2em;
 84 |       background: #fff;
 85 |       transition: left .3s ease-out .3s;
 86 |       animation: .3s linear unswitch .2s;
 87 |     }
 88 | 
 89 |     @keyframes switch {
 90 |       30% { width: 2em; }
 91 |     }
 92 | 
 93 |     @keyframes unswitch {
 94 |       30% { margin-left: -.8em; width: 2em; }
 95 |     }
 96 | 
 97 |     #sort-by-category:checked + label::after {
 98 |       left: -1.55em;
 99 |       animation: .3s linear switch .2s;
100 |     }
101 | 
102 |     #results {
103 |       list-style: none;
104 |     }
105 | 
106 |     #results.filter-errors [data-result-level="error"],
107 |     #results.filter-warnings [data-result-level="warning"],
108 |     #results.filter-notices [data-result-level="notice"] {
109 |       display: none;
110 |     }
111 | 
112 |     .result {
113 |       position: relative;
114 |       padding: 1em 2em 1em 4.8em;
115 |     }
116 | 
117 |     .result > h2 {
118 |       margin-bottom: .5em;
119 |       line-height: 1.3em;
120 |     }
121 | 
122 |     .result > p {
123 |       margin-bottom: .5em;
124 |     }
125 | 
126 |     .result > aside {
127 |       position: absolute;
128 |       top: 0;
129 |       left: 2em;
130 |       width: 1.5em;
131 |       height: 100%;
132 |       text-indent: -10em;
133 |       filter: saturate(50%);
134 |     }
135 | 
136 |     .result[data-result-type="html"] > aside {
137 |       background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIiA/Pgo8c3ZnIHdpZHRoPSIyNTZweCIgaGVpZ2h0PSIzNjFweCIgdmlld0JveD0iMCAwIDI1NiAzNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgogICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTI1NS41NTQ4MTMsNzAuNzY1NzE0MyBMMjMyLjMxMzY3LDMzMS4xMjU0NTEgTDEyNy44NDM4NjgsMzYwLjA4NzkxMiBMMjMuNjYxNzE0MywzMzEuMTY2MjQyIEwwLjQ0NTE4NjgxMyw3MC43NjU3MTQzIEwyNTUuNTU0ODEzLDcwLjc2NTcxNDMgTDI1NS41NTQ4MTMsNzAuNzY1NzE0MyBaIiBmaWxsPSIjRTQ0RDI2Ij48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTEyOCwzMzcuOTUwMjQyIEwyMTIuNDE2NzAzLDMxNC41NDY2MzcgTDIzMi4yNzc4MDIsOTIuMDU3MzE4NyBMMTI4LDkyLjA1NzMxODcgTDEyOCwzMzcuOTUwMjQyIEwxMjgsMzM3Ljk1MDI0MiBaIiBmaWxsPSIjRjE2NTI5Ij48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTgyLjgyMDIxOTgsMTU1LjkzMjEzMiBMMTI4LDE1NS45MzIxMzIgTDEyOCwxMjMuOTk0NzI1IEw0Ny45MTcwMTEsMTIzLjk5NDcyNSBMNDguNjgxNDk0NSwxMzIuNTYyOTg5IEw1Ni41MzA5ODksMjIwLjU3MjgzNSBMMTI4LDIyMC41NzI4MzUgTDEyOCwxODguNjM2MTMyIEw4NS43Mzg5MDExLDE4OC42MzYxMzIgTDgyLjgyMDIxOTgsMTU1LjkzMjEzMiBMODIuODIwMjE5OCwxNTUuOTMyMTMyIFoiIGZpbGw9IiNFQkVCRUIiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNOTAuMDE3NzU4MiwyMzYuNTQxODkgTDU3Ljk1Nzk3OCwyMzYuNTQxODkgTDYyLjQzMjM1MTYsMjg2LjY4NzY0OCBMMTI3Ljg1MzAxMSwzMDQuODQ4ODc5IEwxMjgsMzA0LjgwODA4OCBMMTI4LDI3MS41ODAxMzIgTDEyNy44NjAwNDQsMjcxLjYxNzQwNyBMOTIuMjkxNTE2NSwyNjIuMDEzMTg3IEw5MC4wMTc3NTgyLDIzNi41NDE4OSBMOTAuMDE3NzU4MiwyMzYuNTQxODkgWiIgZmlsbD0iI0VCRUJFQiI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik0yNC4xODA3NDczLDAgTDQwLjQxMDcyNTMsMCBMNDAuNDEwNzI1MywxNi4wMzUxNjQ4IEw1NS4yNTczMTg3LDE2LjAzNTE2NDggTDU1LjI1NzMxODcsMCBMNzEuNDg4LDAgTDcxLjQ4OCw0OC41NTg0MTc2IEw1NS4yNTgwMjIsNDguNTU4NDE3NiBMNTUuMjU4MDIyLDMyLjI5ODE5NzggTDQwLjQxMTQyODYsMzIuMjk4MTk3OCBMNDAuNDExNDI4Niw0OC41NTg0MTc2IEwyNC4xODE0NTA1LDQ4LjU1ODQxNzYgTDI0LjE4MTQ1MDUsMCBMMjQuMTgwNzQ3MywwIEwyNC4xODA3NDczLDAgWiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik05Mi44MzA5NDUxLDE2LjEwMjY4MTMgTDc4LjU0Mjc2OTIsMTYuMTAyNjgxMyBMNzguNTQyNzY5MiwwIEwxMjMuMzU2ODM1LDAgTDEyMy4zNTY4MzUsMTYuMTAyNjgxMyBMMTA5LjA2MjMzLDE2LjEwMjY4MTMgTDEwOS4wNjIzMyw0OC41NTg0MTc2IEw5Mi44MzE2NDg0LDQ4LjU1ODQxNzYgTDkyLjgzMTY0ODQsMTYuMTAyNjgxMyBMOTIuODMwOTQ1MSwxNi4xMDI2ODEzIEw5Mi44MzA5NDUxLDE2LjEwMjY4MTMgWiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik0xMzAuNDY5Mjc1LDAgTDE0Ny4zOTI3MDMsMCBMMTU3LjgwMjkwMSwxNy4wNjE5NzggTDE2OC4yMDI1NDksMCBMMTg1LjEzMjMwOCwwIEwxODUuMTMyMzA4LDQ4LjU1ODQxNzYgTDE2OC45NjkxNDMsNDguNTU4NDE3NiBMMTY4Ljk2OTE0MywyNC40OTAxOTc4IEwxNTcuODAyOTAxLDQxLjc1NTQyODYgTDE1Ny41MjM2OTIsNDEuNzU1NDI4NiBMMTQ2LjM0OTcxNCwyNC40OTAxOTc4IEwxNDYuMzQ5NzE0LDQ4LjU1ODQxNzYgTDEzMC40NjkyNzUsNDguNTU4NDE3NiBMMTMwLjQ2OTI3NSwwIEwxMzAuNDY5Mjc1LDAgWiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik0xOTMuMjA5NjcsMCBMMjA5LjQ0NDU3MSwwIEwyMDkuNDQ0NTcxLDMyLjUwNzc4MDIgTDIzMi4yNjg2NTksMzIuNTA3NzgwMiBMMjMyLjI2ODY1OSw0OC41NTg0MTc2IEwxOTMuMjA5NjcsNDguNTU4NDE3NiBMMTkzLjIwOTY3LDAgTDE5My4yMDk2NywwIFoiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNMTI3Ljg4OTU4MiwyMjAuNTcyODM1IEwxNjcuMjE2NTI3LDIyMC41NzI4MzUgTDE2My41MDk0NTEsMjYxLjk5Mjc5MSBMMTI3Ljg4OTU4MiwyNzEuNjA2ODU3IEwxMjcuODg5NTgyLDMwNC44MzM0MDcgTDE5My4zNjIyODYsMjg2LjY4NzY0OCBMMTkzLjg0MjYzNywyODEuMjkxOTU2IEwyMDEuMzQ3NTE2LDE5Ny4yMTIxMzIgTDIwMi4xMjY3NjksMTg4LjYzNjEzMiBMMTI3Ljg4OTU4MiwxODguNjM2MTMyIEwxMjcuODg5NTgyLDIyMC41NzI4MzUgTDEyNy44ODk1ODIsMjIwLjU3MjgzNSBaIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTEyNy44ODk1ODIsMTU1Ljg1NDA2NiBMMTI3Ljg4OTU4MiwxNTUuOTMyMTMyIEwyMDUuMDMyNzkxLDE1NS45MzIxMzIgTDIwNS42NzM0OTUsMTQ4Ljc1MzU4MiBMMjA3LjEyODYxNSwxMzIuNTYyOTg5IEwyMDcuODkyMzk2LDEyMy45OTQ3MjUgTDEyNy44ODk1ODIsMTIzLjk5NDcyNSBMMTI3Ljg4OTU4MiwxNTUuODU0MDY2IEwxMjcuODg5NTgyLDE1NS44NTQwNjYgWiIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4K') 50% 1.6em no-repeat;
138 |       background-size: 1.5em;
139 |     }
140 | 
141 |     .result[data-result-type="a11y"] > aside {
142 |       background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIiA/Pgo8c3ZnIHdpZHRoPSIyNTZweCIgaGVpZ2h0PSIxMzdweCIgdmlld0JveD0iMCAwIDI1NiAxMzciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgogICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTY3LjY1NDI3NDUsMS42MTAyOTAyIEw5MS44NzI4Nzg0LDgzLjk2Mzk4NDMgTDExNi4xMDE1MjIsMS42MTAyOTAyIEwxMzMuNjMyLDEuNjEwMjkwMiBMOTMuNTM5Mzg4MiwxMzYuOTEwODA4IEw5MS44NzA4NzA2LDEzNi45MTA4MDggTDY2LjgxMjk4ODIsNTMuMDY1Mjg2MyBMNDEuNzU3MTEzNywxMzYuOTEwODA4IEw0MC4wODY1ODgyLDEzNi45MTA4MDggTDAsMS42MTAyOTAyIEwxNy41NDA1MTc2LDEuNjEwMjkwMiBMNDEuNzU3MTEzNyw4My45NjM5ODQzIEw1OC4xMjkwNjY3LDI4LjUxMTM3MjUgTDUwLjExMTc0OSwxLjYxMjI5ODA0IEw2Ny42NTQyNzQ1LDEuNjEyMjk4MDQgTDY3LjY1NDI3NDUsMS42MTAyOTAyIFoiIGZpbGw9IiMwMDVBOUMiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNMTgzLjQyNjUxLDkzLjQ3OTE1MjkgQzE4My40MjY1MSwxMDUuNzM1MDI3IDE4MC4xNjU3NzMsMTE2LjAzNTI2MyAxNzMuNjY0Mzc2LDEyNC4zODc4OSBDMTY3LjE0MjkwMiwxMzIuNzM2NTAyIDE1OC43MDU5NDUsMTM2LjkxMDgwOCAxNDguMzUxNDk4LDEzNi45MTA4MDggQzE0MC41NTcwNTEsMTM2LjkxMDgwOCAxMzMuNzY4NTMzLDEzNC40MjUwOTggMTI3Ljk3NTkwNiwxMjkuNDc3NzczIEMxMjIuMTgzMjc4LDEyNC41MTg0IDExNy44OTY1MzMsMTE3LjgwODE4OCAxMTUuMTEzNjYzLDEwOS4zNTUxNjkgTDEyOC44MDcxNTMsMTAzLjY3NDk4IEMxMzAuODE3MDA0LDEwOC43OTg5OTYgMTMzLjQ1OTMyNSwxMTIuODM0NzYxIDEzNi43NDQxNTcsMTE1Ljc3ODI1OSBDMTQwLjAyODk4OCwxMTguNzI3NzggMTQzLjg5MjA3OCwxMjAuMjA5NTY5IDE0OC4zNTE0OTgsMTIwLjIwOTU2OSBDMTUzLjAyNzc2NSwxMjAuMjA5NTY5IDE1Ni45ODUyMjQsMTE3LjU4NzMyNSAxNjAuMjE1ODQzLDExMi4zNTY4OTQgQzE2My40NDY0NjMsMTA3LjEyNDQ1NSAxNjUuMDU2NzUzLDEwMC44MzU4OSAxNjUuMDU2NzUzLDkzLjQ4MTE2MDggQzE2NS4wNTY3NTMsODUuMzUxNDAzOSAxNjMuMzI4LDc5LjA2Njg1NDkgMTU5Ljg3MjUwMiw3NC42MDk0NDMxIEMxNTUuODY2ODU1LDY5LjM4MTAxOTYgMTQ5LjU3NDI3NSw2Ni43NTQ3NjA4IDE0MS4wMDQ4LDY2Ljc1NDc2MDggTDEzNC4zMjQ3MDYsNjYuNzU0NzYwOCBMMTM0LjMyNDcwNiw1OC43NDE0NTg4IEwxNTcuNzA4MDQ3LDE4LjMxNzU1MjkgTDEyOS40NzM3NTcsMTguMzE3NTUyOSBMMTIxLjYyMTA4MiwzMS42Nzk3NDkgTDExNi42MTU1MjksMzEuNjc5NzQ5IEwxMTYuNjE1NTI5LDEuNjEwMjkwMiBMMTgxLjc1MTk2OSwxLjYxMDI5MDIgTDE4MS43NTE5NjksOS43OTIyNTA5OCBMMTU3LjAzNTQyLDUyLjM5MjY1ODggQzE2NS43MTczMzMsNTUuMTczNTIxNiAxNzIuMjg2OTk2LDYwLjI0NTMzMzMgMTc2Ljc0MjQsNjcuNTk0MDM5MiBDMTgxLjE5OTgxMiw3NC45NDA3MzczIDE4My40MjY1MSw4My41NjI0MTU3IDE4My40MjY1MSw5My40NzkxNTI5IEwxODMuNDI2NTEsOTMuNDc5MTUyOSBaIiBmaWxsPSIjMDA1QTlDIj48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTI1MS40MDQwNDcsMC44NTMzMzMzMzMgTDI1NC4yNDMxMzcsMTguMTIwNzg0MyBMMjQ0LjE4Nzg1OSwzNy4zNjE5NDUxIEMyNDQuMTg3ODU5LDM3LjM2MTk0NTEgMjQwLjMyNDc2OSwyOS4yMDIwNzA2IDIzMy45MTM3MjUsMjQuNjg0NDIzNSBDMjI4LjUwNjYwNCwyMC44NzE1Mjk0IDIyNC45ODQ4NDcsMjAuMDQ4MzEzNyAyMTkuNDg1MzY1LDIxLjE3ODcyOTQgQzIxMi40MDM3MDIsMjIuNjQ0NDU0OSAyMDQuMzk0NDE2LDMxLjA5MzQ1ODggMjAwLjg5Njc1Myw0MS41MTgxODA0IEMxOTYuNzEyNDA4LDUzLjk4Njg4NjMgMTk2LjY3MjI1MSw2MC4wMjY0Nzg0IDE5Ni41MjM2NzEsNjUuNTY4MTI1NSBDMTk2LjI5Mjc2OSw3NC40NTg4NTQ5IDE5Ny42ODgyMiw3OS43MDkzNjQ3IDE5Ny42ODgyMiw3OS43MDkzNjQ3IEMxOTcuNjg4MjIsNzkuNzA5MzY0NyAxOTEuNTg0Mzc2LDY4LjQxMzIzOTIgMTkxLjY0MjYwNCw1MS44Njg2MTE4IEMxOTEuNjc4NzQ1LDQwLjA1ODQ3ODQgMTkzLjU0NDAzMSwyOS4zNDQ2Mjc1IDE5OS4wMDMzNTcsMTguNzgxMzY0NyBDMjAzLjgxNDE0OSw5LjQ5MTA3NDUxIDIxMC45NTAwMjQsMy45MTUyOTQxMiAyMTcuMjkyOCwzLjI2NDc1Mjk0IEMyMjMuODQ2NCwyLjU3NjA2Mjc1IDIyOS4wMzQ2NjcsNS43MzIzOTIxNiAyMzMuMDM2Mjk4LDkuMTYzNzk2MDggQzIzNy4yMzA2ODIsMTIuNzUzODE5NiAyNDEuNDk1MzQxLDIwLjYwNDQ4NjMgMjQxLjQ5NTM0MSwyMC42MDQ0ODYzIEwyNTEuNDA0MDQ3LDAuODUzMzMzMzMzIEwyNTEuNDA0MDQ3LDAuODUzMzMzMzMzIFoiIGZpbGw9IiMyMjFCMEEiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNMjUyLjYzMjg0Nyw5OC41ODMwOTAyIEMyNTIuNjMyODQ3LDk4LjU4MzA5MDIgMjQ4LjE5OTUyOSwxMDYuNTI4MTI1IDI0NS40MjY2OTgsMTA5LjU4NjA3MSBDMjQyLjY1Nzg4MiwxMTIuNjQ2MDI0IDIzNy42OTg1MSwxMTguMDM3MDgyIDIzMS41ODA2MTIsMTIwLjczOTYzOSBDMjI1LjQ1ODY5OCwxMjMuNDM2MTczIDIyMi4yNTIxNzMsMTIzLjk0ODE3MyAyMTYuMTk4NTI1LDEyMy4zNjE4ODIgQzIxMC4xNTQ5MTgsMTIyLjc3OTYwOCAyMDQuNTM4OTgsMTE5LjI4MTk0NSAyMDIuNTczMzAyLDExNy44MTIyMDQgQzIwMC42MDc2MjQsMTE2LjM2MjU0MSAxOTUuNTczOTYxLDExMi4wNjE3NDEgMTkyLjc0MDg5NCwxMDguMDY2MTMzIEMxODkuODg5NzU3LDEwNC4wNTA0NDcgMTg1LjQ0NDM5Miw5Ni4wMjkxMTM3IDE4NS40NDQzOTIsOTYuMDI5MTEzNyBDMTg1LjQ0NDM5Miw5Ni4wMjkxMTM3IDE4Ny45MjAwNjMsMTA0LjA2MjQ5NCAxODkuNDc0MTMzLDEwNy40NzE4MTIgQzE5MC4zNjE2LDEwOS40MzM0NzUgMTkzLjEwODMyOSwxMTUuNDMyOTEgMTk3LjAwMTUzNywxMjAuNjY3MzU3IEMyMDAuNjI1Njk0LDEyNS41MzYzNzYgMjA3LjY3MzIyNCwxMzMuOTI3MTUzIDIxOC4zODkwODIsMTM1LjgxNjUzMyBDMjI5LjEwMjkzMywxMzcuNzEzOTQ1IDIzNi40NjM2ODYsMTMyLjkwNzE2OSAyMzguMjgwNzg0LDEzMS43Mzg2MDQgQzI0MC4xMDE4OTgsMTMwLjU3ODA3MSAyNDMuOTQwODk0LDEyNy4zNjU1MjIgMjQ2LjM3NjQwOCwxMjQuNzYxMzQ5IEMyNDguOTE0MzIyLDEyMi4wNDg3NTMgMjUxLjMxMzY5NCwxMTguNTc5MiAyNTIuNjMyODQ3LDExNi41MTMxMjkgQzI1My42MTA2NjcsMTE0Ljk5MTE4NCAyNTUuMTk0ODU1LDExMS45MjMyIDI1NS4xOTQ4NTUsMTExLjkyMzIgTDI1Mi42MzI4NDcsOTguNTgzMDkwMiBMMjUyLjYzMjg0Nyw5OC41ODMwOTAyIFoiIGZpbGw9IiMyMjFCMEEiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+Cg==') 50% 1.6em no-repeat;
143 |       background-size: 1.5em;
144 |     }
145 | 
146 |     .notes > code {
147 |       margin-left: 2em;
148 |     }
149 | 
150 |     .selector {
151 |       padding-left: 1.1em;
152 |       background:
153 |       url('data:image/svg+xml;base64,PCEtLQpDcmVhdGVkIGJ5IEF1c3RpbiBDb25kaWZmLCBmcm9tIHRoZSBOb3VuIFByb2plY3QKLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMTAwIDEyNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTUxLDhDMjguMjM0LDgsOSwyNy4yMzMsOSw1MHMxOS4yMzQsNDIsNDIsNDJzNDItMTkuMjMzLDQyLTQyUzczLjc2Niw4LDUxLDh6IE01Myw4Ny45NDNWNjkuNzE4ICBjMC0xLjEwNC0wLjg5Ni0yLTItMnMtMiwwLjg5Ni0yLDJ2MTguMjI2QzI5Ljk1MSw4Ni44OTgsMTQuMTAyLDcxLjA0OSwxMy4wNTcsNTJIMzJjMS4xMDQsMCwyLTAuODk2LDItMnMtMC44OTYtMi0yLTJIMTMuMDU3ICBDMTQuMTAyLDI4Ljk1MSwyOS45NTEsMTMuMTAyLDQ5LDEyLjA1N1YzMGMwLDEuMTA0LDAuODk2LDIsMiwyczItMC44OTYsMi0yVjEyLjA1N0M3Mi4wNDksMTMuMTAyLDg3Ljg5OCwyOC45NTEsODguOTQzLDQ4SDcwICBjLTEuMTA0LDAtMiwwLjg5Ni0yLDJzMC44OTYsMiwyLDJoMTguOTQzQzg3Ljg5OCw3MS4wNDksNzIuMDQ5LDg2Ljg5OCw1Myw4Ny45NDN6Ii8+PC9zdmc+') 0 0 no-repeat;
154 |       background-size: 1.1em;
155 |     }
156 | 
157 |     .selector input {
158 |       appearance: none;
159 |       -moz-appearance: none;
160 |       -webkit-appearance: none;
161 |       font: inherit;
162 |       width: 50%;
163 |       border: 0;
164 |       background: none;
165 |     }
166 | 
167 |     pre {
168 |       overflow: auto;
169 |       padding-left: 2.5em;
170 |       background: url('data:image/svg+xml;base64,PCEtLQpDcmVhdGVkIGJ5IEF1c3RpbiBDb25kaWZmLCBmcm9tIHRoZSBOb3VuIFByb2plY3QKLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMTAwIDEyNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTExLjE0Niw0NS44OThsMjEuMDczLTE0LjA3MmMwLjkxOC0wLjYxMywxLjE2Ni0xLjg1NSwwLjU1Mi0yLjc3NGMtMC42MTMtMC45MTgtMS44NTQtMS4xNjctMi43NzQtMC41NTIgIEw4LjkyNCw0Mi41NzJjLTEuNzk4LDEuMi0yLjg3MSwzLjIwOC0yLjg3MSw1LjM3YzAsMi4xNjIsMS4wNzMsNC4xNywyLjg3MSw1LjM3bDIxLjA3MywxNC4wNzJjMC4zNDEsMC4yMjgsMC43MjcsMC4zMzcsMS4xMDksMC4zMzcgIGMwLjY0NiwwLDEuMjgtMC4zMTIsMS42NjUtMC44ODljMC42MTQtMC45MTksMC4zNjYtMi4xNjEtMC41NTItMi43NzRMMTEuMTQ2LDQ5Ljk4NWMtMC42OTQtMC40NjQtMS4wOTMtMS4yMDgtMS4wOTMtMi4wNDQgIEMxMC4wNTMsNDcuMTA2LDEwLjQ1Miw0Ni4zNjIsMTEuMTQ2LDQ1Ljg5OHoiLz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNOTAuMDc2LDQyLjU3Mkw2OS4wMDIsMjguNWMtMC45MTgtMC42MTQtMi4xNjEtMC4zNjYtMi43NzQsMC41NTJjLTAuNjE0LDAuOTE5LTAuMzY2LDIuMTYxLDAuNTUyLDIuNzc0ICBsMjEuMDczLDE0LjA3MmMwLjY5NCwwLjQ2NCwxLjA5MywxLjIwOCwxLjA5MywyLjA0M2MwLDAuODM1LTAuMzk4LDEuNTgtMS4wOTMsMi4wNDRMNjYuNzgxLDY0LjA1OCAgYy0wLjkxOCwwLjYxMy0xLjE2NiwxLjg1NS0wLjU1MiwyLjc3NGMwLjM4NSwwLjU3NywxLjAxOSwwLjg4OSwxLjY2NSwwLjg4OWMwLjM4MSwwLDAuNzY4LTAuMTA5LDEuMTA5LTAuMzM3bDIxLjA3My0xNC4wNzIgIGMxLjc5OC0xLjIsMi44NzEtMy4yMDgsMi44NzEtNS4zN0M5Mi45NDcsNDUuNzgsOTEuODc0LDQzLjc3Miw5MC4wNzYsNDIuNTcyeiIvPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik01OS4yMjEsMTcuODM0Yy0xLjA1Mi0wLjMzNS0yLjE3NywwLjI0NS0yLjUxMywxLjI5N0wzOC40ODEsNzYuMjQxYy0wLjMzNiwxLjA1MiwwLjI0NSwyLjE3NywxLjI5NywyLjUxMyAgYzAuMjAyLDAuMDY0LDAuNDA3LDAuMDk1LDAuNjA4LDAuMDk1YzAuODQ3LDAsMS42MzMtMC41NDIsMS45MDUtMS4zOTNsMTguMjI3LTU3LjEwOUM2MC44NTQsMTkuMjk1LDYwLjI3MywxOC4xNyw1OS4yMjEsMTcuODM0eiIvPjwvc3ZnPg==') 0 0 no-repeat;
171 |       background-size: 1.5em;
172 |     }
173 |   </style>
174 | 
175 |   <script>
176 |     function backToListing() {
177 |         history.back();
178 | 
179 |         // If there is no history, we try to reach the `index.html` page.
180 |         setTimeout(
181 |             function () {
182 |                 window.location = 'index.html'
183 |             },
184 |             1000
185 |         );
186 |     }
187 | 
188 |     function toggleFilter(name) {
189 |         var classList = document.querySelector('#results').classList;
190 | 
191 |         if (true === document.querySelector('#filter-' + name).checked) {
192 |             classList.remove('filter-' + name);
193 |         } else {
194 |             classList.add('filter-' + name);
195 |         }
196 |     }
197 | 
198 |     function sortByDocumentOrder() {
199 |         var results = document.querySelectorAll('.result');
200 |         var getIndexOf = function (resultIndex) {
201 |             return parseInt(results.item(resultIndex).getAttribute('data-result-index'));
202 |         };
203 | 
204 |         document.querySelector('#results').innerHTML =
205 |             Object
206 |                 .keys(results)
207 |                 .sort(
208 |                     function (a, b) {
209 |                         return getIndexOf(a) < getIndexOf(b) ? -1 : 1;
210 |                     }
211 |                 )
212 |                 .map(
213 |                     function (i) {
214 |                         return results.item(i).outerHTML;
215 |                     }
216 |                 )
217 |                 .join('\n');
218 |     }
219 | 
220 |     function sortByCategory() {
221 |         var results = document.querySelectorAll('.result');
222 |         var getCategoryOf = function (resultIndex) {
223 |             return results.item(resultIndex).getAttribute('data-result-level');
224 |         };
225 | 
226 |         document.querySelector('#results').innerHTML =
227 |             Object
228 |                 .keys(results)
229 |                 .sort(
230 |                     function (a, b) {
231 |                         var categoryA = getCategoryOf(a);
232 |                         var categoryB = getCategoryOf(b);
233 | 
234 |                         if ('error' === categoryA) {
235 |                             return -1;
236 |                         } else if ('warning' === categoryA) {
237 |                             if ('error' === categoryB) {
238 |                                 return 1;
239 |                             }
240 | 
241 |                             return -1;
242 |                         }
243 | 
244 |                         if ('notice' === categoryB) {
245 |                             return -1;
246 |                         }
247 | 
248 |                         return 1;
249 |                     }
250 |                 )
251 |                 .map(
252 |                     function (i) {
253 |                         return results.item(i).outerHTML;
254 |                     }
255 |                 )
256 |                 .join('\n');
257 |     }
258 |   </script>
259 | </head>
260 | 
261 | <body>
262 |   <h1>
263 |     Accessibility report for
264 |     “<a href="<%- url %>" title="Visit the page targeted by the report"><%- url %></a>”
265 |   </h1>
266 |   <p class="infos">Generated at <%- date %>.</p>
267 | 
268 |   <svg viewBox="0 0 64 64" class="pie" data-result-level="error">
269 |     <title>
270 |       <%- errorCount %> errors,
271 |       <%- warningCount %> warnings,
272 |       <%- noticeCount %> notices.
273 |     </title>
274 |     <circle
275 |       r="25%" cx="50%" cy="50%"
276 |       stroke-dashoffset="0"
277 |       stroke-dasharray="<%- errorPercentage %> 100"
278 |       data-result-level="error" />
279 |     <circle
280 |       r="25%" cx="50%" cy="50%"
281 |       stroke-dashoffset="<%- -errorPercentage %>"
282 |       stroke-dasharray="<%- warningPercentage %> 100"
283 |       data-result-level="warning" />
284 |     <circle
285 |       r="25%" cx="50%" cy="50%"
286 |       stroke-dashoffset="<%- -(errorPercentage + warningPercentage) %>"
287 |       stroke-dasharray="<%- noticePercentage %> 100"
288 |       data-result-level="notice" />
289 |     <circle
290 |       r="15%" cx="50%" cy="50%"
291 |       stroke="white"
292 |       style="stroke-width: 19" />
293 |     <g data-result-text-level="error">
294 |       <text x="50%" y="45%"><%- errorCount %></text>
295 |       <text x="50%" y="55%">errors</text>
296 |     </g>
297 |     <g data-result-text-level="warning">
298 |       <text x="50%" y="45%"><%- warningCount %></text>
299 |       <text x="50%" y="55%">warnings</text>
300 |     </g>
301 |     <g data-result-text-level="notice">
302 |       <text x="50%" y="45%"><%- noticeCount %></text>
303 |       <text x="50%" y="55%">notices</text>
304 |     </g>
305 |   </svg>
306 | 
307 |   <div id="controls">
308 |     <p>
309 |       <a href="javascript:backToListing()">Back to report listing</a>
310 |     </p>
311 |     <p>
312 |       Filter by:
313 |       <input
314 |         type="checkbox"
315 |         id="filter-errors"
316 |         checked="checked"
317 |         onclick="toggleFilter('errors')" />
318 |       <label for="filter-errors">errors</label>
319 |       <input
320 |         type="checkbox"
321 |         id="filter-warnings"
322 |         checked="checked"
323 |         onclick="toggleFilter('warnings')" />
324 |       <label for="filter-warnings">warnings</label>
325 |       <input
326 |         type="checkbox"
327 |         id="filter-notices"
328 |         checked="checked"
329 |         onclick="toggleFilter('notices')" />
330 |       <label for="filter-notices">notices</label>
331 |     </p>
332 |     <p>
333 |       Sort by:
334 |       <input
335 |         type="radio"
336 |         id="sort-by-document-order"
337 |         name="sort-by"
338 |         value="document-order"
339 |         checked="checked"
340 |         onclick="sortByDocumentOrder()" />
341 |       <label for="sort-by-document-order">document order</label>
342 |       <input
343 |         type="radio"
344 |         id="sort-by-category"
345 |         name="sort-by"
346 |         value="category"
347 |         onclick="sortByCategory()" />
348 |       <label for="sort-by-category">category</label>
349 |     </p>
350 |   </div>
351 | 
352 |   <ul id="results">
353 |     <%
354 |       _.each(
355 |           results,
356 |           function (result, index) {
357 |               %>
358 |               <li class="result" data-result-type="<%- result.type %>" data-result-level="<%- result.level %>" data-result-index="<%- index %>">
359 |                 <aside><%- result.type %></aside>
360 |                 <h2><%- result.level.charAt(0).toUpperCase() + result.level.substring(1).toLowerCase() %>: <%- result.message %></h2>
361 |                 <% if ('a11y' === result.type) { %>
362 | 
363 |                   <p class="notes">Note codes: <%=
364 |                     _.map(
365 |                         result.noteCodes,
366 |                         function (noteCode) {
367 |                             return '<a href="http://www.w3.org/TR/WCAG20-TECHS/' + noteCode + '.html">' + noteCode + '</a>';
368 |                         }
369 |                     )
370 |                     .join(', ')
371 |                   %> <code>#<%- result.code %></code></p>
372 |                   <p class="selector"><input type="text" class="selector" value="<%- result.selector %>" readonly="readonly" /></p>
373 |                   <pre><%- result.context %></pre>
374 | 
375 |                 <% } else if ('html' === result.type) { %>
376 | 
377 |                   <pre><%- result.context %></pre>
378 | 
379 |                 <% } %>
380 |               </li>
381 |               <%
382 |           }
383 |       )
384 |     %>
385 |   </ul>
386 | </body>
387 | </html>
388 | 


--------------------------------------------------------------------------------