Simple Web Components - ARIA Example

regular label for text box in shadow

Notes:

To test you need the following:

Chrome with the shadow DOM experimental feature enabled.
To enable, put chrome://flags in the address bar and open the flags page.
Enable the "Shadow DOM. Mac, Windows, Linux, Chrome OS This API allows web applications to use Web Components." flag.
Also useful to enable "Developer Tools experiments. Mac, Windows, Linux, Chrome OS Enable Developer Tools experiments. Use Settings panel in Developer Tools to toggle individual experiments." flag so you can see Shadow DOM content in the devloper tools. Note you have to check "show shadow DOM" in the developer tools setting as well.
an accessibility information inspection tool such as aViewer

The accessible name for an input in the shadow DOM which is labelled by (using aria-labelledby) an element in the Shadow DOM is the text content of the referenced element.
The accessible name for an input in the shadow DOM which is labelled by (using aria-labelledby) an element in the DOM is null
The accessible name for an input in the DOM which is labelled by (using aria-labelledby) an element in the Shadow DOM is null