The Browser Accessibility Tree

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.
Categories: Development

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. 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 ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.