Skip to content

Commit 3fae6d1

Browse files
yatilyatil
committed
Upping the script to version 1
1 parent 258a13d commit 3fae6d1

File tree

5 files changed

+187
-100
lines changed

5 files changed

+187
-100
lines changed

‎README.markdown

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# accessifyhtml5.js
2+
3+
The polyfill for a more accessible HTML5.
4+
5+
## Which problem is solved with this polyfill?
6+
7+
While most browsers work all right with the new semantic elements of HTML5, they don’t add the ARIA accessibility attributes that the specification demands. This small JavaScript adds those attributes to enhance accessibility of web sites.
8+
9+
## How to use accessifyhtml5.js?
10+
11+
Just link to the `accessifyhtml5.js` file and call the AccessifyHTML5-Function _at the bottom of your page_ right before the closing `</body>` tag:
12+
13+
```html
14+
<script src="accessifyhtml5.js"></script>
15+
<script>AccessifyHTML5();</script>
16+
```
17+
18+
There are some options you’re able to specify as they can be on each web page only once.
19+
20+
* `header`: A CSS selector that selects exactly one element on the page which will get the [role `banner`](http://www.w3.org/TR/wai-aria/roles#banner).
21+
* `footer`: A CSS selector that selects exactly one element on the page which will get the [role `contentinfo`](http://www.w3.org/TR/wai-aria/roles#contentinfo).
22+
* `main`: A CSS selector that selects exactly one element on the page which will get the [role `main`](http://www.w3.org/TR/wai-aria/roles#main).
23+
24+
### Example:
25+
26+
```html
27+
<script src="accessifyhtml5.js"></script>
28+
<script>
29+
AccessifyHTML5({
30+
header:"body>header",
31+
footer:"body>footer",
32+
main: "#main"
33+
});
34+
</script>
35+
```
36+
37+
## jQuery
38+
39+
There is a jQuery variant of the script that is a bit smaller, so if you’re using jQuery anyway, go ahead.
40+
41+
```html
42+
<script src="accessifyhtml5.jquery.js"></script>
43+
<script>AccessifyHTML5();</script>
44+
```
45+
46+
## CDN
47+
48+
I’ve created a small CDN that should serve the JS file quite fast. I recommend to use the code here and copy it into your project’s JS file. Code:
49+
50+
```html
51+
<script src="//cdn.yatil.net/accessifyhtml5.min.js"></script>
52+
<script>AccessifyHTML5();</script>
53+
```
54+
55+
or
56+
57+
```html
58+
<script src="//cdn.yatil.net/accessifyhtml5.jquery.min.js"></script>
59+
<script>AccessifyHTML5();</script>
60+
```
61+
62+
## Changelog
63+
64+
### Version 1.0
65+
66+
* Added support for specifying the main part of the web site using the `main` parameter (as requested by @yellowled).
67+
* The script won’t overwrite your specified roles.
68+
69+
### Version 1.0 beta
70+
71+
* Added non-jQuery version (Using querySelector, adds support in IE8+, FF3.5+, Opera 10+, Safari, Chrome as well as iOS, Android and Opera Mobile)
72+
* Removed header.site getting role banner and footer.site getting role contentinfo -> If you need to add a class, you can also add the role directly to the HTML
73+
* Thanks to @adickson you can just add selectors for banner and contentinfo when calling the function
74+
* You’ll now have to call AccessifyHTML5-function like that: @AccessifyHTML5({header:"#header", footer:"#footer"});@
75+
76+
## Acknowledgements:
77+
78+
* @adickson for a really good non-jQuery solution
79+
* @stevefaulkner for [his work exploring html5 a11y](http://html5accessibility.com/)
80+
* @paddya91 for object notation
81+
* @ginader for reporting a typo
82+
* @webaxe for reporting an error
83+
* @divya for keeping me on track for a non-jQuery solution
84+
* @mathias for improving my javascript
85+
86+
## Known Issues:
87+
88+
* According to @jkiss, Window-Eyes 7.11 struggles with aria-roles and HTML5, this is nothing I can solve with this script but is a screen reader issue. See: http://ya.tl/aNH1YQ
89+
* Firefox adds roles by itself, so this script is not needed for those browsers. I haven’t found a way to detect if those implicit roles are set, so I can’t test that at the moment.
90+
91+
## License:
92+
93+
This project is [MIT licensed](http://outline.mit-license.org/).
94+
95+
## Author:
96+
97+
* Eric Eggert
98+
* Twitter: @yatil
99+
* Blog: http://yatil.net

‎accessifyhtml5.jquery.js

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,42 @@
11
/*
22
* Accessifyhtml5.js
3-
* Adds ARIA to new elements in browsers which don’t do it by themselves.
4-
* Just drop into the bottom of your web page:
5-
* <script src="accessifyhtml5.jquery.js"></script>
63
*
7-
* Souce: http://www.html5accessibility.com/index-aria.html
8-
*
9-
* New in this version:
10-
* – Added non-jQuery version (Using querySelector, adds support in IE8+, FF3.5+, Opera 10+, Safari, Chrome as well as iOS, Android and Opera Mobile)
11-
* – Removed header.site getting role banner and footer.site getting role contentinfo -> If you need to add a class, you can also add the role directly to the HTML
12-
* – Thanks to @adickson you can just add selectors for banner and contentinfo when calling the function
13-
* – You’ll now have to call AccessifyHTML5-function like that
14-
* AccessifyHTML5({header:"#header", footer:"#footer"});
15-
*
16-
* Acknowledgements:
17-
* - @adickson for a really good non-jquery solution
18-
* - @stevefaulkner for his work exploring html5 a11y
19-
* - @paddya91 for object notation & document ready
20-
* - @ginader for reporting typo
21-
* - @webaxe for reporting an error
22-
* – @divya for keeping me on track for a non-jQuery solution
4+
* Source: https://github.com/yatil/accessifyhtml5.js
235
*/
246

257
var AccessifyHTML5 = function (defaults) {
268

27-
var fixes = {
28-
'article' : { 'role': 'article' },
29-
'aside' : { 'role': 'complementary' },
30-
'nav' : { 'role': 'navigation' },
31-
'output' : { 'aria-live': 'polite' },
32-
'section' : { 'role': 'region' },
33-
'[required]' : { 'aria-required': 'true' }
34-
};
9+
var fixes = {
10+
'article' : { 'role': 'article' },
11+
'aside' : { 'role': 'complementary' },
12+
'nav' : { 'role': 'navigation' },
13+
'output' : { 'aria-live': 'polite' },
14+
'section' : { 'role': 'region' },
15+
'[required]' : { 'aria-required': 'true' }
16+
};
3517

36-
if (defaults) {
37-
if (defaults.header) {
38-
fixes[defaults.header] = {
39-
'role': 'banner'
40-
};
41-
}
42-
if (defaults.footer) {
43-
fixes[defaults.footer] = {
44-
'role': 'contentinfo'
45-
}
46-
}
47-
}
18+
if (defaults) {
19+
if (defaults.header) {
20+
fixes[defaults.header] = {
21+
'role': 'banner'
22+
};
23+
}
24+
if (defaults.footer) {
25+
fixes[defaults.footer] = {
26+
'role': 'contentinfo'
27+
}
28+
}
29+
if (defaults.main) {
30+
fixes[defaults.main] = {
31+
'role': 'main'
32+
}
33+
}
34+
}
4835

49-
$.each(fixes,
50-
function(index, item) {
51-
$(index).attr(item);
52-
}
53-
);
36+
$.each(fixes,
37+
function(index, item) {
38+
$(index).attr(item);
39+
}
40+
);
5441

5542
};

‎accessifyhtml5.jquery.min.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
var AccessifyHTML5=function(b){var a={article:{role:"article"},aside:{role:"complementary"},nav:{role:"navigation"},output:{"aria-live":"polite"},section:{role:"region"},"[required]":{"aria-required":"true"}};if(b){if(b.header){a[b.header]={role:"banner"}}if(b.footer){a[b.footer]={role:"contentinfo"}}}$.each(a,function(c,d){$(c).attr(d)})};
1+
/*
2+
* Accessifyhtml5.js
3+
*
4+
* Source: https://github.com/yatil/accessifyhtml5.js
5+
*/
6+
7+
var AccessifyHTML5=function(b){var a={article:{role:"article"},aside:{role:"complementary"},nav:{role:"navigation"},output:{"aria-live":"polite"},section:{role:"region"},"[required]":{"aria-required":"true"}};if(b){if(b.header){a[b.header]={role:"banner"}}if(b.footer){a[b.footer]={role:"contentinfo"}}if(b.main){a[b.main]={role:"main"}}}$.each(a,function(c,d){$(c).attr(d)})};

‎accessifyhtml5.js

Lines changed: 43 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,55 @@
11
/*
22
* Accessifyhtml5.js
3-
* Adds ARIA to new elements in browsers which don’t do it by themselves.
4-
* Just drop into the bottom of your web page:
5-
* <script src="accessify.js"></script>
63
*
7-
* Souce: http://www.html5accessibility.com/index-aria.html
8-
*
9-
* New in this version:
10-
* – Added non-jQuery version (Using querySelector, adds support in IE8+, FF3.5+, Opera 10+, Safari, Chrome as well as iOS, Android and Opera Mobile)
11-
* – Removed header.site getting role banner and footer.site getting role contentinfo -> If you need to add a class, you can also add the role directly to the HTML
12-
* – Thanks to @adickson you can just add selectors for banner and contentinfo when calling the function
13-
* – You’ll now have to call AccessifyHTML5-function like that
14-
* AccessifyHTML5({header:"#header", footer:"#footer"});
15-
*
16-
* Acknowledgements:
17-
* - @adickson for a really good non-jquery solution
18-
* - @stevefaulkner for his work exploring html5 a11y
19-
* - @paddya91 for object notation & document ready
20-
* - @ginader for reporting typo
21-
* - @webaxe for reporting an error
22-
* – @divya for keeping me on track for a non-jQuery solution
23-
*/
4+
* Source: https://github.com/yatil/accessifyhtml5.js
5+
*/
246

257
var AccessifyHTML5 = function (defaults) {
26-
if (document.querySelectorAll) {
27-
var fixes = {
28-
'article' : {'role': 'article' },
29-
'aside' : {'role': 'complementary' },
30-
'nav' : {'role': 'navigation' },
31-
'output' : {'aria-live': 'polite' },
32-
'section' : {'role': 'region' },
33-
'[required]': {'aria-required': 'true' }
34-
};
8+
if (document.querySelectorAll) {
9+
var fixes = {
10+
'article' : {'role': 'article' },
11+
'aside' : {'role': 'complementary' },
12+
'nav' : {'role': 'navigation' },
13+
'output' : {'aria-live': 'polite' },
14+
'section' : {'role': 'region' },
15+
'[required]': {'aria-required': 'true' }
16+
};
3517

36-
if (defaults) {
37-
if (defaults.header) {
38-
fixes[defaults.header] = {
39-
'role': 'banner'
40-
};
41-
}
42-
if (defaults.footer) {
43-
fixes[defaults.footer] = {
44-
'role': 'contentinfo'
45-
}
46-
}
47-
}
18+
if (defaults) {
19+
if (defaults.header) {
20+
fixes[defaults.header] = {
21+
'role': 'banner'
22+
};
23+
}
24+
if (defaults.footer) {
25+
fixes[defaults.footer] = {
26+
'role': 'contentinfo'
27+
}
28+
}
29+
if (defaults.main) {
30+
fixes[defaults.main] = {
31+
'role': 'main'
32+
}
33+
}
34+
}
4835

49-
for (var fix in fixes) {
36+
for (var fix in fixes) {
5037

51-
var elems = document.querySelectorAll(fix),
52-
obj = fixes[fix],
53-
attr, value, key, i = 0;
38+
var elems = document.querySelectorAll(fix),
39+
obj = fixes[fix],
40+
attr, value, key, i = 0;
5441

55-
for (key in obj) {
56-
attr = key;
57-
value = obj[key];
58-
}
42+
for (key in obj) {
43+
attr = key;
44+
value = obj[key];
45+
}
5946

60-
for (i; i < elems.length; i++) {
61-
elems[i].setAttribute(attr, value);
62-
}
47+
for (i; i < elems.length; i++) {
48+
if (!elems[i].hasAttribute(attr)) {
49+
elems[i].setAttribute(attr, value);
50+
};
51+
}
6352

64-
}
65-
}
53+
}
54+
}
6655
};

‎accessifyhtml5.min.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
var AccessifyHTML5=function(g){if(document.querySelectorAll){var c={article:{role:"article"},aside:{role:"complementary"},nav:{role:"navigation"},output:{"aria-live":"polite"},section:{role:"region"},"[required]":{"aria-required":"true"}};if(g){if(g.header){c[g.header]={role:"banner"}}if(g.footer){c[g.footer]={role:"contentinfo"}}}for(fix in c){var b=document.querySelectorAll(fix),f=c[fix],a,e,d=0;for(key in f){a=key;e=f[key]}for(d;d<b.length;d++){b[d].setAttribute(a,e)}}}};
1+
/*
2+
* Accessifyhtml5.js
3+
*
4+
* Source: https://github.com/yatil/accessifyhtml5.js
5+
*/
6+
7+
var AccessifyHTML5=function(b){if(document.querySelectorAll){var g={article:{role:"article"},aside:{role:"complementary"},nav:{role:"navigation"},output:{"aria-live":"polite"},section:{role:"region"},"[required]":{"aria-required":"true"}};if(b){if(b.header){g[b.header]={role:"banner"}}if(b.footer){g[b.footer]={role:"contentinfo"}}if(b.main){g[b.main]={role:"main"}}}for(var e in g){var a=document.querySelectorAll(e),d=g[e],f,h,j,c=0;for(j in d){f=j;h=d[j]}for(c;c<a.length;c++){if(!a[c].hasAttribute(f)){a[c].setAttribute(f,h)}}}}};

0 commit comments

Comments
 (0)