Duplicate IDs

Silktide finds pages where the same id value is used on more than one element. IDs must be unique within a page, because anything that refers to an ID - form labels, ARIA relationships, in-page links - can only find one of the duplicates.

<!-- Both inputs share id="name": which field does each label describe? -->
<label for="name">Your name</label>
<input id="name">

<label for="name">Company name</label>
<input id="name">

Why this matters

Assistive technology depends on ID references to connect related elements. When IDs are duplicated, a screen reader may read the wrong label for a form field, or no label at all - in the example above, both fields may announce as "Your name", so the user types their name into the company box. The same failure affects ARIA attributes like aria-labelledby and aria-describedby, and in-page links that jump to an #id.

How to fix it

1. Rename the duplicates so every id on the page is unique, and update anything that referenced them (for attributes, ARIA attributes, links).
2. If the duplicates come from a repeated component - a template stamped out several times per page - fix the template to generate unique IDs, or use classes instead of IDs for styling hooks that don't need referencing.
3. If a flagged duplicate is genuinely harmless in your context, you can ignore the finding.

How Silktide tests this

1. Find every element on the page with an id attribute. Elements inside SVG graphics are skipped, as their IDs live in a separate context.
2. Group elements by their id value.
3. When more than one element shares the same id, flag each of them.

Learn more

• Understanding Success Criterion 4.1.1: Parsing (WCAG 2.1)
• H93: Ensuring that id attributes are unique on a Web page (WCAG technique)
• id (MDN)