Accessible Web Components using Polymer
summary
Builds a Polymer ui-ratings demo (five-star widget) and shows it renders inside shadow DOM but starts completely inaccessible. Adds keyboard handling and sets role/value/min/max from JavaScript because attributes inside the template don’t reflect; verifies results with Accessibility Developer Tools. Identifies problems: aria attributes “sprout” onto the host, IDREFs can’t reference shadow children, and duplicated semantics are noisy. Proposes non-reflected aria properties or selector-based ARIA linking as possible fixes.
AI-written summary · about
chapters (30)
- 0:00Introduction
- 4:27Polymer
- 5:37Polymer Custom Element
- 6:27Implementation
- 8:43Shadow DOM
- 9:32Is it accessible
- 9:59Keyboard accessibility
- 10:51Focusable element
- 11:34Semantics
- 12:51Ratings Widget
- 13:23Adding a Role
- 13:56Accessibility Developer Tools Extension
- 16:13Accessibility tree
- 16:39Reading
- 19:12Why I dont like this
- 21:33What if
- 22:23ID Race
- 24:40Alternates
- 26:04Crisis
- 28:00Peer reviews
- 28:56High contrast
- 29:06Audience questions
- 34:29Pros of sprouting attributes
- 36:44Cons of cascading CSS
- 37:54Extending existing elements
- 38:24Extending custom elements
- 38:49Extending polymer UI
- 39:14Creating extending native elements
- 40:19Rendering native elements
- 43:19Thank you
related talks
19mWeb Components
51mBuilding web applications with Web Components
59mIntroduction to Web Components
41mComponents Approach to Building Web Apps
29mInspector Web and the Mystery of the Shadow DOM
01h 48mIntro to Web Components & Polymer Workshop
22mWeb Components and the AOM
01h 00mAn Introduction to Web Components and Polymer