Sonoma State University

Get IT Help

Siteimprove - How to fix "Element IDs are not unique"

Siteimprove Issue:

Element IDs are not unique
Two or more elements on this page have the same id value. These should be unique.

The Siteimprove inspect page HTML source showing two occurences of an non-unique element ID problem

This means there are multiple HTML tags on the page that use the ID attribute with the same value.  Here's an example:

<p id="some-string-1234">Here's a paragraph.</p>

<p id="some-string-1234">Here's a different paragraph with the same ID.</p>

Why This Is Important

IDs must be unique - the same ID should not be used more than once in the same page. Otherwise, they can interfere with the user agent's (e.g. web browser, assistive technology, search engine) ability to properly parse and interpret the page.  Depending on how the IDs are used, this could prevent users with disabilities from being able to access and operate the web page properly.

Where These IDs Come From

Most often, we see these duplicate IDs when content is copied and pasted from Google Docs.  They may be necessary for content in Google Docs, but could cause problems outside of Google Docs.

How to Fix the Issue in Drupal

Usually, these IDs are not necessary as part of your Drupal content.  Removing the IDs fixes the issue.

  1. Login to your Drupal site.
  2. Go to the page with the issue.
  3. Make a new draft.
  4. In the HTML editor, select the content that has the ID - the Siteimprove page report shows you which parts of the content have the issue.
    The WYSIWYG page editor box in Drupal 7 with the Remove Formatting button highlighted and some text selected in the editor window.
  5. Click the Remove Format button.
  6. Repeat steps 4 and 5 for each area with the duplicated ID.
  7. Save and publish.

The Remove Format button may also remove some formatting you want, like bold and italics,  so you may also need to select some parts of text to reapply those formats.  

BONUS: Usually, reapplying the <strong> and <em> elements to your content will fix another issue with Google docs content.  Google uses the <b> and <i> tags for bold and italics. These are not accessible.  Drupal's HTML editor will use <strong> (B button) and <em> (I button), which are accessible.

How to Avoid This Issue

Whenever you copy and paste content from Google Docs into Drupal's HTML editor, immediately select the pasted text and click Remove Format.  Then apply the formatting options you want using the HTML editor's buttons.