Using a Dropdown Select List to Change Dynamic Content on a Page

Dynamic content on a page is always a problem when using a Screen Reader. Screen Readers take a snapshot of the web page and then begins to read (speak) that content to the user. So what happens when content is dynamically changed? The issue is, how do we get Jaws to know the page has changed? And how do we get Jaws to refresh it's snapshot and thus begin reading the new content? It is possible for the screen reader to be reading the old content, and the visual user to see the new content.

Answer

In the following example, we use a drop down select list with an onchange to dynamically change the content on the page. In this case, Jaws receives the signal to re-evaluate the page when the user leaves forms mode and the list box, making it rather simple.
Consider the following lines from the example below:

<select id="permission_select" onChange="update();">

coupled with the Javascript code:

document.getElementById("permission_div").innerHTML=content[document.getElementById("permission_select").value];
 Area</a></a>

This works because Jaws will re-evaluate the DOM when it leaves forms mode.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select List Box and DHTML Content </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<SCRIPT LANGUAGE="JavaScript">
<!--
  var content=new Array(
    "This is content for Kids.",
    "This is content for Young Teens",
    "This is content for Young Adults",
    "This is content for Adults."
  );
  function update(){
    document.getElementById("permission_div").innerHTML=content[document.getElementById("permission_select").value];
  }
//-->
</SCRIPT>

<style type="text/css">
  h1,h2,h3,h4,h5,h6{
  font-family: arial, 'sans serif';
  color:saddlebrown;
  font-size: 100%;
  margin-top: 0pt;
  margin-bottom: 0pt;
  margin-left: 0pt;
  margin-right: 0pt;
  display: inline;
}
</style>

</HEAD>
<BODY>
<form>
<table border=1 width=100%>
  <tr>
    <td>
      <h3>Age Category</h3>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td valign="top">
            Permission:
          </td>
          <td>
            <select id="permission_select" onChange="update();">
              <option value="0">Kids (5-18)
              <option value="1" SELECTED>Young Teens (13-18)
              <option value="2">Young Adults (18 - 21)
              <option value="3"> Adults (21+)
            </select>
            <div id=permission_div>
              This is content for the default Young Teens.
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>	
</BODY>
</HTML>

Using a Dropdown Select List to Change Dynamic Content on a Page

Donald F. Evans

January 2006

Question

Answer

Example