What ARIA references and unique IDs need
Labels and descriptions point to other elements by their ID. That only works if the ID exists and occurs only once on the page.
How it works
Some connections in HTML run through an element's id. One element points to that ID with an attribute:
label forties a label to its form field.aria-labelledbytakes the text of another element as the name, such as the heading of a dialog.aria-describedbyattaches a description, such as a password hint or an error message.aria-controls,aria-owns,aria-activedescendant,aria-errormessageandaria-detailsconnect controls with what they operate or explain.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="password-hint">
<p id="password-hint">At least twelve characters.</p>The screen reader then reads “Password” and the hint at the field. If the reference points nowhere, both are missing. If the ID exists twice, the browser takes the first element with it, often the wrong one.
WCAG 2.2 removed the former success criterion 4.1.1 on parsing. Duplicate IDs now count where they break labels and relationships; that falls under 1.3.1 and 4.1.2.
What matters
- Every ID only once. Duplicate IDs that a
labelor an ARIA attribute points to break the connection. Duplicates without a reference are less urgent, but easily lead to the same fault with the next change. - Every reference hits. A typo or a renamed ID makes the name or description vanish without anyone seeing it.
- Several IDs with spaces.
aria-labelledbyandaria-describedbytake several IDs separated by spaces, not commas. - Same page. References only work within the same page, not into an iframe.
The most common cause is building blocks that appear more than once on a page: the same form in the header and the footer, mobile and desktop navigation both in the code at once, a tile with a fixed ID in a list.
How to set it up
IDs come from your theme's templates, form plugins and components. Whoever maintains them has them generated uniquely per use, with a counter or a framework function (useId in React). Form plugins that output the same IDs for two forms on one page often have a setting for a prefix; otherwise the vendor can help. The report lists the affected IDs.