onclick attribute for Jaws screen reader for better accessibility

[zelph]

While digging into making some plugins accessible I discovered that Jaws does not see elements as clickable when using the $().click(); method with however it attaches the click event. The only think that Jaws recognizes is an actual onclick attribute.

I tried doing $().attr("onclick","blah"); but that didn't work either (maybe jQuery detects that attribute and does the normal event listener?).

Only if I went old school and did elem.onclick = function(){}; would jaws recognize it as a clickable element.

Would it be possible to whenever there is a click event added, to also attach an empty onclick attribute if there isn't one already?

This may not be the best method, but here is what I have done in individual plugins:

if(!curElem.onclick) curElem.onclick = function(){};

This shouldn't change out jQuery's normal click handler works, and is only a hook for Jaws to know that a given element is "clickable". When the user "clicks" they still fire all the normal jQuery.click() stuff.

This only works for IE. I haven't dug in deeply to other browsers as our blind intern said most Jaws users use IE as Jaws has the best support for that browser.

[flesler]

This won't be added into the core, as it's a very specific thing for a very specific browser. And jQuery's ideology is to keep the necessary on the core, and the rest as plugins.

There are some accessibility plugins out there (I actually made one), you can propose a bit of code for this in there.

Note that this will do: (has some overhead)

jQuery(function($){

var dummy = function(){}; $.each(document.body.getElementsByTagName('*'), function(){

var events = $.data( this, 'events' )

{};

if( events.click && !this.onclick )

this.onclick = dummy;

});

});

You can propose this somewhere if you want, or make your own plugin. Cheers

[flesler]

Didn't show up well:

jQuery(function($){
   var dummy = function(){};
   $.each(document.body.getElementsByTagName('*'), function(){
       var events = $.data( this, 'events' ) || {};
       if( events.click && !this.onclick )
          this.onclick = dummy;
   });
});

Note that you can add a check for the browser, and only do this for those that need it.