Javascript keyevent and JAWS screen reader

bdfios picture bdfios · Apr 14, 2014 · Viewed 9.7k times · Source

I have an application that does something (eg alert) each time a spacebar is pressed. This works fine if I am not using JAWS screen reader. However, once I load JAWS screen reader, it does not execute alert when I press the spacebar. I need to use JAWS so I need this to work. Here is the code snippet.

$(document).keypress(function(event) {
    var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
    if (chCode == 32){ //32 is keyCode for spacebar
      alert("spacebars!!!");
    }
});

From my observation, it seems JAWS grabs the keyboard focus and wouldn't allow the spacebar event to fire. JAWS always reads "Space" when I press the spacebar but the alert event does not fire. How can I still get the alert or doSomething() to fire when the spacebar is pressed? How can I take control from JAWS or maybe share keyboard control with JAWS such that even though JAWS reads out the character I pressed (in this case Spacebar), it will allow my event (alert) to fire. Thanks.

More code:

$(document).keypress(function(event) {
  var cc= ('charCode' in event) ? event.charCode : event.keyCode;       
       if (cc == 32)
    {
      spArray.push(Number(new Date()));
    }
});

Answer

AlastairC picture AlastairC · Apr 14, 2014

In general, it is not advisable to over-ride screen readers, even if they let you. There are quite a few JAWs keyboard commands (in conjunction with INS) that use the spacebar, and you'd probably lock those commands out.

If the area is primarily formed controls or interactive widgets then you could wrap it in an element with role="application". That puts a (windows) screen reader into 'forms' mode, where keys are passed through to the web-page.

Do not wrap everything in role="application", just the interactive area.

Update: With more information, this is about an audio-based capture where the user triggers an audio file, then triggers something again to set a time and pass the capture.

Using a native button, Jaws will pass through the use of enter (not sure about space, that isn't the usual 'activate' key). I'd suggest either checking for enter key (charcode 13 I think), or even onclick should work. On a native button/link it works across screen readers.

$(document).click(function() {
   spArray.push(Number(new Date()));
});

Assuming that's in the right location so that it doesn't become active until needed. (JS isn't my strong point, but go with the enter key or onclick.