back to CSUN 2007 presentations

Screen Readers & JavaScript

Steve Faulkner

TPG - Europe

www.paciellogroup.com/CSUN/

Screen Readers & JavaScript

JAWS & Window Eyes

Window Eyes

window eyes logo

http://gwmicro.com

JAWS & Window Eyes: modes

Browse or Virtual PC Cursor

Users are provided with a large range of functionality to navigate page content:

By paragraph, form control, heading, link (visited, unvisited) list, list items, frames and tables. They can interrogate relationships between data and headers in tables, expanded forms of abbreviations and much more...

The user can activate links and some form controls (differs between Window Eyes and JAWS)

What the user cannot do is input characters into text inputs or text areas, and interact with select elements

JAWS & Window Eyes: modes 1

The Virtual Buffer

Most of the functionality is provided via a mechanism known as the "virtual buffer"

The virtual buffer is a copy of the DOM of the HTML document.

virtual buffer in action (new window)

Virtual buffer in action - demonstration notes

  1. Open the linked page in Internet Explorer with JAWS running.
  2. The page will load and JAWS will start reading the page.
  3. After approximately 5 seconds the page content will change.
  4. The content in the virtual buffer will be unchanged and you can continue to navigate through and hear the content original page until you refresh the page or press the enter key

The "virtual buffer" is both a gift and a curse:

  • It allows users access to structures represented in the code
  • It also causes many of the JavaScript support issues and issues related to AJAX style interactions

JAWS & Window Eyes: modes 2

browse off & forms/PC cursor

JAWS - Javascript Support 1

Does JAWS actually process Javascript?

The short answer is NO! Javascript is processed by the browser not JAWS.

But JAWS 7.1 does listen and update the virtual buffer in response to use of very limited set of javascript methods and properties.

JAWS - Javascript Support 2

So how does JAWS support Javascript?

JAWS - Javascript Support 3

event support

JAWS - Javascript Support 4

event support continued

click and mouseover event demonstrations

click and mouseover event demonstration notes

Examples of inline and traditional event registration on A and P elements

  • JAWS prior to 7.1 and Window Eyes (click only) - user only notified of inline events
  • JAWS 7.1+ - user notified of events when event registered inline or traditional

JAWS - Javascript Support 5

focus event

The focus event is not explicitly supported, but is triggered under certain circumstances

Focus event examples - demonstration notes

  1. Demostrates the focus events are not always triggered when the user navigates through focusable content in virtual PC cursor mode
  2. Open the linked page in Internet Explorer with JAWS running.
  3. The page will load and JAWS will start reading the page.
  4. navigating through the links or form controls using the up/down arrow keys or the U or V hot keys (use F for form controls) will not cause a change in the background colour (implemented via CSS focus and active pseudo selectors for links and onfocus/onblur event handlers for form controls) of the links or form controls.
  5. Using the tab key to navigate the links or form controls will cause a change in background colour.

Window Eyes - Javascript Support 1

Differences with JAWS

The virtual buffer and latency 1

The virtual buffer and latency 2

Updates without explicit user interaction

JAWS 7.1 what's new
Improved Detection of Dynamic Page Updates: Previously, if script code was used on a page to control visibility without the user actually interacting with the page, JAWS would not detect the page update and would either show content that was not really there or not show content which was made visible. This should no longer occur.

The virtual buffer updates in response to

The virtual buffer and latency 3

Other update triggers

The virtual buffer and latency 4

So what is the latency issue?

The latency issue is the differing states of the content available to the user in the virtual buffer and the content displayed in the browser, that occurs due to:

document content
event browser Virtual Buffer
page load initial text initial text
button click (0 millisecond latency) initial text + additional text initial text + additional text
button click (3000 millisecond latency) initial text + additional text initial text

The issue and possible improvements 1

setInterval() latency issue (new window)

scenario 1 - addition of page content occurs after buffer update: no notification

  1. user activates a link
  2. buffer update commences
  3. buffer update finishes
  4. content is added in browser, but not in virtual buffer

The issue and possible improvements 2

Informing the user that an update is required

setInterval() latency issue, informing the user (new window)

scenario 1 - addition of page content occurs after buffer update

  1. user activates a link
  2. buffer update commences
  3. message "update required" is written to the text input, available in virtual buffer
  4. buffer update finishes
  5. content is added in browser, but not in virtual buffer

The issue and possible improvements 3

Extending the improved functionality in JAWS 7.1+

Scenario 2 - addition of page content occurs after buffer update

AJAX latency issue (new window)

  1. user activates a radio button
  2. no buffer occurs
  3. content request sent to server
  4. content request returns from server
  5. content is added in browser, but not in virtual buffer

Note: the issue occurs when using JAWS 7.1+ and Internet Explorer, but not with JAWS 7.1+ and Firefox (suggests issue is not due to JAWS, but due to poor DOM event notification in IE)

The issue and possible improvements 4

Extending the improved functionality in JAWS 7.1+

Scenario 2 - addition of page content occurs after buffer update, bufferupdate function used

AJAX latency issue + update buffer function (new window)

  1. user activates a radio button
  2. no buffer update occurs
  3. content request sent to server
  4. content request returns from server
  5. content is added in browser, but not in virtual buffer
  6. value in hidden input is changed triggering a buffer update
  7. additional content is available in virtual buffer

Reference: Improving Ajax applications for JAWS users

Recommendations