Giters

ryersondmp / sa11y

Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.

Home Page:https://sa11y.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

svg id

brianteeman opened this issue · comments

commented

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.

image

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

image

image

Wave doesnt report an issue with the svg.

Is it because of the shadow dom?

commented

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!

Other tools

WAVE

"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)

Axe DevTools

Ensures that each focusable element on the page with an active ID has a unique value.

Source: ID attribute value must be unique

Microsoft Accessibility Insights

This rule passes if: Document has no static elements that share the same id attribute value

Source: Accessibility Insights: duplicate-id

commented

Thanks for the detailed explanation - really appreciate that

commented

Will be fixed as of 3.1.4. Thnx again @brianteeman