Published on July 7, 2017 by Chrome

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 – goo.gl/F6x4YK

Shadow DOM primer – goo.gl/Gz2aHH

Accessibility Object Model (AOM) – goo.gl/MQ41Z2

Watch all A11ycasts episodes: goo.gl/06qEUW

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

Leave a Reply

10 Comments on "How to label Shadow DOM"

Notify of
avatar

Dawid Warpas
Guest
Dawid Warpas
11 days 23 hours ago

Very insightful! On top of the main topic, I learned about aria-labels!

robrez
Guest
robrez
14 days 12 hours ago

very interesting. it seems like we're still missing a feature of labels… tapping them sometimes toggles values (check box, radio) or sets focus (inputs)… a while back I took a stab at a custom label element that tried to solve that problem. it also listened for focus events to it's target to support styling based on focus.

Joaquín Sánchez
Guest
Joaquín Sánchez
14 days 12 hours ago
Hi Rob:how about nested components like paper-input?For example, how to label this with shadow dom (describe native input with section1)?<main><section><h2 id="section1">Identification</h2><paper-input label="First name" auto-validate required error-message="required, min 1, max. 20" minlength="10" maxlength="20" char-counter></paper-input></section><main>In fact, chrome accesibility inspector does not resolve any of these aria attrs from paper-input-behavior:aria-describedby: paper-input-add-on-1 paper-input-add-on-2aria-labelledby: paper-input-label-3From polymer shop app all these decorators are built-in components, there is not any reference to paper elements, so I assume that shadow dom has a very very big problem with a11y. If you look at shop-checkout element, you can see there are a lot of boilerplate code, only to decorate each input in… Read more »
Andy W
Guest
Andy W
14 days 12 hours ago

#RIPPolycasts 😀 All joking aside, great video this was very helpful.

Thomas Orlita
Guest
Thomas Orlita
14 days 14 hours ago

2:04 is there a way to do the opposite – affect an element outside the shadow DOM? For example change background-color of its parent element?

Tim van der Lippe
Guest
Tim van der Lippe
14 days 14 hours ago

Are these approaches preferred over passing the label element into the light dom? Then it would be progressive enhancement right?

Patrick Lauke
Guest
Patrick Lauke
14 days 14 hours ago

So I take it there's no way to have a label element in the HTML document itself and have that relationship automagically go into the Shadow DOM itself? Can the script in the component see/read if anything in the main document is somehow "pointing" to it and grab that text to populate its own visibly hidden label or aria-label ?

Tim Lundqvist
Guest
Tim Lundqvist
14 days 15 hours ago

TFW you copy-paste your code and forget to edit the name of your end tag. This is the reason XHTML exists. 😉

Rob Dodson
Guest
Rob Dodson
14 days 16 hours ago

Note: It's probably a good idea to generate a random ID for your label element that is unique to each instance. That way if you're in a browser that doesn't support Shadow DOM you won't end up with duplicate IDs being referenced by the for= attribute.

Kaleb Hornsby
Guest
Kaleb Hornsby
14 days 17 hours ago

I had been wondering about this for a while. Thanks!

wpDiscuz