The Browser Accessibility Tree

Posted on Monday, 26 January 2015 by Steve Faulkner

The accessibility tree and the DOM tree are parallel structures.

the accessibility tree, smiling and 2 thumbs up. With the universal access symbol in its foliage and the HTML5 logo on its trunk. Roughly speaking the accessibility tree is a subset of the DOM tree. It includes the user interface objects of the user agent and the objects of the document. Accessible objects are created in the accessibility tree for every DOM element that should be exposed to an assistive technology, either because it may fire an accessibility event or because it has a property, relationship or feature which needs to be exposed.

Generally if something can be trimmed out it will be, for reasons of performance and simplicity.

For example, a <span> with just a style change and no semantics may not get its own accessible object, but the style change will be exposed by other means.

Show me the accessibility tree!

On Windows you can use an object inspection tool such as aViewer to view and interrogate the Accessibility Tree and roles, states and properties, in Firefox, Internet Explorer and Chrome.

DOM (not including Shadow DOM) tree of <video> element (example page)

<!-- DOM tree example from Firefox -->
<video controls="" width="400">
<source src="..." type="video/mp4">
</video>

Firefox Accessibility Tree (video element)

firefox accessibility tree dump

Note: You can also use Dom Inspector (free Firefox extension) to view the accessibility tree and roles, states and properties.

 Internet Explorer Accessibility Tree (video element)

Internet Exploerer accessibility tree dump

Chrome Accessibility tree (video element)

chrome-video

Note: You can also see a full dump of the accessibility tree including roles, states and properties using the Chrome://accessibility tab

Notes:

The example used is unusual as the video element has a complex UI which includes controls in the accessibility tree that are in the Shadow DOM.

Each browser presents a different accessibility tree based on the differing content of its shadow DOM. This occurs for 2 reasons:

  1. Each browser has differing UI for the video player controls.
  2. There are differences in the way the video element and its controls are mapped to Platform accessibility APIs and which APIs are used.

About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

Comments for this post are closed.