Dynamically added elements

[yatil]

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

(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);

[rodneyrehm]

Since we're only interested in modifying elements freshly inserted, the DAMNNodeInserted Hack may be of interest as well. It would work in all current Browsers (>=IE10) according to caniuse. Compared to the DOMNodeInstered event, this hack should be performing much better