Internet Explorer 8 contains several new features that support assistive technology client applications.

This topic contains the following sections.

• Support for ARIA Markup
• DHTML Extensions for Accessibility
• Related Topics

Support for ARIA Markup

An increasing number of Web sites are being transformed into full-blown applications by using a combination of technologies including script, Cascading Style Sheets (CSS), and HTML. These sites offer their users dynamic and interactive experiences, often created using custom user interface (UI) elements.

A consequence of the development of custom UI within Web pages is that assistive technology programs and automation tools are unable to fully parse the contents of the page or provide alternative ways for users to interact with controls.

Internet Explorer gives assistive technology programs access to content by implementing Microsoft Active Accessibility (MSAA). It essentially does this by creating accessible objects and assigning properties to them based on the HTML. For example, if a Web page contains a button, an assistive technology program can get information about that button, and simulate clicking it, by obtaining an IAccessibleEx interface to the accessible object created by the browser.

When custom UI elements are created by a script, the standard way of exposing elements to an assistive technology client breaks down. The browser can display the UI, but has no information about the role, properties, or states of UI elements.

For example, suppose you create a custom element whose primary functionality is that of a list, but which has tree-view-like capabilities. You create the element with the following code.

<ul id="Tree">
    <li id="A1" onclick="javascript:Toggle('A1','sub1')" title="Colors" >
    <span>+ </span>Colors</li>
    <ul style="display:none" id="sub1">
         <li title="Red">Red</li>
         <li title="Blue">Blue</li>
         <li title="Green">Green</li>
    </ul>
    </li>
</ul>

Encountering this HTML, the browser has no way of determining how assistive technology clients should view the element or what its properties might be. As a result, the browser cannot expose the element in any useful way.

In response to this problem, which is not specific to Internet Explorer and MSAA but applies to all accessible browsers, the Web Accessibility Initiative  group of the World Wide Web Consortium (W3C) has created a standard for Accessible Rich Internet Applications (ARIA). ARIA enables Web developers to add properties to custom objects that can be made available to assistive technology clients.

The following example, in which the syntax is based on a draft of the ARIA specification, shows how the custom tree view might be made accessible using role attributes.

<ul id="Tree" role="tree">
<li role="treeitem" id="A1" aria-expanded="false"
    onclick="javascript:Toggle('A1','sub1')" title="Colors" >
   <span>+ </span>Colors</li>
   <ul style="display:none" id="sub1" role="group">
       <li role="treeitem" title="Red">Red</li>
       <li role="treeitem" title="Blue">Blue</li>
       <li role="treeitem" title="Green">Green</li>
    </ul>
</li>
</ul>

The role attribute identifies the fundamental behavior of the control. Internet Explorer translates this attribute into the ROLE_SYSTEM_CHECKBOX value recognized by MSAA. An assistive technology client can then retrieve the value by calling IAccessible::get_accRole. In addition, the aaa:checked attribute is translated into STATE_SYSTEM_CHECKED, and the client can retrieve this value by calling IAccessible::get_accState.

ARIA specifies values in the wairole: namespace that can be used to define the primary role of an element. In addition, it sets aside the aaa: namespace for state and property values and defines values that can be translated by the browser into terms recognized by the accessible technology. For instance, the "checked" state value in the preceding example is defined as being valid for appropriate roles (any element, or widget, that can have an on/off value), and Internet Explorer 8 is able to translate it into the corresponding MSAA state value.

DHTML Extensions for Accessibility

Internet Explorer 8 introduces greater support for assistive technology applications through MSAA. It raises more events to notify assistive technology clients that the content of a page has changed, it improves the mapping of content elements to MSAA roles, and it adds support for HTML content not previously visible to MSAA.

The following WinEvents are raised when content changes:

• EVENT_OBJECT_REORDER
• EVENT_OBJECT_STATECHANGE
• EVENT_OBJECT_LOCATIONCHANGE
• EVENT_OBJECT_VALUECHANGE

EVENT_OBJECT_REORDER

The EVENT_OBJECT_REORDER event occurs when any of the following Dynamic HTML (DHTML) properties is changed:

• innerHTML
• outerHTML
• innerText
• outerText

The event also occurs if any of the following DHTML methods changes the page content:

• add (areas, options)
• appendChild
• applyElement
• clear
• createTFoot
• createTHead
• createCaption
• deleteTFoot
• deleteTHead
• deleteCaption
• deleteCell
• deleteRow
• insertCell
• insertRow
• moveRow
• execCommand (document, selection, range)
• insertAdjacentElement
• insertAdjacentHTML
• insertAdjacentText
• insertBefore
• pasteHTML
• remove (areas, options)
• removeChild
• removeNode
• replaceAdjacentText
• replaceChild
• replaceNode
• swapNode

EVENT_OBJECT_STATECHANGE

This event is raised when the user interacts with input elements and buttons with the following exceptions:

• When the input type is file, and the user sets focus on the textbox, the event is raised on the button instead of the textbox.
• When the input type is radio, and the user presses the left or right arrow key, an event is raised on the currently selected radio button instead of on all radio buttons in the group.

The system also sends this event when a span is collapsed (hidden).

EVENT_OBJECT_LOCATIONCHANGE

This event occurs the user selects text in an input element of type file, password, text, or in a TEXTAREA.

EVENT_OBJECT_VALUECHANGE

This event occurs when the user inputs or deletes a character in an input element of type file, password, text, or in a TEXTAREA.

MSAA Roles

The following table shows new mappings of HTML elements to MSAA roles.

Related Topics

• Creating Accessible Web Pages With DHTML
• Microsoft Active Accessibility SDK