Note: I tried to find the orginal of this photo so I could attribute it to its creator, but came up with nothing, maybe Jonny knows…
Old gold
Back in 2014 I did some testing on Some stuff that doesn’t work between the DOM and Shadow DOM I was recently asked by my friend/colleague Demelza Feltham about use of aria-labelledby
that referenced an element in the Shadow DOM
What I found back then was that aria
relationship attributes didn’t work when an element being referenced was outside the shadow DOM and the element referencing it was inside the shadow DOM, ditto for the opposite. It was same story for native HTML relationships as well. Fast forward to 11 years later, as in now! 2025, and the situation remains the same.
I don’t plan to go into the details of why it doesn’t work yet here, but I can assure it’s not for lack of trying on the part of Standardista’s and and Browser engineers. If you want to read more about the reasons why and why it still has not been resolved, the following are illuminating:
- How Shadow DOM and accessibility are in conflict by Alice Boxhall, who also provides some workarounds in their article.
- Shadow DOM and accessibility: the trouble with ARIA by Nolan Lawson (no relationship to Bruce Lawson)
The attributes potentially affected by this issue are:
ARIA
aria-activedescendant
aria-colcount
aria-colindex
aria-colspan
aria-controls
aria-describedby
aria-details
aria-errormessage
aria-flowto
aria-labelledby
aria-owns
aria-posinset
aria-rowcount
aria-rowindex
aria-rowspan
aria-setsize
HTML
Some relationship attributes
for
attribute onlabel
elementfor
attribute onoutput
elementheaders
attribute onth
element<a href="#IDinShadows">
What you can do?
You could use standard HTML controls without all that stinking DOM darkness and encapsulation fandango fucking up your relationships.
Defy the JavaScript industrial complex by any means necessary
If this is not an option, then there are some ways you can work around these issues in some cases. A relatively simple example is provided:
Example with an output
element outside the Shadow DOM and an input type="range"
element inside, the output
updates with the current range
value:
- When the user slides the
range input
, aninput event
is triggered. - The handler sets the outer
<output>
element’s.value
to match therange
value. - This manually mimics what
<output for="...">
(via JavaScript) would have been done automatically if both were in the same DOM context:
// Update output value when range input changes shadowRange.addEventListener('input', () => { output.value = shadowRange.value; });
See the Pen
Untitled by steve faulkner (@stevef)
on CodePen.
Because something is happening here but you don’t know what it is
Lyrics
You walk into the room with your pencil in your hand You see somebody naked and you say, "Who is that man?" You try so hard but you don't understand Just what you will say when you get home Because something is happening here but you don't know what it is Do you, Mr. Jones? You raise up your head and you ask, "Is this where it is?" And somebody points to you and says, "It's his" And you say, "What's mine?" and somebody else says, "Well, what is?" And you say, "Oh my God, am I here all alone?" But something is happening and you don't know what it is Do you, Mr. Jones? You hand in your ticket and you go watch the geek Who immediately walks up to you when he hears you speak And says, "How does it feel to be such a freak?" And you say, "Impossible!" as he hands you a bone And something is happening here but you don't know what it is Do you, Mr. Jones? You have many contacts among the lumberjacks To get you facts when someone attacks your imagination But nobody has any respect, anyway they already expect you to all give a check To tax-deductible charity organizations Ah, you've been with the professors and they've all liked your looks With great lawyers you have discussed lepers and crooks You've been through all of F. Scott Fitzgerald's books You're very well-read, it's well-known But something is happening here and you don't know what it is Do you, Mr. Jones? Well, the sword swallower, he comes up to you and then he kneels He crosses himself and then he clicks his high heels And without further notice, he asks you how it feels And he says, "Here is your throat back, thanks for the loan" And you know something is happening but you don't know what it is Do you, Mr. Jones? Now, you see this one-eyed midget shouting the word "Now" And you say, "For what reason?" and he says, "How" And you say, "What does this mean?" and he screams back, "You're a cow! Give me some milk or else go home" And you know something's happening but you don't know what it is Do you, Mr. Jones? Well, you walk into the room like a camel, and then you frown You put your eyes in your pocket and your nose on the ground There ought to be a law against you comin' around You should be made to wear earphones 'Cause something is happening and you don't know what it is Do you, Mr. Jones?
One reply on “ARIA/HTML relationship Severance”
[…] https://html5accessibility.com/stuff/2025/06/07/aria-html-relationship-severence/ […]