Using JAWS to get key events

Question

I need to capture the current time each time a spacebar is pressed on the browser while using JAWS Screen reader. I am able to capture the spacebar if I am not using JAWS, however, the system cannot capture any spacebar once JAWS is on.

Here is my code:

$(document).keypress(function(event) {
        var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
        if (chCode == 32){ //32 is keyCode for spacebar
    addTime = addTime + Number(new Date()) + ",";
    var x = document.getElementById("spacebar");
    alert("spacebars!!!");
    }
});

I would like to know what to do so that I can capture the current time each time a spacebar is pressed.

Funny enough, each time a spacebar is pressed, JAWS reads out "space" but the event is not captured at the code level.

OR - Since JAWS reads out "Space" when I press the spacebar, does anyone know how I can capture JAWS event? Since it recognizes it when I press spacebar, I am wondering if I can capture the event directly from JAWS. Any thoughts?

possible duplicate of [Javascript keyevent and JAWS screen reader](http://stackoverflow.com/questions/23064334/javascript-keyevent-and-jaws-screen-reader) — Ryan B, Apr 15 '14 at 19:11

score 4 · Answer 1 · answered Apr 14 '14 at 19:41

This happens because most screen readers, and namely JAWS, provide so-called virtual cursor in browsers. This is needed for quick navigation on web pages and alike documents.
To test this, try pressing a letter on a web page while JAWS is on. For instance, if you press b, JAWS will say "No buttons" because b moves to the next button (if any). To type text, you need to enter the forms mode.
The spacebar, on the other side, works only when you are on a clickable element (link, button, check box or just an element with onClick event attached), then it activates the element; or in forms mode, then it types the space into an edit field.
In order to accomplish what you want to do, you need to declare a part of your web page as role="application" (more on this here):

When the user navigates an element assigned the role of application, assistive technologies that typically intercept standard keyboard events SHOULD switch to an application browsing mode, and pass keyboard events through to the web application.
The intent is to hint to certain assistive technologies to switch from normal browsing mode into a mode more appropriate for interacting with a web application; some user agents have a browse navigation mode where keys, such as up and down arrows, are used to browse the document, and this native behavior prevents the use of these keys by a web application.

So, in order to be able to count your time, just declare a parent div as role="application", and your Spacebar will be passed directly to the application and not intercepted by JAWS.

Thanks a lot. This is very insightful. Here is the context in which I am using this: I developed an audio captcha with the controls placed on the form page. Users click play and the audio challenge begins. Users answers the challenge by pressing the spacebar. When I am not using JAWS everything works ok even with Mac VoiceOver and Windows Narrator. However, once JAWS starts I can no longer capture the current time when spacebar is pressed. Your explanation helps. Now, I tried adding role="application" in the body tag but not working. Where (which tag) can I place the role=application? — bdfios, Apr 15 '14 at 01:17
I have tried placing the role="application" in the body tag and also a different tag within the page but none has worked for me. — bdfios, Apr 15 '14 at 01:24
I added role="application" in the tag containing the player control but didn't work either — bdfios, Apr 15 '14 at 07:40
You add the application role to `div` or `p` tags and alike (`article`, `section`, `aside` etc.). Avoid to add this role to the `body` tag because in this case your user won't be able to navigate the page normally. — Andre Polykanine, Apr 15 '14 at 12:11

Using JAWS to get key events

1 Answers1