yatil / accessifyhtml5.js Goto Github PK

I can see two options:

• A plain array,

var result = [
  {
    sel: selector,
    attr: attribute,
    val: value,
    msg: "Error message",
    ok: false,
    ex: Exception, // Optional, object
    re: Regex // Optional, object
  },
  // ...
];

• Or a hash,

var result = {
  error: [
    sel: selector,
    attr: attribute,
    val: value,
    msg: "Error message",
    ex: Exception
    // ...
  ],
  warn: [
    // ...
  ],
  ok: [
    // ...
  ]
}

Note, I suggest abbreviations sel, attr ... to keep Javascript size down. However, this may impact, particularly on non-native English speakers.

Adding role=search would be another great addition. Of course, this is a little more complicated since search doesn't have a specific HTML5 element to assign it to. The way I understand it, the WAI-ARIA spec leaves the possibility to add it to different elements than form.

Anyway, I've fiddled a possible solution in jQuery as a starting point. This might not be the most efficient/elegant solution. Not sure if the universal selector and/or .has() might impose a performance issue here.

Might be another candidate to add just manually like main etc.

Hey, maintainer(s) of yatil/accessifyhtml5.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library yatil/accessifyhtml5.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "yatil/accessifyhtml5.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I use this library so I don't have to worry about the default roles but sometimes I happen to want to add a different role to some markup and noticed that if I add it to one of the tags your script supports that it gets overwritten by the script. I'm using the jQuery version and just added +':not([role])' after the selector. I don't know if it's the best way but it works. Thanks for the handy script.

README.md recommends using CDN links at //cdn.yatil.net/accessifyhtml5.min.js and //cdn.yatil.net/accessifyhtml5.jquery.min.js, but both of these 404.

Should be: "polite"

Nice tool though!
Thanks :-)

Please make a tag with a version to set in bower file.

Thank!

Relates to #12.

Following the changes in #12, AccessifyHTML5(false, {}) can be used to inject arbitrary Javascript and other potentially harmful things into a page.

I've considered blacklist and white-list approaches. White-list is less error-prone, so I propose these allowed attributes - note, I suggest style may be useful,

  ATTR_ALLOW = /aria-[a-z]+|role|tabindex|title|alt|data|lang|style/

We can always expand the list as use-cases arise.

Most important feature for version 1.1 is to respect default ARIA-roles if browsers add them, like Firefox does now.

Vanillajs - initially.

I started thinking about Javascript to add roles to arbitrary HTML, especially The Open University's OUICE templates. See the the pseudo-JSON specification or "recipe" in this Gist,

• gist.github.com/ ... ouice-study-aria-roles-spec-js-html

I then came across the excellent work here led by Eric, via the Modernizr wiki. I was pleased by the close fit!

As part of Accessify-wiki I'm developing a JSON Schema - to allow fix-files authored in YAML format to be validated. Find it here,

• Github: nfreear/accessify-wiki ../schema/..schema.json
• http://json-schema.org

I'd like to propose some code edits for accessifyhtml5.js based on the Schema development, specifically:

• Some new allowed attributes - ATTR_SECURE:
  • target - for pop-up windows etc. target=NameNotBlank,
  • accesskey - still in HTML5 in spite of problems,
  • longdesc - http://w3.org/TR/html-longdesc
• A _CONFIG_ property within the YAML fixes containing meta-data,
• A _CONFIG_.ignore_defaults property

For peace of mind, I think it would be good to get automated headless testing (#13) working at the same time, possibly with Phantom JS and Buster JS,

• http://blog.knuthaugen.no/2012/09/headless-tests-with-buster-and-phantom/
• http://gotofritz.net/blog/geekery/html-scaffolding-in-buster-dot-js/
• http://simonsmith.io/headless-testing-with-jasmine-phantomjs-and-grunt/
• http://phantomjs.org/headless-testing.html
• http://docs.travis-ci.com/user/gui-and-headless-browsers/

Strangely similar to, #20 "Missing attribute "require" from ATTR_SECURE white-list"!

Line 37 of the jQuery version throws an error (used with jQuery 1.7.1, haven't tested any other jQuery version). Chrome 16 web inspector says:

Uncaught TypeError: Cannot call method 'each' of undefined
AccessifyHTML5
(anonymous function)
f.extend._Deferred.e.resolveWith
e.extend.ready
c.addEventListener.C

To implement issue #12 I'll need to re-arrange the vanillajs code somewhat. So I thought this would be a good time to include some unit tests.

I propose using a lightweight framework initially - BusterJS, hosted via CDN.

However, I suggest we make it fully automated in time, perhaps using Grunt, PhantomJS etc. Note, I don't want to make the project top-heavy. The currently Javascripts are lightweight, and good at doing one job. It would be a pity to add lots of supporting files...

Thoughts welcome!

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