# Bad value “list” for attribute “role” on element “section”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-list-for-attribute-role-on-element-section
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `section` element carries implicit ARIA semantics — it maps to `role="region"` when given an accessible name. According to the ARIA in HTML specification, each HTML element has a set of roles it is allowed to assume, and `list` is not among the permitted roles for `section`. When the W3C validator encounters `role="list"` on a `section`, it flags this as a bad value because the role conflicts with the element's intended purpose as a sectioning landmark.

This matters for several reasons. First, assistive technologies like screen readers rely on the correct pairing of elements and roles to convey page structure. A `section` announced as a list creates a confusing, contradictory experience — the underlying DOM says "this is a document section" while the ARIA role says "this is a list." Second, browsers may handle conflicting semantics unpredictably, leading to inconsistent behavior across platforms. Third, the HTML specification explicitly defines which roles are valid on each element, and violating these rules means your markup is non-conforming.

The best fix is almost always to use native HTML list elements. The `ul`, `ol`, and `li` elements provide built-in list semantics that all browsers and assistive technologies understand without any extra ARIA attributes. Native elements also handle keyboard interaction and focus management correctly out of the box.

If your design requires a custom component where native list markup isn't feasible — for example, a complex card grid that functions as a list — you can apply `role="list"` to a semantically neutral element like `div` or `span`. Each direct child acting as a list item should then receive `role="listitem"`. This approach satisfies the ARIA specification while avoiding the element-role conflict.

If you actually need a `section` to group content within a page region and the list is just part of that section, nest a proper list inside the `section` rather than trying to make the `section` itself behave as a list.

## Examples

### ❌ Bad: `role="list"` on a `section` element

This triggers the validation error because `list` is not an allowed role for `section`.

```html
<section role="list">
  <div>Item A</div>
  <div>Item B</div>
</section>
```

### ✅ Fixed: Use native list elements (recommended)

Native lists provide the best accessibility support with no ARIA needed.

```html
<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>
```

### ✅ Fixed: Nest a list inside the `section`

If you need the sectioning semantics of `section` alongside a list, nest the list inside it.

```html
<section aria-labelledby="resources-heading">
  <h2 id="resources-heading">Resources</h2>
  <ul>
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</section>
```

### ✅ Fixed: ARIA roles on a neutral container

Use this only when native list markup is not possible, such as for highly custom UI components.

```html
<div role="list">
  <div role="listitem">Item A</div>
  <div role="listitem">Item B</div>
</div>
```

### ✅ Fixed: Remove the role entirely

If the content isn't actually a list, simply remove the `role` attribute and let the `section` carry its natural semantics.

```html
<section>
  <h2>Updates</h2>
  <div>Item A</div>
  <div>Item B</div>
</section>
```