# The “article” role is unnecessary for element “article”.

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

Every HTML semantic element carries an implicit ARIA role that assistive technologies already recognize. The `<article>` element has a built-in role of `article`, which signals that the content represents a self-contained composition — such as a blog post, news story, forum comment, or any section that could be independently distributed or reused. When you explicitly add `role="article"` to an `<article>` element, you're telling the browser and screen readers something they already know.

While this redundancy won't break anything functionally, it creates unnecessary noise in your markup and goes against the W3C's guidance on using ARIA. The first rule of ARIA use states: "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so." Redundant roles make code harder to maintain and can signal to other developers that something non-standard is happening when it isn't.

The `role="article"` attribute is useful when applied to non-semantic elements like `<div>` or `<span>` that need to convey article semantics — for instance, in legacy codebases where changing the element isn't feasible. But on the `<article>` element itself, it should simply be removed.

## Examples

### ❌ Redundant role on `<article>`

This triggers the validator warning because `role="article"` duplicates the element's implicit role:

```html
<article role="article">
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</article>
```

### ✅ Fixed: no explicit role needed

Simply remove the `role` attribute. The `<article>` element already communicates the `article` role to assistive technologies:

```html
<article>
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</article>
```

### ✅ Appropriate use of `role="article"` on a non-semantic element

If you cannot use the `<article>` element for some reason, applying the role to a generic element like `<div>` is valid and useful:

```html
<div role="article">
  <h2>Breaking News</h2>
  <p>A rare bird was spotted in the city park this morning.</p>
</div>
```

### ✅ Multiple articles within a feed

A common pattern is nesting several `<article>` elements inside a feed. No explicit roles are needed on the articles themselves:

```html
<section role="feed" aria-label="Latest posts">
  <article>
    <h2>First Post</h2>
    <p>Content of the first post.</p>
  </article>
  <article>
    <h2>Second Post</h2>
    <p>Content of the second post.</p>
  </article>
</section>
```

This same principle applies to other semantic elements with implicit roles — for example, `<nav>` already has `role="navigation"`, `<main>` has `role="main"`, and `<header>` has `role="banner"`. Avoid adding redundant roles to any of these elements to keep your HTML clean and standards-compliant.