iiinova — where your digital self keeps evolving

Links by @yatil@yatil.social @links.yatil.social.ap.brid.gy · 09/06/2025

⭐️ ARIA/HTML relationship Severance By @SteveFaulkner html5accessibility.com/stuff/2025/0…

**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 Relationship attributes: * `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 on `label` element * `for` attribute on `output` element * `headers` attribute on `th` 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`, an `input event` is triggered. * The handler sets the outer `<output>` element’s `.value` to match the `range` 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?

010