yatil/accessifyhtml5.js — Issue #8: Dynamically added elements
Author: yatil
Created: 2012-02-09 12:59:41+00:00
State: open
Labels: jquery

Thanks to @rodneyrehm there is an [improved version of the script](http://jsfiddle.net/rodneyrehm/SaNmp/) that supports dynamically adding of elements (in the jQuery version). I think that is an awesome addition to the script. Code for future reference:

```javascript
(function($, undefined){

$.accessifyHtml5 = function(options) {
var selectors = $.accessifyHtml5.defaults;

// import special selectors (if they're known to $.accessifyHtml5.special)
if (options) {
// "clone" default map for we don't want it mutated
selectors = $.extend(true, {}, $.accessifyHtml5.defaults);
$.each(options, function(key, selector) {
if ($.accessifyHtml5.special[key]) {
// replace key by the given selector, import attributes from .special
selectors[selector] = $.accessifyHtml5.special[key];
}
});
}

// apply attributes
$.each(selectors, function(selector, attrs){
$(selector).attr(attrs);
});

return this;
};

// list of elements to be replaced by a given selector in options to $.accessifyHtml5()
$.accessifyHtml5.special = {
'header' : { 'role': 'banner' },
'footer' : { 'role': 'contentinfo' },
'main' : { 'role': 'main' }
};
// selector to update upon dom node creation
$.accessifyHtml5.selector = 'article, aside, nav, output, section, [required]';

// default selectors
$.accessifyHtml5.defaults = {
'article' : { 'role': 'article' },
'aside' : { 'role': 'complementary' },
'nav' : { 'role': 'navigation' },
'output' : { 'aria-live': 'polite' },
'section' : { 'role': 'region' },
'[required]' : { 'aria-required': 'true' }
};

// register DOMNodeInserted listener at onDomReady so you have a chance to disable it
$(function(){
if (!$.accessifyHtml5.selector) {
return;
}

$(document.body).on('DOMNodeInserted', $.accessifyHtml5.selector, function(e) {
var $this = $(this);
$.each($.accessifyHtml5.defaults, function(selector, attr) {
if ($this.is(selector)) {
$this.attr(attr);
return false;
}

return true;
});
});
});

// expose old accessor
window.AccessifyHTML5 = $.accessifyHtml5;

})(jQuery);
```