Moving Focus to Make Newly Created Dynamic Content Accessible

The example below centers around these two lines of code.

  <a href="#1" onclick="update(1);return false;">Update Box 1</a>
  <div class="box one"   id="a1"><h6><a name=1 class="offScreen">box 1</a></h6>Original Content in Box 1</div>

There are a number of items to note:

When executing the links, you MUST use the Enter Key. The Jaws screen reader will not move focus if you use the mouse. Since screen reader users do not use the mouse this is not a problem. The visual result is the same whether you use the enter key or the mouse.
The anchor name must exist in the div before you execute the link to it.
The H tag is needed to get Jaws to begin speaking once the link is executed.
The Anchor must be inside the H tag.
The Anchor can not be empty.
It is recommended the text inside the H tag echo the link text. Example: Link text="News" H text="News"

<!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>How to Update Content and Move Jaws Focus to the New Content.</title>
	<link rel="stylesheet" type="text/css" href="access.css"/>
	<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
	<style>
		.offScreen{
			position:absolute;
			overflow:hidden;
			width:1px;
			height:1px;
			top:-10px;
		}
	</style>
<!--
Note the H tag text here uses language similiar to the link text:
Link text:  "Update Box 1"
H tag text: "Box 1 Updated"
If we follow this, it will be very clear to the SR user that content has changed.
-->
	<script>
		var content=new Array(
			"<h6><a name=1 class='offScreen'>Box 1 Updated</a></h6>Left accuse right of being centrist",
			"<h6><a name=2 class='offScreen'>Box 2 Updated</a></h6>Yet another company wants a piece of AOL",
			"<h6><a name=3 class='offScreen'>Box 3 Updated</a></h6>Everything bad is good for you",
			"<h6><a name=4 class='offScreen'>Box 4 Updated</a></h6>You are in a twisty maze of passages all alike"
		);
		var id;
		function ge(o){
			return document.getElementById(o);
		}
		// timeout was not needed here to get jaws to see the update
		function update(u){
			ge('a'+u).innerHTML=content[u-1];
		}
	</script>
</head>
<body>
<div class="links">
<!-- This only works with Jaws and the enter key.  The mouse won't work -->
(This only works with the Enter Key and not with the Mouse)<br>
(It only needs to support Screen Readers)<br>
<a href="#1" onclick="update(1);return false;">Update Box 1</a>
<a href="#2" onclick="update(2);return false;">Update Box 2</a>
<a href="#3" onclick="update(3);return false;">Update Box 3</a>
<a href="#4" onclick="update(4);return false;">Update Box 4</a>
</div>
<div class="boxes">
	<!--  H tags must be used to wrap the Anchor -->
	<div class="box one"   id="a1"><h6><a name=1 class="offScreen">box 1</a></h6>Original Content in Box 1</div>
	<div class="box two"   id="a2"><h6><a name=2 class="offScreen">box 2</a></h6>Another blob of content in Box 2</div>
	<div class="box three" id="a3"><h6><a name=3 class="offScreen">box 3</a></h6>A little more content for Box 3</div>
	<div class="box four"  id="a4"><h6><a name=4 class="offScreen">box 4</a></h6>A Final chunk of content in Box 4</div>
</div>
</body>
</html>

Moving Focus to Make Newly Created Dynamic Content Accessible

Donald F. Evans

December 2005

Question

Answer

Example

Other Resources