Explore web components and the Accessibility Object Model (AOM) in this JSConf.Asia 2019 conference talk by Léonie Watson. Learn how to create reusable solutions using Custom Elements, Shadow DOM, HTML Templates, Web Speech API, and ARIA. Discover progressive techniques for making content accessible to listeners and gain insights into future possibilities with the AOM. Delve into browser mechanics, customized and autonomous Custom Elements, accessibility tree attributes, and practical demonstrations. Understand the phases of AOM implementation, including ARIA reflection, custom element semantics, and virtual accessibility nodes. Gain valuable knowledge from Léonie Watson, an experienced accessibility expert and W3C advisory board member, as she shares her expertise on inclusive design and web accessibility.
Overview
Syllabus
Intro
Browser mechanics
Custom Element: customised
HTML: the is attribute
Acc tree: the is attribute
Demo: the is="custom-button" attribute
Custom Element: autonomous
Function: the stoggle-button element
HTML: the stoggle-button element
DOM: the staggle-button element
Accessibility Object Model (AOM)
a: ARIA reflection will enable reflection of
Reflecting ARIA attributes
connectedCallbacko
Reflecting element references A
Phase 1a: Web Platform Tests
Phase 1b: Custom element semantics A
Default semantics A
Per instance semantics A
User action events A
Synthesized DOM events A
New AT events A
Virtual accessibility nodes A
Computed tree introspection A
HTML: the element
HTML template + the shadow DOM
CSS attribute selector
Demo: the speak-content element
Thank you!
Taught by
JSConf
