Ajax and Jaws Accessibility

The major issues are the same for any DHMTL project.

How do we let jaws know that content has changed?
And how can we move focus to the newly inserted content?

1. How do we let jaws know the content has changed?

The following line of code when executed with the Enter Key will cause Jaws to re-evaluate the DOM:
```
  <a href="#thebox" onclick="update(1);return false;">Update Content 1</a>
```
Using the mouse to click on the link will not update Jaws. This is ok because all Jaws screen reader users are keyboard only users, and will not use the mouse, but it presents a problem for the developers and testers who are used to using the mouse. These people must be careful to always use the enter key.

2. How do we move Jaws focus?

When called with the line shown above, Jaws will move focus to the anchor and read the link text that is in the H tag.
```
    <h6><a name=thebox class="hideme">box 1</a></h6>
```
This line of code provides an anchor for Jaws to find.

3. Hints

You must use the enter key to execute the links.
You must include an H tag for jaws to begin speaking.
The Anchor must be present before the call to update(), and it must have the same name.
It is a good idea to have the link text inside the H tag echo the link text that was used to call it. Jaws will read "Update Box 1 This page Link" and then when it moves focus, "Box 1 H 6"
The javascript call to "return false" is needed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional/?EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hovering DIVs</title>
<link rel="stylesheet" type="text/css" href="access.css"/>
<script type="text/javascript" src="access.js"></script>
</head>
<body>
<div class="links">
  <a href="#thebox" onclick="update(1);return false;">Update Content 1</a>
  <a href="#thebox" onclick="update(2);return false;">Update Content 2</a>
  <a href="#thebox" onclick="update(3);return false;">Update Content 3</a>
  <a href="#thebox" onclick="update(4);return false;">Update Content 4</a>
</div>
<div class="boxes">
  <div class="box one" id="a1">
    <h6><a name=thebox class="hideme">box 1</a></h6>
	Original Content in a nice big box
  </div>
</div>
</body>

Ajax and Jaws Accessibility

Chris Blouch

February 2006

Question

Answer

Example