Skip to content

Commit e1bb877

Browse files
authored
Merge pull request #249 from paazmaya/247-documentation-update
Documentation update to reflect recent changes
2 parents d2d871c + 7575eba commit e1bb877

3 files changed

Lines changed: 48 additions & 55 deletions

File tree

README.markdown

Lines changed: 42 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,73 @@
1-
# HTML_CodeSniffer README
1+
# HTML_CodeSniffer
22

33
## What is HTML_CodeSniffer?
44

55
HTML_CodeSniffer is a JavaScript application that checks a HTML document
66
or 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
1212
levels of the <abbr title="World Wide Web Consortium">W3C</abbr> [Web Content Accessibility Guidelines (WCAG) 2.0](http://www.w3.org/TR/WCAG20),
1313
and the <abbr title="United States of America">U.S.</abbr> [Section 508](http://section508.gov/index.cfm?fuseAction=stdsdoc) legislation.
1414
It also provides tools to write your own standards, which can be useful in situations
1515
where 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
5946
location.
6047

6148
Then grab or copy the JavaScript from the auditor bookmarklet from the [HTML_CodeSniffer site](https://squizlabs.github.io/HTML_CodeSniffer),
6249
replace 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

7663
You will need [PhantomJS](http://www.phantomjs.org/) installed if you wish to
7764
use the contributed command-line script. PhantomJS provides a headless Webkit-based
7865
browser to run the scripts in, so it should provide results that are similar to
7966
recent (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
8673
easy 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
135122
an environment wrapper like [JSDom](https://github.com/jsdom/jsdom).
136123

137-
An example node script:
124+
An example Node.js script:
125+
138126
```javascript
139127
var jsdom = require('jsdom');
140128
var { JSDOM } = jsdom;
@@ -157,7 +145,7 @@ dom.window.eval(HTMLCS);
157145
dom.window.HTMLCS_RUNNER.run('WCAG2AA');
158146
```
159147

160-
### Translations
148+
## Translations
161149

162150
HTML_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

177165
To 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.
188176
More 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

205192
Licensed 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).

index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ var scriptPath = __dirname+'/build/HTMLCS.js';
44
if (fs.existsSync(scriptPath) === true) {
55
module.exports = require(scriptPath);
66
} else {
7-
throw new Error('HTMLCS must be built using `grunt build` before it can be required in Nodejs.');
8-
}
7+
throw new Error('HTMLCS must be built using `grunt build` before it can be required in Node.js.');
8+
}

package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@
99
],
1010
"scripts": {
1111
"prepack": "grunt build",
12+
"build": "grunt build",
1213
"test": "echo \"Error: no test specified\" && exit 1"
1314
},
15+
"engines": {
16+
"node": ">=6"
17+
},
1418
"files": [
1519
"Auditor",
1620
"build",

0 commit comments

Comments
 (0)