Duplicate IDs

What we check

We collect all id attributes on the home page and count how many values occur more than once.

• One or two duplicate IDs: note.
• Three or more: warning.

In the report you see up to ten of the IDs affected.

Why it matters

An ID is the unique identifier of an element on the page. Various functions rely on there being only one:

• Jump links: a link to #contact jumps to the element with id="contact". If there are two, you land at the first one, perhaps in the hidden smartphone menu instead of at the contact form.
• Forms: a field label is connected to its field through the ID. With duplicate IDs a click on "Email" activates the wrong field, and screen readers read out the wrong label.
• Scripts: accordions, tabs, sliders and pop-ups often look for their elements by ID. With duplicates the wrong element reacts, or none at all.
• Accessibility: many ARIA connections, such as "this field is described by that text", rely on IDs.

Typical causes are elements that exist twice for desktop and smartphone (two menus, two logos, two search fields), widgets included several times and page builders that copy the ID along when a section is duplicated.

How to fix it

Make IDs unique

Every ID may occur only once per page. For elements that exist twice for desktop and smartphone:

<!-- instead of id="search" twice -->
<form id="search-desktop">…</form>
<form id="search-mobile">…</form>

Classes instead of IDs for styling

If an ID is used only for styling, replace it with a class. Classes may occur any number of times.

Page builders

In Elementor, Divi and similar builders you can give sections and widgets a "CSS ID". After duplicating a section, check whether the ID was copied along and assign a new one.

Plugins and widgets

If the same widget, such as a newsletter form, is included twice on the page, it often produces the same IDs twice. Some plugins have a setting for this, otherwise the only help is to use the widget once.

How to check it yourself

Open the developer tools (F12), switch to the console and enter:

Object.entries([...document.querySelectorAll('[id]')].reduce((a, e) => (a[e.id] = (a[e.id] || 0) + 1, a), {})).filter(([, n]) => n > 1)

The list shows every duplicate ID with its count.

Frequently asked questions

Can you notice duplicate IDs on the page?

Usually not directly. They only stand out when a jump link leads to the wrong place, a click on a field label activates the wrong field or an accordion opens the wrong element.

What is the difference between an ID and a class?

An ID is like a house number: it may occur only once per page. A class is like a street name: it may occur any number of times and is used to style several elements of the same kind.