HTML check: The “aria-labelledby” attribute must not be specified on any “div” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

About This HTML Issue

A div element without an explicit role (or with role="generic") cannot have the aria-labelledby attribute because generic containers have no semantic meaning that benefits from a label.

The div element maps to the generic ARIA role by default. Generic elements are purely structural — they don't represent anything meaningful to assistive technologies. Labeling something that has no semantic purpose creates a confusing experience for screen reader users, since the label points to an element that doesn't convey a clear role.

The aria-labelledby attribute is designed for interactive or landmark elements — things like dialog, region, navigation, form, or group — where a label helps users understand the purpose of that section.

To fix this, you have two options: assign a meaningful ARIA role to the div, or use a more semantic HTML element that naturally supports labeling.

HTML Examples

❌ Invalid: `aria-labelledby` on a plain `div`

<h2 id="section-title">User Settings</h2>
<div aria-labelledby="section-title">
  <p>Manage your account preferences here.</p>
</div>

✅ Fixed: Add a meaningful `role` to the `div`

<h2 id="section-title">User Settings</h2>
<div role="region" aria-labelledby="section-title">
  <p>Manage your account preferences here.</p>
</div>

✅ Fixed: Use a semantic element instead

<h2 id="section-title">User Settings</h2>
<section aria-labelledby="section-title">
  <p>Manage your account preferences here.</p>
</section>

Using a section element or adding role="region" tells assistive technologies that this is a distinct, meaningful area of the page — making the label useful and the markup valid.