WCAG 4.1.1 (A)
The page has duplicated id values
What this failure is
An id in HTML is supposed to be unique on the page — nothing else in the document should share it. When a page has two elements with id="email", the browser can only pick one when a <label for="email"> tries to attach itself, when an aria-describedby="email-help" tries to bind a hint, or when JavaScript calls document.getElementById. The wrong pick is silent: the page looks fine, forms appear to work, and only a screen reader user notices that clicking the label for the newsletter box focuses the checkout email box instead. Duplicate ids also break skip-to-content links, fragment URLs (page#pricing scrolls to the wrong place), and any analytics that keys on element ids.
Reference: WCAG 4.1.1 (A) — the authoritative spec.
Who it affects
- Screen reader users: aria-describedby and aria-labelledby resolve to whichever element with the matching id the browser encounters first, so hint text can attach to the wrong field or vanish silently.
- All users of forms: Clicking a <label> focuses the wrong <input>; error summaries built with fragment links jump to the wrong field; the user cannot correct their mistake.
- Deep-link users: URLs of the form example.com/page#section scroll to whichever element has that id, which may not be the section the link author intended.
How to fix it
Concrete steps for the four platforms most small e-commerce sites run on. If you use a different stack, the underlying HTML change is the same.
Shopify
Duplicates most often come from including the same section twice on a page (the same form snippet in header, mobile menu and footer) or from an app that hard-codes ids. In Online Store > Themes > Edit code, search for id=" and look for values that appear more than once. For form snippets that need to be reused, change the id to include a suffix based on {{ section.id }} or a unique block index — for example id="newsletter-email-{{ section.id }}". For app-injected duplicates, contact the app developer.
WooCommerce
The commonest source is a page that embeds the same shortcode twice (a [contact-form-7 id="123"] in the middle of the page and again in the footer widget). Either remove one instance, or use a plugin/theme option to add a unique suffix to each rendered form. For duplicate ids in your theme's markup, edit the template-part or block that renders the offending element and switch from a hard-coded id to one derived from a counter or a post id.
Wix
Wix generates ids automatically and duplicates are rare. If the scanner flags them, the source is almost certainly Custom Code or an Embed HTML block where you pasted the same widget markup twice, each copy carrying the same id. Give each embed a unique id suffix (id="newsletter-footer" vs id="newsletter-hero") or use classes instead of ids for styling.
Squarespace
Custom Squarespace ids only appear when a user adds them via Code Injection or a Code block. Squarespace itself generates unique ids for its blocks. Search your Code Injection and Code blocks for id=" and rename any duplicates. If you have pasted the same third-party widget in multiple places on the page, most widgets accept a customisation option to change the container id — check the widget's own docs before hand-editing. A common source of duplicate ids on Squarespace sites is pasting the same YouTube subscribe widget into both the sidebar and the footer via Code blocks.
Notes
WCAG 4.1.1 Parsing was removed as a numbered success criterion in WCAG 2.2 because modern browsers recover gracefully from most HTML errors, but duplicate ids remain a real accessibility bug for the reasons above and are still tested by axe, WAVE and this scanner. The EAA references WCAG 2.1 via EN 301 549, so the citation stays. If you need to find duplicates yourself, the browser DevTools console command $$('[id]').map(e => e.id).filter((v, i, a) => a.indexOf(v) !== i) lists them all in seconds.
Check your own site
Our accessibility statement scan is free and reports findings only — we do not certify sites.