Harnessing the Accessibility Tree

on YouTube ↗12m

" summary

Explains that the accessibility tree is a render-time, filtered DOM exposed to assistive tech and shows how to view it in DevTools (Edge toggle, Firefox Accessibility tab, Chrome tree or bottom view, Safari node inspector). Demonstrates concrete fixes: replace div-with-click with a native button instead of adding tabindex+role+keydown, use ARIA-hidden and aria-expanded properly, and check nodes for role name focusable. Notes Lighthouse only catches ~30% of issues.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 0:41What is accessibility
3. 1:25Accessibility tree explained
4. 2:28Dev tools accessibility tree
5. 4:15Semantic HTML tags
6. 5:19ARIA attributes
7. 6:03Bad button example
8. 7:49Why use semantic tags
9. 8:30Finding the tree in browsers
10. 9:14Key takeaways
11. 9:57Q&A session

" related talks

• 43mBeyond the DOM: what’s in the accessibility tree for you?Bram Duvigneau · Frontend United 2018
• 13mDebugging accessibility with Chrome DevToolsCynthia Shelly · Google I/O 2022
• 32mUnleashing the Power of Developer Tools for Web Accessibility TestingAnuradha Kumari · Øredev 2024
• 13mDebugging accessibility with Chrome DevTools - American Sign LanguageCynthia Shelly · Google I/O 2022
• 16mDemystifying accessibility in React appsKateryna Porshnieva · React Conf 2024
• 01h 04mAccessibility API 101Aimee Marie Forsstrom · Developer Summit 2020
• 24mAccessibility: The Land Time to Interactive ForgotLéonie Watson · Pixel Pioneers Bristol 2022
• 41mWhat If We Talked About Web Accessibility?Olivier Leplus · DevFest Toulouse 2018