Skip to content

Commit 7f60bd2

Browse files
carlsonsantanacarlsonsantana
committed
Merge pull request #1 from carlsonsantana/develop
Version 2014-08-03
2 parents 5a1b5e5 + 4c2beb2 commit 7f60bd2

13 files changed

Lines changed: 344 additions & 1 deletion

‎README.md‎

Lines changed: 218 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,225 @@ HaTeMiLe-for-Python
33
HaTeMiLe is a libary that can convert a HTML code in a HTML code more accessible. Increasing more informations for screen readers, forcing the browsers(olds and newers) show more informations, forcing that mouse events too be accessed by keyboard and more. But, for use HaTeMiLe is need that a correctly semantic HTML code.
44

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