Accessibility Tree

[00:00:00]
>> Marcy Sutton: We looked at the Chrome accessibility inspector a little bit, and that accessibility information. So, every webpage has the document object model, which has lots of information about what's on your page that can be useful for accessibility. There's also this structure called the accessibility tree, that is created with accessibility APIs, so that screen readers have kind of streamlined interface for accessibility information.

[00:00:27]
And so, a lot of the things that we do with HTML and CSS, and JavaScript, can impact this structure. And I have a screenshot from Chrome://accessibility, make sure that still works. So I think they want you to turn it on for each tab, because it can be kind of a performance hit.

[00:00:47]
So, if I look at, so accessibility internal, this is an internal, that's this page. And if we look at our, I can look at any webpage, and this is just like a raw version of the accessibility tree, I think now we have tools like the Chrome DevTools inspector.

[00:01:05]
It's just good to know that these exists, and we're not gonna go super deep into the accessibility tree, I just want you to know that it's a thing. That it's a parallel structure to the DOM, and it uses platform accessibility API. So if you're on a Mac, there's accessibility APIs there, there's different APIs on Windows, and it's just helpful to know that this exists.

[00:01:27]
Because, when we go visualize things with the browser DevTools, like we saw, semantic markup and your CSS can impact that accessibility tree. So that's why I say it's really helpful to render webpages so that you're not just looking at the raw HTML. You wanna see how CSS and your scripting can actually impact this accessibility tree.

[00:01:50]
So in the screenshot I have it sort of meta, this image of the inspector that we're looking at right now, I've changed it to be display none in my DevTools, and then I took a screenshot of the DevTools. So it's like the same image we're looking at. But when you put display none on that, like we saw on the DevTools accessibility inspector, it doesn't render it and it hides its accessibility information.

[00:02:14]
So now that we have this tree inspector, you can just look at it here, it's amazing. We did not have those when I got started, so I would highly recommend checking out this tool.