Screen Readers & JavaScript

Steve Faulkner

TPG - Europe

www.paciellogroup.com/CSUN/

Screen Readers & JavaScript

• Support for Events
• Implicit Support
• Explicit Support based on old style scripting
• Minimal Documentation
• Virtual Buffer Update Issues

JAWS & Window Eyes

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)

JAWS & Window Eyes: modes 2

browse off & forms/PC cursor

• When the virtual buffer is not in use the user can only navigate through a document to focusable elements via the tab key
• Access to text is limited to "read all' functionality
• most of the advanced content navigation and interrogation functionality is unavailable.

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?

• Recognizes and announces the presence of 2 events (click & mouseover)
• But only under certain limited circumstances...

JAWS - Javascript Support 3

event support

• mouseover event on any element when the event is attached inline

  <p onmouseover="dosomething()">mouse over</p> 
  

  prior to version 7.1

JAWS - Javascript Support 4

event support continued

• click event on any non focusable element when the event is attached inline

  <p onclick="dosomething()">mouse over</p>
  

  prior to version 7.1
• Version 7.1+ also recognises event attached using the traditional method (onmouseover only on non focusable elements)

  <script type="text/javascript">
  object.onmouseover= function(){addtext()};
  </script>
  <script type="text/javascript">
  object.onclick= function(){addtext()};
  </script>
  

JAWS - Javascript Support 5

focus event

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

• When the user navigates to focusable element using the TAB key
• or navigates to a focusable element via a dialog (example: link list dialog)
• It is not triggered when a user moves through focusable elements using commands such as the up/down arrow keys or the U or V
• focus event examples (new window)

Window Eyes - Javascript Support 1

Differences with JAWS

• No mouseover support
• Only updates in response to user interaction (when a user activates a link, form control or non focusable element that is recognised as having a click event attached)
• The time between a user activating a link or control and the buffer being updated is longer, which masks the latency issue at times

The virtual buffer and latency 1

• Both JAWS and Window Eyes update the buffer in response to users activating buttons, links and elements identified as having a click event attached
• JAWS update the buffer in response to users activating elements identified as having a mouseover event attached when the user presses CTRL+ENTER to simulate moving the mouse pointer over an element
• If a change in the DOM occurs occurs due to this activation, before the virtual buffer is updated, the change in content will be available to the user.
• If a change in the DOM occurs after the virtual buffer is updated, the change in content will not be available to the user, until next time a buffer update occurs.

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

• firing of the window.setInterval(), but only in JAWS 7.1+
• addition of text using the proprietory object.innerText, but only in JAWS 7.1+ (IE)
• addition of text using the object.textContent and object.appendChild, but only in JAWS 7.1+ (Firefox)
• change in the value of a form control, but only in JAWS 7.1+

The virtual buffer and latency 3

Other update triggers

• Interacting with form controls
• Pressing the space bar (JAWS prior to version 7.1)
• Pressing enter
• Refreshing the virtual buffer: INSERT+ESC JAWS & CTRL+SHIFT+A (twice) Window Eyes

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:

• A buffer update triggered by a user action, which results in content being added or removed after the buffer update is completed
• Content being added or removed independent of user interaction

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

• Pester the Screen Reader vendors to provide better support and adequate documentation for developers.
• Do not code to accommodate for the poor support provided by JAWS and Window Eyes .
• Use unobtrusive methods where available and appropriate to help screen readers along.
• Do not use the excuse that Javascript / AJAX is not accessible for screen readers to not bother to code and design for accessibility.
• Start developing interface elements that use WAI-ARIA specifications, which will provide some benefits now, and many others in the future.