# The “region” role is unnecessary for element “section”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-region-role-is-unnecessary-for-element-section
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification and WAI-ARIA guidelines establish that certain HTML elements carry implicit landmark roles. The `<section>` element implicitly maps to `role="region"`, meaning assistive technologies like screen readers already recognize it as a region landmark without any additional ARIA markup. This principle is captured by the first rule of ARIA use: "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Adding `role="region"` to a `<section>` doesn't change the element's behavior or how assistive technologies interpret it — it simply duplicates what the browser already communicates. The W3C Validator warns about this redundancy to encourage cleaner, more maintainable markup and to help developers understand native HTML semantics.

This same principle applies to other HTML elements with implicit roles: `<nav>` has an implicit `role="navigation"`, `<main>` has `role="main"`, `<aside>` has `role="complementary"`, `<header>` has `role="banner"` (when not nested in a sectioning element), and `<footer>` has `role="contentinfo"` (when not nested in a sectioning element). Adding these explicit roles to their corresponding elements will trigger similar validator warnings.

It's worth noting that a `<section>` element is only exposed as a `region` landmark by assistive technologies when it has an accessible name. If your `<section>` doesn't have an accessible name (via `aria-label`, `aria-labelledby`, or similar mechanisms), screen readers may not treat it as a navigable landmark — but this still doesn't mean you should add `role="region"`, since the implicit role mapping remains the same regardless.

## How to fix it

1. Remove the `role="region"` attribute from any `<section>` element.
2. If you want the section to be a meaningful landmark for screen reader users, give it an accessible name using `aria-labelledby` (pointing to a heading) or `aria-label`.
3. Never add explicit ARIA roles that duplicate the implicit role of a native HTML element.

## Examples

### Incorrect: redundant role on section

```html
<section role="region">
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>
```

### Correct: section without redundant role

```html
<section>
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>
```

### Correct: section with an accessible name for landmark navigation

Using `aria-labelledby` to associate the section with its heading ensures assistive technologies expose it as a named landmark region:

```html
<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>
```

### Correct: section with aria-label when no visible heading exists

```html
<section aria-label="Contact information">
  <p>Email us at info@example.com</p>
</section>
```

### Incorrect: redundant roles on other landmark elements

The same principle applies to other native landmark elements. Avoid these patterns:

```html
<nav role="navigation">
  <a href="/">Home</a>
</nav>

<main role="main">
  <p>Page content</p>
</main>

<aside role="complementary">
  <p>Related links</p>
</aside>
```

### Correct: landmark elements without redundant roles

```html
<nav>
  <a href="/">Home</a>
</nav>

<main>
  <p>Page content</p>
</main>

<aside>
  <p>Related links</p>
</aside>
```