ada_matcher 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +127 -0
- data/ada_matcher.gemspec +1 -1
- data/lib/ada_matcher/version.rb +1 -1
- data/lib/ada_matcher.rb +10 -5
- data/resources/good_page.html +1 -2
- metadata +4 -4
data/README.md
CHANGED
@@ -0,0 +1,127 @@
|
|
1
|
+
ADA Matcher
|
2
|
+
===========
|
3
|
+
|
4
|
+
An RSpec add-on to help test for ADA compliance in web pages
|
5
|
+
|
6
|
+
The [RSpec][rspecLink] library supports the addition of custom Matchers for
|
7
|
+
use in Specifications. This Matcher, when used in a [Cucumber][cucumberLink]
|
8
|
+
project, can check the HTML code of a page for some common web accessibility
|
9
|
+
problems.
|
10
|
+
|
11
|
+
What this code can do
|
12
|
+
---------------------
|
13
|
+
The Matcher will scan HTML and evaluate these ADA/accessibility points:
|
14
|
+
* Image tags should include alt text (see Notes below)
|
15
|
+
|
16
|
+
* Link tags should include explanatory titles
|
17
|
+
|
18
|
+
* Links which cause new windows to open should say so (see Notes below)
|
19
|
+
|
20
|
+
* Header tags should be used in proper hierarchy (a page with an H3 should have H1 and H2)
|
21
|
+
|
22
|
+
* Form fields should have associated Label tags (see Notes below)
|
23
|
+
|
24
|
+
What this code does not do
|
25
|
+
--------------------------
|
26
|
+
It will not guarantee fully ADA compliant web pages. It only scans for the tedious
|
27
|
+
and easily forgotten small things that web developers should be in the habit of
|
28
|
+
including in their web pages.
|
29
|
+
|
30
|
+
Notes
|
31
|
+
-----
|
32
|
+
Full ADA compliance requires a large amount of subjective judgement, testing, and
|
33
|
+
common sense. No automatic processor can fully grasp the usability of a particular
|
34
|
+
layout and organization of semantic elements on a web page. The
|
35
|
+
[quick reference guide to web accessibility][adaQuickRefLink]
|
36
|
+
is pages and pages long and is filled with exceptions and special circumstances. For
|
37
|
+
example:
|
38
|
+
|
39
|
+
* Images which are purely decorative and carry no significant meaning for the reader
|
40
|
+
[should have empty alt attributes][noAltLink] (`alt = ""`). This is to avoid cluttering up the page
|
41
|
+
with needless descriptions of decorative pictures.
|
42
|
+
|
43
|
+
* Links should warn about opening new windows, but a link may do so in a non-obvious
|
44
|
+
way via javascript. This Matcher makes no attempt to evaluate `onClick` and so on. It
|
45
|
+
only looks for a "target" attribute in the "a" tag and evaluates the text in the "title"
|
46
|
+
attribute.
|
47
|
+
|
48
|
+
* Form fields should have Labels, but in [some cases][noLabelLink] with restricted space on the page,
|
49
|
+
a label can be skipped in lieu of an explanatory "title" attribute in the form field.
|
50
|
+
|
51
|
+
When does a form field require a label and when not? When is an image merely decorative?
|
52
|
+
This Matcher cannot make these judgements. That is the job of the humans writing the code.
|
53
|
+
Likewise, humans must evaluate the page to see that the visual layout is readable to those
|
54
|
+
users who cannot see text and other visual elements with a low contrast against the background.
|
55
|
+
Or that the page, when stripped entirely of its visual styles and images, still reads in
|
56
|
+
a sensible and meaningful way.
|
57
|
+
|
58
|
+
Usage
|
59
|
+
-----
|
60
|
+
The ADA Matcher requires some page or browser object with an API like that of the [Watir web
|
61
|
+
automator][watirLink]. Other similar libraries like [Watir-WebDriver][watirWebDriverLink],
|
62
|
+
[Selenium][seleniumLink], and [Celerity][celerityLink]
|
63
|
+
should work since their top-level APIs match Watir.
|
64
|
+
|
65
|
+
This Matcher works most easily in a Cucumber project. The example below is for such a case.
|
66
|
+
|
67
|
+
In a page definition, add:
|
68
|
+
|
69
|
+
require 'ada_matcher'
|
70
|
+
|
71
|
+
In a step definition file, add something like:
|
72
|
+
|
73
|
+
Then /^the page is ADA compliant$/ do
|
74
|
+
@browser.should meet_ada_requirements
|
75
|
+
end
|
76
|
+
|
77
|
+
In a feature file, you can use a scenario like:
|
78
|
+
|
79
|
+
Scenario: The page should meet ADA requirements
|
80
|
+
Given I am on The Page
|
81
|
+
Then the page is ADA compliant
|
82
|
+
|
83
|
+
The page and step definition code is best placed in a "global" page/step
|
84
|
+
file that all other page/step files inherit. This will make it clear that
|
85
|
+
the ADA check is available to any feature page in the Cucumber project.
|
86
|
+
|
87
|
+
More usage
|
88
|
+
----------
|
89
|
+
The execution of the matcher (`@browser.should meet_ada_requirements`) has
|
90
|
+
some optional arguments:
|
91
|
+
|
92
|
+
* (empty argument set) = run all ADA checks
|
93
|
+
|
94
|
+
* `meet_ada_requirements(:all)` = run all ADA checks
|
95
|
+
|
96
|
+
* `meet_ada_requirements(:some_specific_test_name])` = run just one ADA check
|
97
|
+
|
98
|
+
* `meet_ada_requirements([:one_test, :another_test, :a_third_test])` = run several specific checks
|
99
|
+
|
100
|
+
The supported ADA tests are:
|
101
|
+
|
102
|
+
* `:image_alt`
|
103
|
+
|
104
|
+
* `:link_title`
|
105
|
+
|
106
|
+
* `:link_window_warning`
|
107
|
+
|
108
|
+
* `:htag_hierarchy`
|
109
|
+
|
110
|
+
* `:label_for`
|
111
|
+
|
112
|
+
Finally, the Matcher runs on a "browser" object, but if the object supplied to the
|
113
|
+
matcher is some other object, it will search for a "browser" property or method to
|
114
|
+
get at the underlying browser object. This allows the Matcher to seamlessly support
|
115
|
+
WatirPageHelper page objects, for example, like:
|
116
|
+
|
117
|
+
`page.should meet_ada_requirements`.
|
118
|
+
|
119
|
+
[rspecLink]: http://rspec.info/
|
120
|
+
[cucumberLink]: http://cukes.info/
|
121
|
+
[watirLink]: http://watir.com/
|
122
|
+
[watirWebDriverLink]: http://watirwebdriver.com/
|
123
|
+
[seleniumLink]: http://seleniumhq.org/
|
124
|
+
[celerityLink]: http://celerity.rubyforge.org/
|
125
|
+
[adaQuickRefLink]: http://www.w3.org/WAI/WCAG20/quickref/
|
126
|
+
[noLabelLink]: http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H65
|
127
|
+
[noAltLink]: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-equiv
|
data/ada_matcher.gemspec
CHANGED
@@ -7,7 +7,7 @@ Gem::Specification.new do |s|
|
|
7
7
|
s.version = AdaMatcher::VERSION
|
8
8
|
s.authors = ["Aaron Brown"]
|
9
9
|
s.email = ["aaron@thebrownproject.com"]
|
10
|
-
s.homepage = ""
|
10
|
+
s.homepage = "https://github.com/frenchroasted/ada_matcher"
|
11
11
|
s.summary = %q{Adds custom rspec matchers that test watir Page objects for ADA compliance}
|
12
12
|
s.description = %q{Adds custom rspec matchers that test watir Page objects for ADA compliance}
|
13
13
|
s.license = 'MIT'
|
data/lib/ada_matcher/version.rb
CHANGED
data/lib/ada_matcher.rb
CHANGED
@@ -84,7 +84,8 @@ module AdaMatcher
|
|
84
84
|
def image_alt(page)
|
85
85
|
e = Array.new
|
86
86
|
page.images.each do |img|
|
87
|
-
|
87
|
+
# alt="" is okay - image may be merely decorative.
|
88
|
+
e << "Image tag is missing 'alt' attribute: #{img.html}" unless (img.html =~ /\s+alt\s*=\s*([\'\"])\1/ || !img.alt.empty?)
|
88
89
|
end
|
89
90
|
e # return error message array
|
90
91
|
end
|
@@ -130,10 +131,14 @@ module AdaMatcher
|
|
130
131
|
end
|
131
132
|
|
132
133
|
(page.text_fields.to_a + page.checkboxes.to_a + page.file_fields.to_a + page.radios.to_a + page.select_lists.to_a).each do |fld|
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
134
|
+
# Form field with title does not necessarily require a Label
|
135
|
+
# http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H65
|
136
|
+
if fld.title.empty?
|
137
|
+
if (fld.id.nil? || fld.id.to_s.empty?)
|
138
|
+
e << "Form field without an ID, a corresponding Label, or a Title: #{fld.html}"
|
139
|
+
else
|
140
|
+
e << "Form field without a corresponding Label or a Title: #{fld.html}" unless fors.has_key? fld.id.to_s.to_sym
|
141
|
+
end
|
137
142
|
end
|
138
143
|
end
|
139
144
|
|
data/resources/good_page.html
CHANGED
@@ -31,8 +31,7 @@
|
|
31
31
|
<option value="1">1</option>
|
32
32
|
<option value="2">2</option>
|
33
33
|
</select> <br/>
|
34
|
-
<
|
35
|
-
<input type="radio" id="radioInput1" name="radioInput"/> <br/>
|
34
|
+
<input type="radio" id="radioInput1" name="radioInput" title="I don't need a label"/> <br/>
|
36
35
|
<label for="radioInput2">radioInput2</label>
|
37
36
|
<input type="radio" id="radioInput2" name="radioInput"/> <br/>
|
38
37
|
</form>
|
metadata
CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
5
5
|
segments:
|
6
6
|
- 0
|
7
7
|
- 1
|
8
|
-
-
|
9
|
-
version: 0.1.
|
8
|
+
- 1
|
9
|
+
version: 0.1.1
|
10
10
|
platform: ruby
|
11
11
|
authors:
|
12
12
|
- Aaron Brown
|
@@ -14,7 +14,7 @@ autorequire:
|
|
14
14
|
bindir: bin
|
15
15
|
cert_chain: []
|
16
16
|
|
17
|
-
date: 2012-02-
|
17
|
+
date: 2012-02-27 00:00:00 -05:00
|
18
18
|
default_executable:
|
19
19
|
dependencies:
|
20
20
|
- !ruby/object:Gem::Dependency
|
@@ -77,7 +77,7 @@ files:
|
|
77
77
|
- resources/good_page.html
|
78
78
|
- spec/ada_matcher_spec.rb
|
79
79
|
has_rdoc: true
|
80
|
-
homepage:
|
80
|
+
homepage: https://github.com/frenchroasted/ada_matcher
|
81
81
|
licenses:
|
82
82
|
- MIT
|
83
83
|
post_install_message:
|