1- # HTML_CodeSniffer README
1+ # HTML_CodeSniffer
22
33## What is HTML_CodeSniffer?
44
55HTML_CodeSniffer is a JavaScript application that checks a HTML document
66or source code, and detects violations of a defined presentation or accessibility
7- standard.
7+ standard, such as Section508 or WCAG2.0 .
88
9- ### Standards included
9+ ## Standards included
1010
11- By default, HTML \_ CodeSniffer comes with standards that cover the three conformance
11+ By default, HTML_CodeSniffer comes with standards that cover the three conformance
1212levels of the <abbr title =" World Wide Web Consortium " >W3C</abbr > [ Web Content Accessibility Guidelines (WCAG) 2.0] ( http://www.w3.org/TR/WCAG20 ) ,
1313and the <abbr title =" United States of America " >U.S.</abbr > [ Section 508] ( http://section508.gov/index.cfm?fuseAction=stdsdoc ) legislation.
1414It also provides tools to write your own standards, which can be useful in situations
1515where you wish to enforce consistency across a web site.
1616
17- ### Using HTML_CodeSniffer
17+ ## Using HTML_CodeSniffer
1818
19- HTML \_ CodeSniffer can be called in multiple ways:
19+ HTML_CodeSniffer can be called in multiple ways:
2020* Called directly in JavaScript source, HTML_CodeSniffer will provide a list of known
2121 and potential violations to the calling script.
2222* It also comes with a pop-up auditor interface, accessible via a bookmarklet,
2323 letting you browse through messages emitted from one of the defined standards.
2424 Where possible, the auditor also points you to the HTML element causing the problem.
2525* It can also be run on the command line with the assistance of a headless browser app.
26- * Using npm:
27- ```
28- $ npm i -g npm
29- $ npm i --save html_codesniffer
30- ```
31-
32- ### Licence
26+ * Using as a Node.js module, installed with npm: ` npm i --save html_codesniffer `
3327
34- HTML_CodeSniffer is released under a BSD-style licence. For more information,
35- please see the file "licence.txt".
3628
3729## Using the source code
3830
3931### Building the auditor
4032
41- The HTML\_ CodeSniffer auditor can be built using [ node.js] ( https://nodejs.org/ ) and the Grunt
42- tasker (http://gruntjs.com/ ). It has been tested with the latest version of node.js
43- (at time of writing: version 6.0) and Grunt, but should also work with recent
44- earlier versions.
45-
46- * Install node.js with your package manager of choice.
47- * You may need to update the Node.js package manager (npm) itself:
48- <code >npm update -g npm</code >
49- * Install the Grunt CLI helper if you haven't already done so:
50- <code >npm install -g grunt-cli</code >
51- * Get node.js to install the dependencies Grunt needs:
52- <code >npm install</code >
53- * Run Grunt to build the auditor:
54- <code >grunt build</code >
55-
56- You should see two new directories: <code >node_modules</code > (containing the node.js
57- dependencies), and <code >build</code > (containing your auditor). You can then move
58- (or symlink as appropriate) your <code >build</code > directory to a web-accessible
33+ The HTML_CodeSniffer auditor can be built using [ Node.js] ( https://nodejs.org/ ) and [ Grunt
34+ task runner] ( http://gruntjs.com/ ) . It has been tested with the recent version of Node.js
35+ (starting from version 6.0) and Grunt.
36+
37+ * Install Node.js with your package manager of choice, for example ` sudo apt-get install nodejs `
38+ * You may need to update the Node.js package manager (npm) itself: ` npm install -g npm `
39+ * Install the Grunt CLI helper if you haven't already done so: ` npm install -g grunt-cli `
40+ * Get Node.js to install the dependencies Grunt needs: ` npm install `
41+ * Run Grunt to build the auditor: ` grunt build `
42+
43+ You should see two new directories: ` node_modules ` (containing the Node.js
44+ dependencies), and ` build ` (containing your auditor). You can then move
45+ (or symlink as appropriate) your ` build ` directory to a web-accessible
5946location.
6047
6148Then grab or copy the JavaScript from the auditor bookmarklet from the [ HTML_CodeSniffer site] ( https://squizlabs.github.io/HTML_CodeSniffer ) ,
6249replace the directory at the start (//squizlabs.github.io/HTML_CodeSniffer/build) with your local URL, and save as a new bookmarklet.
6350
64- #### Debug build
51+ ### Debug build
6552
66- If you are developing using HTML \_ CodeSniffer and require the code not minified for
67- debugging purposes, follow the above steps, but run < code > grunt build-debug</ code >
53+ If you are developing using HTML_CodeSniffer and require the code not minified for
54+ debugging purposes, follow the above steps, but run ` grunt build-debug `
6855(instead of just build). This will combine the files as normal, but not minify them.
6956
70- ### Command-Line processing
57+ ## Command-Line processing
7158
7259** Note:** These examples assume a built version of HTMLCS exported to ` ./build/HTMLCS.js `
7360
74- #### PhantomJS
61+ ### PhantomJS
7562
7663You will need [ PhantomJS] ( http://www.phantomjs.org/ ) installed if you wish to
7764use the contributed command-line script. PhantomJS provides a headless Webkit-based
7865browser to run the scripts in, so it should provide results that are similar to
7966recent (or slightly less than recent) versions of Safari.
8067
81- See the < code > Contrib/PhantomJS/HTMLCS_Run.js</ code > file for more information.
68+ See the ` Contrib/PhantomJS/HTMLCS_Run.js ` file for more information.
8269
83- #### Headless Google Chrome via Puppeteer
70+ ### Headless Google Chrome via Puppeteer
8471
8572[ Puppeteer] ( https://developers.google.com/web/tools/puppeteer/get-started ) offers an
8673easy way to interact with the page via Google Chrome.
@@ -113,7 +100,7 @@ const url = 'https://www.squiz.net';
113100 page .on (' console' , msg => {
114101 console .log (msg .text ())
115102 });
116-
103+
117104 await page .goto (url);
118105
119106 await page .addScriptTag ({
@@ -128,13 +115,14 @@ const url = 'https://www.squiz.net';
128115})();
129116```
130117
131- #### Node & JSDom
118+ ### Node.js & JSDom
132119
133- HTML_CodeSniffer requires a dom to run, however, it is possible to run it entirely
134- server side without a headless browser using Node on arbitrary fragments of HTML using
120+ HTML_CodeSniffer requires a DOM to run, however, it is possible to run it entirely
121+ server side without a headless browser using Node.js on arbitrary fragments of HTML using
135122an environment wrapper like [ JSDom] ( https://github.com/jsdom/jsdom ) .
136123
137- An example node script:
124+ An example Node.js script:
125+
138126``` javascript
139127var jsdom = require (' jsdom' );
140128var { JSDOM } = jsdom;
@@ -157,7 +145,7 @@ dom.window.eval(HTMLCS);
157145dom .window .HTMLCS_RUNNER .run (' WCAG2AA' );
158146```
159147
160- ### Translations
148+ ## Translations
161149
162150HTML_CodeSniffer supports _ very_ basic string translations. The auditor will use the current language of the document it is being run in (e.g. ` <html lang="en"> ` ). A language code can be supplied if you need to tell HTML_CodeSniffer which language you want to use.
163151
@@ -168,11 +156,11 @@ HTMLCSAuditor.run('WCAG2AA', null, {
168156});
169157```
170158
171- ** Note:** HTML_CodeSniffer only has english (default) and polish language .
159+ ** Note:** HTML_CodeSniffer only has English (default), French, and Polish languages .
172160
173- If other language support is required a custom version can be built by adding more translations in ` Translations/<code> .js ` and using the grunt build process described above.
161+ If other language support is required a custom version can be built by adding more translations in ` Translations/* .js ` and using the grunt build process described above.
174162
175- ### Contributing and reporting issues
163+ ## Contributing and reporting issues
176164
177165To report any issues with using HTML_CodeSniffer, please use the
178166[ HTML_CodeSniffer Issue Tracker] ( http://github.com/squizlabs/HTML_CodeSniffer/issues ) .
@@ -188,10 +176,9 @@ contribute, you do not need to do both.
188176More information on HTML_CodeSniffer can be found on its GitHub site,
189177[ http://squizlabs.github.io/HTML_CodeSniffer/ ] ( http://squizlabs.github.io/HTML_CodeSniffer/ ) . This site provides:
190178
191- - Information on the tests performed (and messages emitted) by HTML_CodeSniffer's standards, organised by conformance level and Success Criterion;
192- - A source test area that allows you to try out HTML_CodeSniffer with your own HTML source code; and
193- - A link to the HTML_CodeSniffer bookmarklet, letting you check other pages using the pop-up auditor interface.
194-
179+ * Information on the tests performed (and messages emitted) by HTML_CodeSniffer's standards, organised by conformance level and Success Criterion;
180+ * A source test area that allows you to try out HTML_CodeSniffer with your own HTML source code; and
181+ * A link to the HTML_CodeSniffer bookmarklet, letting you check other pages using the pop-up auditor interface.
195182
196183## Translation Contributors
197184
@@ -203,3 +190,5 @@ Special thanks to:
203190## License
204191
205192Licensed under [ the BSD 3-Clause "New" or "Revised" License] ( https://opensource.org/licenses/BSD-3-Clause ) .
193+
194+ License text also available in [ the ` license.txt ` file] ( ./license.txt ) .
0 commit comments