accessifyhtml5.js

The polyfill for a more accessible HTML5.

Which problem is solved with this polyfill?

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.

How to use accessifyhtml5.js?

Just link to the accessifyhtml5.js file and call the AccessifyHTML5-Function at the bottom of your page right before the closing </body> tag:

<script src="accessifyhtml5.js"></script>
<script>AccessifyHTML5();</script>

There are some options you’re able to specify as they can be on each web page only once.

• header: A CSS selector that selects exactly one element on the page which will get the role banner.
• footer: A CSS selector that selects exactly one element on the page which will get the role contentinfo.
• main: A CSS selector that selects exactly one element on the page which will get the role main.

Example:

<script src="accessifyhtml5.js"></script>
<script>
	AccessifyHTML5({
		header:"body>header",
		footer:"body>footer",
		main: "#main"
	});
</script>

jQuery

Important: From today on, 2013-03-27, the jQuery version of accessifyhtml5.js is deprecated. Use the vanilla JS version instead. (You can just replace the jQuery version with the non-jQuery JS file.)

<script src="accessifyhtml5.jquery.js"></script>
<script>AccessifyHTML5();</script>

CDN

I’ve created a small CDN that should serve the JS file quite fast. I recommend to use the code here and copy it to the bottom of your project’s HTML file. Code:

<script src="//yatil-cdn.s3.amazonaws.com/accessifyhtml5.min.js"></script>
<script>AccessifyHTML5();</script>

Changelog

Version 2.0

• Release date: 27-Mar-2013
• Thanks to @nfreear for adding tests and HTML4 element support. Really a great extension.
• The jQuery version is now deprecated.
• The CDN version got updated, the jQuery version was replaced by the non-jQuery version. (They share the same API, so there shouldn’t be a problem here.)

Version 1.5

• Release date: 19-Feb-2013
• Added support for the standard <main> element as specified by the W3C. If you specify your own element for the main role, I reset the main role for the <main> element. (There can’t be more than one element with the role main.)

Version 1.0

• Release date: 05-Feb-2012
• Added support for specifying the main part of the web site using the main parameter (as requested by @yellowled).
• The script won’t overwrite your specified roles.

Version 1.0 beta

• Release date: 15-Aug-2011
• Added non-jQuery version (Using querySelector, adds support in IE8+, FF3.5+, Opera 10+, Safari, Chrome as well as iOS, Android and Opera Mobile)
• 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
• Thanks to @adickson you can just add selectors for banner and contentinfo when calling the function
• You’ll now have to call AccessifyHTML5-function like that: AccessifyHTML5({header:"#header", footer:"#footer"});

Acknowledgements:

• @nfreear for making this a really awesome project
• @adickson for a really good non-jQuery solution
• @stevefaulkner for his work exploring html5 a11y
• @paddya91 for object notation
• @ginader for reporting a typo
• @webaxe for reporting an error
• @divya for keeping me on track for a non-jQuery solution
• @mathias for improving my javascript

Known Issues:

• 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: https://twitter.com/jkiss/status/5488643711967232
• 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.

License:

This project is MIT licensed.

Author:

• Eric Eggert
• Twitter: @yatil
• Blog: http://yatil.net
• Workshops: http://modernwebaccessibility.com