The Accessibility Tree

Gather ’round the accessibility tree, dear listeners, and hear a grand tale about roles and attributes, screen readers and DOM inspectors, and how to be a good A11Y. We also touch on why accessibility isn’t something you bolt on after you design a website but is part of the process from the very beginning.

Hosted by Jared White & Ayush

Links:

• Want to keep the discussion going?
  • Join the The Spicy Web Discord Server
  • Follow @justaspec@intuitivefuture.com on Mastodon
• HTML Design Principles: Priority of Constituencies
• WAI (Web Accessibility Initiative)
• The Accessibility Tree
• ARIA Resources for Developers
• ARIA Attributes (MDN Docs)
• ARIA Roles (MDN Docs)

Additional resources:

• Adrian Roselli
• Common ARIA mistakes and how to avoid them
• (No ARIA is better than bad ARIA!)
• WebAIM - web accessibility in mind
• Basecamp Accessibility Guidelines
• The Patchability of the Open Web
• (aka the “Right to Inspect”)

Chapters

• 0:00 Introduction
• 1:21 Weather Report
• 2:22 Become an a11y
• 3:37 HTML's Priority of Constituencies
• 6:05 Accessibility is for **everyone**
• 7:59 Confess!
• 12:16 Everyone has different abilities
• 14:24 Accessibility is tied closely to Design
• 14:58 Getting into the nuts and bolts
• 20:35 Buttons shall be buttons!
• 22:12 WAI-ARIA?
• 23:17 role and aria-* attributes
• 25:32 <dialog> and modal stuff
• 26:42 Fav roles and attributes, and HTML grids!
• 31:43 Modals, focus lock, and inert
• 36:30 SPAs, React, and accessibility
• 39:31 Tailwind…again…
• 42:42 Right to "Inspect"
• 53:17 Wrapping up