# 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”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/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
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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`

```html
<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`

```html
<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

```html
<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.