Skip to content

Commit 25ff10f

Browse files
carlsonsantanacarlsonsantana
committed
Merge pull request #1 from carlsonsantana/develop
Version 2014-07-30
2 parents de88d06 + f087fe1 commit 25ff10f

15 files changed

+362
-5
lines changed

‎README.md‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,229 @@ HaTeMiLe is a libary that can convert a HTML code in a HTML code more accessible
88
2. Instanciate a new Configuration object;
99
3. Instanciate a new object with AccessibleForm, AccessibleImage, AccessibleShortcut, AccessibleTable, AccessibleEvent or AccessibleSelector interface and call yours methods;
1010
4. Get the HTML code of object with HTMLDOMParser interface.
11+
12+
## Example
13+
14+
# First install the nokogiri
15+
# gem install nokogiri
16+
# Load required files
17+
require 'lib/hatemile/util/Configure';
18+
require 'lib/hatemile/util/nokogiri/NokogiriHTMLDOMParser';
19+
require 'lib/hatemile/implementation/AccessibleEventImpl';
20+
require 'lib/hatemile/implementation/AccessibleFormImpl';
21+
require 'lib/hatemile/implementation/AccessibleImageImpl';
22+
require 'lib/hatemile/implementation/AccessibleSelectorImpl';
23+
require 'lib/hatemile/implementation/AccessibleShortcutImpl';
24+
require 'lib/hatemile/implementation/AccessibleTableImpl';
25+
26+
# Load the configuration of hatemile (hatemile-configure.xml)
27+
configure = Hatemile::Util::Configure.new('lib/hatemile-configure.xml')
28+
# Create an instance of parser
29+
parser = Hatemile::Util::NokogiriLib::NokogiriHTMLDOMParser.new('
30+
<!DOCTYPE html>
31+
<html>
32+
<head>
33+
<title>HaTeMiLe Tests</title>
34+
<meta charset="UTF-8" />
35+
</head>
36+
<body>
37+
<h1>HaTeMiLe Tests</h1>
38+
<!-- Events -->
39+
<div>
40+
<h2>Test Events</h2>
41+
<a href="#" onclick="alert(\'Alert A\')">Alert</a>
42+
<button onclick="alert(\'Alert Button\')">Alert</button>
43+
<input type="button" onclick="alert(\'Alert Input\')" value="Alert" />
44+
<span onclick="alert(\'Alert Span\')" style="background: red;">Alert</span>
45+
<i onclick="alert(\'Alert I\')">Alert</i>
46+
<div style="height: 300px; width: 300px; border: 1px solid black" onclick="alert(\'Alert Div\')">
47+
Alert
48+
</div>
49+
<span onclick="alert(\'Alert span\')" onkeypress="console.log(\'Console SPAN\')" style="background: blueviolet;">Console</span>
50+
<hr />
51+
<a href="#" onmouseover="console.log(\'Over A\')" onmouseout="console.log(\'Out A\')">Console</a>
52+
<button onmouseover="console.log(\'Over Button\')" onmouseout="console.log(\'Out Button\')">Console</button>
53+
<input type="button" onmouseover="console.log(\'Over Input\')" value="Console" onmouseout="console.log(\'Out Input\')" />
54+
<span onmouseover="console.log(\'Over Span\')" style="background: red;" onmouseout="console.log(\'Out Span\')">Console</span>
55+
<i onmouseover="console.log(\'Over I\')" onmouseout="console.log(\'Out I\')">Console</i>
56+
<div style="height: 300px; width: 300px; border: 1px solid black" onmouseout="console.log(\'Out Div\')" onmouseover="console.log(\'Console Div\')">
57+
Console
58+
</div>
59+
<span onmouseover="console.log(\'Over span\')" onmouseout="console.log(\'Out Span\')" onfocus="alert(\'Alert SPAN\')" style="background: blueviolet;">Alert</span>
60+
</div>
61+
<!-- Forms -->
62+
<form autocomplete="off" id="form1">
63+
<h2>Test Forms</h2>
64+
<label for="field1">Field1</label>
65+
<input type="text" value="" required="required" id="field1" autocomplete="on" />
66+
<label>
67+
Field2
68+
<div>
69+
<input type="text" value="" required="required" autocomplete="off" />
70+
</div>
71+
</label>
72+
<label for="field3">Field3</label>
73+
<textarea required="required" id="field3" autocomplete></textarea>
74+
<label>
75+
Field4
76+
<textarea required="required" autocomplete="none"></textarea>
77+
</label>
78+
<label for="field5">Field5</label>
79+
<select required="required" id="field5">
80+
<option value="">0</option>
81+
<option value="1">1</option>
82+
<option value="2">2</option>
83+
</select>
84+
<label>
85+
Field6
86+
<select required="required">
87+
<option value="">0</option>
88+
<option value="1">1</option>
89+
<option value="2">2</option>
90+
</select>
91+
</label>
92+
<label for="field7">Field7</label>
93+
<input type="number" min="0" value="0" max="10" id="field7" />
94+
<input type="submit" value="Submit" />
95+
</form>
96+
<input type="text" value="" required="" form="form1" />
97+
<!-- Images -->
98+
<div>
99+
<h2>Test Images</h2>
100+
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" alt="Google Logo" longdesc="http://www.google.com/" usemap="#laram" />
101+
<img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xap1/t39.2178-6/851562_329175193877061_87544187_n.jpg" alt="Facebook Logo" usemap="#laram" />
102+
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" alt="Google Logo" usemap="#laram2" />
103+
<img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xap1/t39.2178-6/851562_329175193877061_87544187_n.jpg" alt="Facebook Logo" usemap="#laram2" />
104+
<img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xap1/t39.2178-6/851562_329175193877061_87544187_n.jpg" alt="Facebook Logo" usemap="#laram3" />
105+
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" alt="Google Logo" longdesc="http://www.google.com/" usemap="#laram6" />
106+
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" alt="Google Logo" longdesc="http://www.google.com/" usemap="#laram7" />
107+
<map id="laram" name="laram">
108+
<area shape="rect" href="http://www.google.com/" alt="Google" target="_blank" coords="260,280,395,360" />
109+
<area shape="rect" href="http://www.facebook.com/" alt="Facebook" coords="222,113,395,148" />
110+
</map>
111+
<map id="laram2" name="laram2">
112+
<area shape="rect" href="http://www.google.com/" target="_blank" coords="260,280,395,360" />
113+
<area shape="rect" href="http://www.facebook.com/" coords="222,113,395,148" />
114+
</map>
115+
<map id="laram4" name="laram4">
116+
<area shape="rect" href="http://www.google.com/" alt="Google" target="_blank" coords="260,280,395,360" />
117+
<area shape="rect" href="http://www.facebook.com/" alt="Facebook" coords="222,113,395,148" />
118+
</map>
119+
<map id="laram5" name="laram5">
120+
<area shape="rect" href="http://www.google.com/" target="_blank" coords="260,280,395,360" />
121+
<area shape="rect" href="http://www.facebook.com/" coords="222,113,395,148" />
122+
</map>
123+
<map id="laram6">
124+
<area shape="rect" href="http://www.google.com/" alt="Google" target="_blank" coords="260,280,395,360" />
125+
<area shape="rect" href="http://www.facebook.com/" alt="Facebook" coords="222,113,395,148" />
126+
</map>
127+
<map name="laram7">
128+
<area shape="rect" href="http://www.google.com/" alt="Google" target="_blank" coords="260,280,395,360" />
129+
<area shape="rect" href="http://www.facebook.com/" alt="Facebook" coords="222,113,395,148" />
130+
</map>
131+
</div>
132+
<!-- Shortcuts -->
133+
<form action="http://www.webplatform.org/">
134+
<h2>Test Shortcuts</h2>
135+
<a href="http://www.google.com.br/" title="Go to Google" accesskey="q">Google</a><br />
136+
<a href="http://www.facebook.com/" accesskey="w">Go to Facebook</a><br />
137+
<label id="label1">Field1</label>
138+
<input type="text" value="" aria-labelledby="label1" accesskey="e" /><br />
139+
<input type="text" value="" aria-label="Field 2" accesskey="r" /><br />
140+
<input type="image" src="https://octodex.github.com/images/octobiwan.jpg" alt="Octobiwan" accesskey="t" /><br />
141+
<input type="reset" value="Reset button" accesskey="y" /><br />
142+
<input type="button" value="Show shortcuts" accesskey="u" onclick="alert(\'Only in client-side version.\');" /><br />
143+
<input type="submit" value="Subit Button" accesskey="i" /><br />
144+
</form>
145+
<!-- Tables -->
146+
<div>
147+
<h2>Test Tables</h2>
148+
<table>
149+
<thead>
150+
<tr>
151+
<th rowspan="3">1</th>
152+
<th rowspan="2">2</th>
153+
<th>3</th>
154+
<td>4</td>
155+
</tr>
156+
<tr>
157+
<th colspan="2">1</th>
158+
</tr>
159+
<tr>
160+
<th>1</th>
161+
<th>2</th>
162+
<td>3</td>
163+
</tr>
164+
</thead>
165+
<tbody>
166+
<tr>
167+
<td></td>
168+
<td></td>
169+
<td></td>
170+
<td></td>
171+
</tr>
172+
<tr>
173+
<td rowspan="2"></td>
174+
<td></td>
175+
<th></th>
176+
<td></td>
177+
</tr>
178+
<tr>
179+
<td colspan="2"></td>
180+
<td></td>
181+
</tr>
182+
<tr>
183+
<td></td>
184+
<td></td>
185+
<td></td>
186+
</tr>
187+
</tbody>
188+
</table>
189+
<table>
190+
<tr>
191+
<th>1</th>
192+
<td>2</td>
193+
<th colspan="2">3</th>
194+
</tr>
195+
<tr>
196+
<td>1</td>
197+
<td colspan="2">2</td>
198+
<td>3</td>
199+
</tr>
200+
<tr>
201+
<td>1</td>
202+
<th>2</th>
203+
<td>3</td>
204+
<td>4</td>
205+
</tr>
206+
</table>
207+
</div>
208+
</body>
209+
</html>')
210+
# Create instances of modifiers
211+
events = Hatemile::Implementation::AccessibleEventImpl.new(parser, configure)
212+
forms = Hatemile::Implementation::AccessibleFormImpl.new(parser, configure)
213+
images = Hatemile::Implementation::AccessibleImageImpl.new(parser, configure)
214+
selectors = Hatemile::Implementation::AccessibleSelectorImpl.new(parser, configure)
215+
shortcuts = Hatemile::Implementation::AccessibleShortcutImpl.new(parser, configure)
216+
tables = Hatemile::Implementation::AccessibleTableImpl.new(parser, configure)
217+
# Run fix methods
218+
events.fixOnActives()
219+
events.fixOnHovers()
220+
221+
forms.fixAutoCompletes()
222+
forms.fixLabels()
223+
forms.fixRangeFields()
224+
forms.fixRequiredFields()
225+
226+
images.fixLongDescriptions()
227+
images.fixMaps()
228+
229+
selectors.fixSelectors()
230+
231+
shortcuts.fixShortcuts()
232+
233+
tables.fixTables()
234+
235+
# Output the html code with the changes
236+
puts parser.getHTML()

‎css/accessibleform.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@charset "UTF-8";
2+
3+
input[required], select[required], textarea[required],
4+
input[aria-required=true], select[aria-required=true], textarea[aria-required=true],
5+
:required {
6+
border: 1px solid #0000ff;
7+
box-shadow: #0000ff 0px 0px 2px 0;
8+
-webkit-box-shadow: #0000ff 0px 0px 2px 0;
9+
-moz-box-shadow: #0000ff 0px 0px 2px 0;
10+
}
11+
12+
input[aria-invalid=false], select[aria-invalid=false], textarea[aria-invalid=false],
13+
:valid,
14+
:in-range {
15+
border: 1px solid #00ff00;
16+
box-shadow: #00ff00 0px 0px 2px 0;
17+
-webkit-box-shadow: #00ff00 0px 0px 2px 0;
18+
-moz-box-shadow: #00ff00 0px 0px 2px 0;
19+
}
20+
21+
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true],
22+
:invalid,
23+
:out-of-range {
24+
border: 1px solid #ff0000;
25+
box-shadow: #ff0000 0px 0px 2px 0;
26+
-webkit-box-shadow: #ff0000 0px 0px 2px 0;
27+
-moz-box-shadow: #ff0000 0px 0px 2px 0;
28+
}

‎css/accessibleform.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/accessibleimage.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@charset "UTF-8";
2+
3+
[longdesc] {
4+
border-top: 3px dashed #ffff00;
5+
border-right: 3px dotted #ffff00;
6+
border-bottom: 3px dotted #ff00ff;
7+
border-left: 3px dashed #ff00ff;
8+
}

‎css/accessibleimage.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/accessibleshortcut.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@charset "UTF-8";
2+
3+
[accesskey]:after {
4+
content: "[" attr(accesskey) "]";
5+
text-transform: uppercase;
6+
text-decoration: overline;
7+
}

‎css/accessibleshortcut.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/common_elements.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@charset "UTF-8";
2+
3+
.screen-reader-only {
4+
position: absolute;
5+
width: 1px;
6+
height: 1px;
7+
top: -9999px;
8+
left: -9999px;
9+
overflow: hidden;
10+
padding: 0;
11+
margin: -1px;
12+
clip: rect(0 0 0 0);
13+
border: 0;
14+
}
15+
16+
ol.numerable {
17+
list-style-type: none;
18+
counter-reset: item;
19+
}
20+
ol.numerable > li:before {
21+
counter-increment: item;
22+
padding-right: 10px;
23+
}
24+
ol.numerable > li:before, ol.numerable.decimal > li:before {
25+
content: counters(item, ".") ".";
26+
}
27+
ol.numerable[data-liststyletype=decimal-leading-zero] > li:before {
28+
content: counters(item, ".", decimal-leading-zero) ".";
29+
}
30+
ol.numerable[data-liststyletype=lower-roman] > li:before {
31+
content: counters(item, ".", lower-roman) ".";
32+
}
33+
ol.numerable[data-liststyletype=upper-roman] > li:before {
34+
content: counters(item, ".", upper-roman) ".";
35+
}
36+
ol.numerable[data-liststyletype=lower-greek] > li:before {
37+
content: counters(item, ".", lower-greek) ".";
38+
}
39+
ol.numerable[data-liststyletype=lower-latin] > li:before {
40+
content: counters(item, ".", lower-latin) ".";
41+
}
42+
ol.numerable[data-liststyletype=upper-latin] > li:before {
43+
content: counters(item, ".", upper-latin) ".";
44+
}
45+
ol.numerable[data-liststyletype=lower-alpha] > li:before {
46+
content: counters(item, ".", lower-alpha) ".";
47+
}
48+
ol.numerable[data-liststyletype=upper-alpha] > li:before {
49+
content: counters(item, ".", upper-alpha) ".";
50+
}
51+
52+
label[for].required:before {
53+
content: '*';
54+
}

‎css/common_elements.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/hatemile_for_css.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "accessibleform.css";
2+
@import "accessibleimage.css";
3+
@import "accessibleshortcut.css";

0 commit comments

Comments
 (0)