Hidden content, document.write, and scripts that modify content

On this page:

Often scripts write content to special sections of a page, for example, using IFRAME or DIV. The scripts are written in a manner that the content written is not visible or is hidden. Depending on user interaction, hidden content is made visible and, perhaps, other visible content is now hidden. A common example on Web sites are the so-called "fly-over menus" and "plus-to-expand" navigation areas. It is with this hidden content and associated event handlers that the issues of accessible scripting may get confusing.

When using scripts to hide content, content developers are required at a minimum to use one or more of the following techniques:

• Ensure the script follows the minimum required techniques for event handler scripts.
• Ensure that hidden content that is made visible again is available to assistive technology. For example, if a user is already in the main content area of a page when the script is executed, then the hidden content should appear in the main content area as well. This will allow screen readers to find the content, without the user needing to browse the entire page and navigation bars again.
• When 3 of more pieces of content become visible after being hidden, you must ensure that reading order of the page is still correct, and that screen readers will encounter the content in the appropriate order.

One or more of the above techniques are required; the following technique is recommended to enhance accessibility

• To ensure the usability of the intended interaction, review the placement of the content in the document order. If the content made visible is at the end of the file, but the logical placement on the visible screen is near the top, then a screen reader user may not know that the content was made visible until reading all of the page to the end. Locating the hidden content immediately following the element associated with the script will allow screen reader users to find the content in the appropriate order.
• In simple cases, for example when less than three pieces of content are added, additional reordering is recommended but not required. In these cases, review the content that is generated, and ensure that the content is ordered in such a way that screen readers will encounter the content in the appropriate order.

Scripts can write content directly to the document. The most common way for scripts to do this is using document.write.

• If the new content is created on the same page, then the content is generally available to the assistive technology and usually no additional accessibility techniques are required.
• If the new content is created on a different page or in a new browser window, then assistive technology may not be notified that new content was created and it will be inaccessible to the user. If you must create content on a different page or in a new browser window, you must notify the user of the window change and set focus to the updated window.

An example of this would be an online loan calculator for an auto loan. On one page, a user would enter the loan parameters, such as loan amount, interest rate, and length of the loan. When the user fills in all of the information and submits the form, a new window is launched that displays the monthly payment. The user can then switch back and forth between the 2 windows, changing the parameters, and the content is automatically updated in the monthly payment amount window. This would be inaccessible, unless the user is notified of the updated content and the upcoming window change. Another option is to provide an equivalent alternative to the calculator, such as generating the loan amount on the original loan parameter page.

Related script techniques

• Scripts used for background processing and pop-ups
• Scripts using event handlers
• Additional techniques to enhance accessibility of essential scripts
• DHTML

©2001, 2005 IBM Corporation

Last updated February 14, 2005.

Return to the Scripts checkpoint