Web Components and the AOM
summary
Web Components combine Custom Elements, Shadow DOM, HTML Templates, ARIA and the Web Speech API to build real accessible widgets: a working speak-content element reads selected text and keeps visual state in sync via aria-pressed. The Accessibility Object Model gives JavaScript direct access to the accessibility tree, with phase one adding role and ARIA reflection, phase one tests show 65 of 95 tests passing in Chromium and ~79 in WebKit, phase two adds synthesized events, and later phases add element references instead of ID strings and virtual accessibility nodes.
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:48Browser mechanics
- 1:46Custom Element: customised
- 2:41HTML: the is attribute
- 3:08Acc tree: the is attribute
- 3:23Demo: the is="custom-button" attribute
- 4:06Custom Element: autonomous
- 5:25Function: the stoggle-button element
- 5:49HTML: the stoggle-button element
- 6:00DOM: the staggle-button element
- 7:19Accessibility Object Model (AOM)
- 8:17a: ARIA reflection will enable reflection of
- 8:31Reflecting ARIA attributes
- 8:54connectedCallbacko
- 9:42Reflecting element references A
- 11:01Phase 1a: Web Platform Tests
- 11:51Phase 1b: Custom element semantics A
- 12:29Default semantics A
- 12:47Per instance semantics A
- 13:14User action events A
- 13:41Synthesized DOM events A
- 14:38New AT events A
- 15:50Virtual accessibility nodes A
- 17:09Computed tree introspection A
- 18:10HTML: the element
- 19:01HTML template + the shadow DOM
- 20:42CSS attribute selector
- 21:01Demo: the speak-content element
- 22:18Thank you!
related talks
26mThe Coming FAD: Future of Accessibility for Developers
35mAccelerating accessibility in web
43mBeyond the DOM: what’s in the accessibility tree for you?
01h 07mA web for anyone, anywhere, anytime
45mA Web for Anyone, Anywhere, Anytime
30mAccessible.JS
49mHow to create accessible JavaScript widgets with basic HTML components
37mAccessibility Matters: Creating a Better Web