How to Label Shadow DOM - A11ycasts #20

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=rr3c62Wnaeo


Duration: 7:33
15,615 views
325

Shadow DOM is a newer web platform feature that lets you scope your CSS and markup. This is great for preventing style leakage, but it can also make things tricky when it comes to accessibility. In particular, labeling content inside of a shadow root. Today on A11ycasts I'll show a couple techniques I use to work around this thorny problem.

Demo source - https://goo.gl/F6x4YK

Shadow DOM primer - https://goo.gl/Gz2aHH

Accessibility Object Model (AOM) - https://goo.gl/MQ41Z2

Watch all A11ycasts episodes: https://goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf



Other Videos By Chrome for Developers


2017-07-27Chrome 60: Paint Timing API, Control Font Loading with Font-Display and WebAssembly
2017-07-27Caching Headers - Supercharged
2017-07-26Becoming a Creative Coder -- Designer vs. Developer #7
2017-07-21Does reordering content affect accessibility? - A11ycasts #21
2017-07-20Streaming Service Workers: Live Code Session - Supercharged
2017-07-19Season 2 is Coming -- Designer vs. Developer #S2
2017-07-14Chrome 60 - What's New in DevTools
2017-07-13Performance Markers - Supercharged
2017-07-11Gyroscope (The Standard, Ep. 10)
2017-07-11Drag and Drop (The Standard, Ep. 9)
2017-07-07How to Label Shadow DOM - A11ycasts #20
2017-07-06Push Messages - Supercharged
2017-06-29Offline Links - Supercharged
2017-06-23Building a Media Player #14: Season Roundup
2017-06-22Code Splitting: Live Code Session - Supercharged
2017-06-16Accessible Modal Dialogs -- A11ycasts #19
2017-06-15Building a Media Player #13: Background Fetch
2017-06-05Chrome 59: Headless Chrome, Native Notifications on macOS and the Image Capture API
2017-06-02Chrome 59 - What's New in DevTools
2017-06-02Supercharged: What Would You Like To See?
2017-05-31Building New Tools for Designers and Developers -- Designer vs. Developer #6


Tags:
Shadow DOM
accessibility
accessible design
accessibility in app development
accessibility developing
CSS
markup
scoping your styles
styling shadow doc
accessible controls
accessible web design
building accessible interactive control
interactive control
accessible interactive control
google
chrome
developers
chrome developers
web
product: chrome
fullname: Rob Dodson
Location: MTV
Team: Scalable Advocacy
Type: DevByte
Other: NoGreenScreen
GDS: Yes;