Closed brianteeman closed 5 months ago
Thanks @brianteeman
Currently the duplicate ID ruleset does iterate on a collection of all the IDs on the page, and checks for duplicates. This explains why your SVG is being flagged. Although IDs within a shadow DOM are indeed scoped and encapsulated... which means the ruleset should account for that.
In general, I have always been a little iffy about including this ruleset in Sa11y, given that it's not really a content author issue. But there are many examples where having duplicate IDs can go wrong — which is why I still include it.
So instead of iterating on a single collection of all the IDs on the page, I need to check for duplicate IDs within each DOM. Secondly, I should maybe align more closely with Axe and Wave, only flagging duplicate IDs that impact forms, aria-labeling and focusable elements.
Adding this to the to-do list!
"WAVE doesn’t check 4.1.1 specifically because the vast, vast majority of 4.1.1 technical failures have absolutely no impact on end user accessibility (as evidenced by the W3C’s current efforts to deprecate it from WCAG). WAVE tests the page DOM which if formed after browsers correct most 4.1.1 failures anyway. WAVE additionally tests for duplicate or invalid ids or other invalid code that would impact form or ARIA labelling, broken labeling, or a variety of other code issues that evidence themselves in end user accessibility issues."
Source: Jared Smith (web-a11y.slack.com, November 2022)
Ensures that each focusable element on the page with an active ID has a unique value.
Source: ID attribute value must be unique
This rule passes if: Document has no static elements that share the same id attribute value
Thanks for the detailed explanation - really appreciate that
Will be fixed as of 3.1.4. Thnx again @brianteeman
I came across this a few days ago on one of my own sites and thought the issue was my code but I just saw the same on another site so maybe its not my fault afterall.
On this page sa11y is reporting an error about a duplicate id.
Checking the generated source od the page I can see that there is an svg with that id twice. But one of them is mobile only so I wouldnt expect that to be detected/reported by sa11y
Wave doesnt report an issue with the svg.
Is it because of the shadow dom?