CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolsaccessibilityaccessibility-api
Austine
Austine

Reputation: 65

Accessing the Accessibility Tree of a website

How do I query the Accessibility Tree of a website using Chrome developer tools? Is it possible to do it? I am trying to understand how the Accessibility Tree works and helps screen readers.

Upvotes: 4

Views: 2681

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

Viewing the accessibility tree Google Chrome

  • Open Developer Tools (F12)
  • Go to Elements
  • On the right panel go to Accessibility (it may be hidden under the 'more' option >>)
  • Then as you inspect elements you can see how they are exposed to the accessibility tree.

Viewing the accessibility tree Firefox

  • Open Developer Tools (F12)
  • Go to the Accessibility Tab.
  • Right click on an element on the page and select 'Inspect Accessibility Properties'

Other Browsers

  • You can view the accessibility tree in Edge through a similar method (Developer Tools > Elements > Accessibility Tree - same as Google Chrome).
  • Safari does not expose the accessibility tree through the browser directly, but you can install extensions from the Mac App store. If there is a flag I have missed to enable this someone please correct me.

Understanding the Accessibility Tree

I would warn you that understanding the accessibility tree will not provide much help in understanding accessibility itself, it can actually make it more confusing.

It basically mimics the structure of the DOM, with a few extra bits exposed and a lot of bits 'ignored' as generic elements a screen reader does not care about.

You will gain a far better understanding of accessibility by simply using a screen reader on a regular basis and experimenting, the accessibility tree is only useful for identifying strange behaviour (e.g. dynamic content not being exposed correctly to the screen reader) and even then it does not expose as much information as you may think.

Upvotes: 5

Related Questions