Moving Focus to Newly Created Dynamic Content

Table of Contents

1. Priority
2. Description
3. More Info
4. Coding/Best Practices
5. Testing/QA
6. Search Engine Optimization (SEO)
7. W3C Guidelines

Priority:

Required

Short Discription:

When a screen reader user or low vision user actions a link by pressing the Enter key s/he expects to receive a new web page. When the link inserts dynamic content into the existing page, as with AJAX or an inline error message, the screen reader does not notify the user that the page has changed. In this case it is necessary to move and set focus to an H tag inside the newly created content. When focus is moved in this manner, the Jaws screen reader will speak the contents of the H tag which serves to simulate conventional behavior.

More Info:

Web 2.0 presents many challenges for accessibility. Probably one of the most difficult to deal with is the use of dynamic content inserted directly into the web page (DOM). While it is easy for a sighted user to see that new content has been added to the page, it is impossible for the screen reader user or low vision user to discern the same change. For this reason we need to provide a way to let these users know the page has changed. This solution exploits the behavior of the Jaws screen reader by voicing something meaningful as the new content is inserted.

Coding:

The solution requires each link that causes content to change on the current page to move focus to the new content and cause the screen reader to read some meaningful piece of text. Fortunately, the Jaws screen reader will voice the content of an H tag when focus is moved to it, so we can let the screen reader user know that something has indeed changed on the page. This technique can be used in treeviews, tabbed interfaces, error messages, Ajax applications, and/or other dynamic updates of the current DOM.

One way to move focus is by using an HTML Anchor with an HREF pointing to a Bookmark embedded in an H tag. You could hide the bookmark off the page if you don’t want it to be visable.

• 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"

See the best practice:
Moving focus with an Anchor and a Bookmark

Another way is to use the Javascript focus() method. This is a bit more complicated but is often times the best method. Our best practice submitted by Chris Blouch covers it in detail.

See the best practice:
Moving Focus with the JS focus() Method

Testing:

The best way to test for this is to actually tab to each link and execute it with the enter key. If the link takes you to the new content on the same page and voices some meainingful phrase, then the requirement has been met. On the other hand; if the screen reader does not voice something, and a new page is not loaded, then a bug should be filed.

You should also be on the lookout for places that might make use of the technique. Treeviews, menus, tabbed interfaces and dynamic leads are a few examples of places that often fail to call focus.

SEO:

No SEO guidelines currently apply.

W3C:

No W3C guidelines currently apply