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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-section-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 value `section` does not exist in the WAI-ARIA specification. ARIA defines a specific set of role values, and `section` is not among them. This is likely a confusion between the HTML element name `<section>` and the ARIA role `region`, which is the role that the `<section>` element implicitly maps to. Because `section` is not a recognized role, the validator rejects it as an invalid value.

This matters for several reasons. First, assistive technologies like screen readers rely on ARIA roles to communicate the purpose of elements to users. An unrecognized role value may be ignored entirely or cause unexpected behavior, degrading the experience for users who depend on these tools. Second, the `<section>` element already carries native semantics equivalent to `role="region"` (when it has an accessible name), so adding a redundant or incorrect role provides no benefit and introduces potential problems.

According to the ARIA in HTML specification, you should generally avoid setting a `role` on elements that already have appropriate native semantics. The `<section>` element's implicit role is `region`, so explicitly adding `role="region"` is redundant in most cases. The simplest and best fix is to remove the `role` attribute altogether and let the native HTML semantics do their job.

If you do need to override an element's role for a specific design pattern (for example, turning a `<section>` into a navigation landmark), use a valid ARIA role from the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria-1.2/#role_definitions).

## Examples

### Incorrect: using the invalid `section` role

```html
<section role="section">
  <h2>About Us</h2>
  <p>Learn more about our team.</p>
</section>
```

This triggers the validation error because `section` is not a valid ARIA role value.

### Correct: remove the role attribute

```html
<section>
  <h2>About Us</h2>
  <p>Learn more about our team.</p>
</section>
```

The `<section>` element already provides the correct semantics. No `role` attribute is needed.

### Correct: use a valid ARIA role if needed

If you have a specific reason to assign a role, use a valid one. For example, if a `<section>` is being used as a navigation landmark:

```html
<section role="navigation" aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</section>
```

In practice, you would typically use a `<nav>` element instead, which has the `navigation` role natively. This example simply illustrates that if you do apply a `role`, it must be a valid ARIA role value.

### Correct: explicit `region` role with an accessible name

If you want to explicitly mark a section as a named region landmark, you can use `role="region"` along with an accessible name. However, this is redundant when using `<section>` with an `aria-label` or `aria-labelledby`, since the browser already maps it to `region`:

```html
<!-- Preferred: native semantics handle the role -->
<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <p>Explore our product features.</p>
</section>

<!-- Also valid but redundant -->
<section role="region" aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <p>Explore our product features.</p>
</section>
```

Both are valid HTML, but the first approach is cleaner and follows the principle of relying on native semantics whenever possible.