entree 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,173 @@
1
+ # Accessibility Developer Tools
2
+
3
+ This is a library of accessibility-related testing and utility code.
4
+
5
+ Its main component is the accessibility audit: a collection of audit rules checking for common accessibility problems, and an API for running these rules in an HTML page.
6
+
7
+ There is also a collection of accessibility-related utility code, including but not limited to:
8
+ * contrast ratio calculation and color suggestions
9
+ * retrieving and validating ARIA attributes and states
10
+ * accessible name calculation using the algorithm at [http://www.w3.org/TR/wai-aria/roles#textalternativecomputation](http://www.w3.org/TR/wai-aria/roles#textalternativecomputation)
11
+
12
+ # Getting the code
13
+
14
+ To include just the javascript rules, require the following file:
15
+
16
+ https://raw.github.com/GoogleChrome/accessibility-developer-tools/stable/dist/js/axs_testing.js
17
+
18
+ `git 1.6.5` or later:
19
+
20
+ % git clone --recursive https://github.com/GoogleChrome/accessibility-developer-tools.git
21
+
22
+ Before `git 1.6.5`:
23
+
24
+ % git clone https://github.com/GoogleChrome/accessibility-developer-tools.git
25
+ % cd accessibility-developer-tools
26
+ % git submodule init; git submodule update
27
+
28
+ # Building
29
+
30
+ You will need `node` and `grunt-cli` to build.
31
+
32
+ 1. (Once only) Install [Node.js](http://nodejs.org/) and `npm` - useful instructions here: [https://gist.github.com/isaacs/579814](https://gist.github.com/isaacs/579814)
33
+
34
+ Make sure you have Node.js v 0.8 or higher.
35
+
36
+ 2. (Once only) Use `npm` to install `grunt-cli`
37
+
38
+ % npm install -g grunt-cli # May need to be run as root
39
+
40
+ 3. (Every time you make a fresh checkout) Install dependencies (including `grunt`) for this project (run from project root)
41
+
42
+ % npm install
43
+
44
+ 4. Build using `grunt` (run from project root)
45
+
46
+ % grunt
47
+
48
+ # Using the Audit API
49
+
50
+ ## Including the library
51
+
52
+ The simplest option is to include the generated `axs_testing.js` library on your page.
53
+
54
+ Work is underway to include the library in WebDriver and other automated testing frameworks.
55
+
56
+ ## The `axs.Audit.run()` method
57
+
58
+ Once you have included `axs_testing.js`, you can call call `axs.Audit.run()`. This returns an object in the following form:
59
+
60
+ {
61
+ /** @type {axs.constants.AuditResult} */
62
+ result, // one of PASS, FAIL or NA
63
+
64
+ /** @type {Array.<Element>} */
65
+ elements, // The elements which the rule fails on, if result == axs.constants.AuditResult.FAIL
66
+
67
+ /** @type {axs.AuditRule} */
68
+ rule // The rule which this result is for.
69
+ }
70
+
71
+ ### Command Line Runner
72
+
73
+ The Accessibility Developer Tools project includes a command line runner for the audit. To use the runner, [install phantomjs](http://phantomjs.org/download.html) then run the following command from the project root directory.
74
+
75
+ $ phantomjs tools/runner/audit.js <url-or-filepath>
76
+
77
+ The runner will load the specified file or URL in a headless browser, inject axs_testing.js, run the audit and output the report text.
78
+
79
+ ## Using the results
80
+
81
+ ### Interpreting the result
82
+
83
+ The result may be one of three constants:
84
+ * `axs.constants.AuditResult.PASS` - This implies that there were elements on the page that may potentially have failed this audit rule, but they passed. Congratulations!
85
+ * `axs.constants.AuditResult.NA` - This implies that there were no elements on the page that may potentially have failed this audit rule. For example, an audit rule that checks video elements for subtitles would return this result if there were no video elements on the page.
86
+ * `axs.constants.AuditResult.FAIL` - This implies that there were elements on the page that did not pass this audit rule. This is the only result you will probably be interested in.
87
+
88
+ ### Creating a useful error message
89
+
90
+ The static, global `axs.Audit.createReport(results, opt_url)` may be used to create an error message using the return value of axs.Audit.run(). This will look like the following:
91
+
92
+ *** Begin accessibility audit results ***
93
+ An accessibility audit found 4 errors and 4 warnings on this page.
94
+ For more information, please see https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules
95
+
96
+ Error: badAriaAttributeValue (AX_ARIA_04) failed on the following elements (1 - 3 of 3):
97
+ DIV:nth-of-type(3) > INPUT
98
+ DIV:nth-of-type(5) > INPUT
99
+ #aria-invalid
100
+
101
+ Error: badAriaRole (AX_ARIA_01) failed on the following element:
102
+ DIV:nth-of-type(11) > SPAN
103
+
104
+ Error: controlsWithoutLabel (AX_TEXT_01) failed on the following elements (1 - 3 of 3):
105
+ DIV > INPUT
106
+ DIV:nth-of-type(12) > DIV:nth-of-type(3) > INPUT
107
+ LABEL > INPUT
108
+
109
+ Error: requiredAriaAttributeMissing (AX_ARIA_03) failed on the following element:
110
+ DIV:nth-of-type(13) > DIV:nth-of-type(11) > DIV
111
+
112
+ Warning: focusableElementNotVisibleAndNotAriaHidden (AX_FOCUS_01) failed on the following element:
113
+ #notariahidden
114
+
115
+ Warning: imagesWithoutAltText (AX_TEXT_02) failed on the following elements (1 - 2 of 2):
116
+ #deceptive-img
117
+ DIV:nth-of-type(13) > IMG
118
+
119
+ Warning: lowContrastElements (AX_COLOR_01) failed on the following elements (1 - 2 of 2):
120
+ DIV:nth-of-type(13) > DIV
121
+ DIV:nth-of-type(13) > DIV:nth-of-type(3)
122
+
123
+ Warning: nonExistentAriaLabelledbyElement (AX_ARIA_02) failed on the following elements (1 - 2 of 2):
124
+ DIV:nth-of-type(3) > INPUT
125
+ DIV:nth-of-type(5) > INPUT
126
+ *** End accessibility audit results ***
127
+
128
+ Each rule will have at most five elements listed as failures, in the form of a unique query selector for each element.
129
+
130
+ ### Configuring the Audit
131
+
132
+ If you wish to fine-tune the audit, you can create an `axs.AuditConfiguration` object, with the following options:
133
+
134
+ #### Ignore parts of the page for a particular audit rule
135
+
136
+ For example, say you have a separate high-contrast version of your page, and there is a CSS rule which causes certain elements (with class `pretty`) on the page to be low-contrast for stylistic reasons. Running the audit unmodified produces results something like
137
+
138
+ Warning: lowContrastElements (AX_COLOR_01) failed on the following elements (1 - 5 of 15):
139
+ ...
140
+
141
+ You can modify the audit to ignore the elements which are known and intended to have low contrast like this:
142
+
143
+ var configuration = new axs.AuditConfiguration();
144
+ configuration.ignoreSelectors('lowContrastElements', '.pretty');
145
+ axs.Audit.run(configuration);
146
+
147
+ The `AuditConfiguration.ignoreSelectors()` method takes a rule name, which you can find in the audit report, and a query selector string representing the parts of the page to be ignored for that audit rule. Multiple calls to `ignoreSelectors()` can be made for each audit rule, if multiple selectors need to be ignored.
148
+
149
+ #### Restrict the scope of the entire audit to a subsection of the page
150
+
151
+ You may have a part of the page which varies while other parts of the page stay constant, like a content area vs. a toolbar. In this case, running the audit on the entire page may give you spurious results in the part of the page which doesn't vary, which may drown out regressions in the main part of the page.
152
+
153
+ You can set a `scope` on the `AuditConfiguration` object like this:
154
+
155
+ var configuration = new axs.AuditConfiguration();
156
+ configuration.scope = document.querySelector('main'); // or however you wish to choose your scope element
157
+ axs.Audit.run(configuration);
158
+
159
+ ## License
160
+
161
+ Copyright 2013 Google Inc. All Rights Reserved.
162
+
163
+ Licensed under the Apache License, Version 2.0 (the "License");
164
+ you may not use this file except in compliance with the License.
165
+ You may obtain a copy of the License at
166
+
167
+ [http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
168
+
169
+ Unless required by applicable law or agreed to in writing, software
170
+ distributed under the License is distributed on an "AS IS" BASIS,
171
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
172
+ See the License for the specific language governing permissions and
173
+ limitations under the License.