Naming and Describing in Light and Shadow

The “Island Controls” section below allows you to explore different mechanisms for labeling and describing form elements. You can use the browser DevTools to inspect the accessibility tree and see how these mechanisms affect the accessible names and descriptions of elements in the “light” DOM and shadow DOM islands on this page.

For the inputs in the islands, ARIA associations use aria-labelledby and aria-describedby or their WebIDL equivalents. For the buttons, ARIA associations use aria-label or its IDL equivalent. Self-references are handled via aria-labelledby or its IDL equivalent.

While using explicit ARIA attributes for element associations is a common practice, using programmatic associations (via IDL attribute reflection) is also supported and can be more efficient in some cases. In particular, using attribute reflection for ARIA associations allows for elements within shadow roots to reference elements in a parent shadow DOM and in the light DOM (though references to shadow children from light DOM and shadow parents is not possible). In contrast, it is not possible to reference a parent or the light DOM from an element in a shadow root using explicit ARIA attributes / aria-labelledby="IDREFs". See MDN's guidance on reflected element references for more details.

Islands