This week, Support Lead, Helen Grimbly will be looking at the WCAG Accessibility compliance check F77 on resolving duplicate values of type ID:

https://www.w3.org/WAI/WCAG21/Techniques/failures/F77

HTML elements in a web page can be assigned a type ID to reference content elsewhere in the page, perhaps to obtain data, apply a label or a style to that element.

<style>
#event {
  background-color: green;
}
</style>

<!-- A unique element -->
<h2 id="event">Events</h2>

If more than one element in the page is assigned the same ID, this can cause problems for screen readers, as the screen reader will not know which content is being referred to when IDs are used (e.g. which form input element is associated with which label).

Duplicate IDs commonly occur when they are being used to apply a CSS style. If more than one element has the same style being applied, then classes should be used instead, for example:

<style>
.event {
  background-color: green;
}
</style>

<!-- Multiple similar elements -->
<h2 class="event">Event 1</h2>

<h2 class="event">Event 2</h2>

Note that in a Sitemorse Report this type of issue will show up under both Accessibility category F77 and Code Quality category file/html/badvalue.