Duplicated ARIA ID Number Problem on the Web Page

1 min read

Google Lighthouse finds and flags duplicated ARIA IDs.

Duplicated ARIA ID Number Problem on the Web Page

How to pass the audit? – Fixing Duplicate Ids

At least one of the IDs used twice will definitely need to be changed. For example, in the code below, the ID named <h2 id = "tabpanel-label"> is used twice. One has to change.

<div role="tabpanel" aria-labelledby="tabpanel-label">
  <h2 id="tabpanel-label">
    Tab panel title
  </h2>
  <p id="tabpanel-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</div>

Test Your Website Issues

You can quickly analyze your site