Role Document structure

`article`

Marks a self-contained composition that could stand on its own — a blog post, news story, forum reply, or product card. Use the native <article> element first; reach for role="article" only when you cannot use the HTML element.

When to use

Use <article>. Native carries the role for free and integrates with the document outline algorithm.

role="article" on a <div> is appropriate when you cannot use the native element — usually a templating constraint. Each article should contain its own heading so screen-reader users can identify it.

For a feed of articles (a timeline, a blog index), wrap them in role="feed" and set aria-posinset / aria-setsize on each article. Otherwise, leave both attributes off.

Common failures

Using <article> for every block of content. The element implies “stands on its own”. A blurb in a sidebar is rarely an article.
role="article" on a <section> that is part of a larger document, not a self-contained composition. Use role="region" or just <section> instead.
Article with no heading. Screen-reader users navigating by article have no name for it.
Nesting <article> inside <article> for a comment thread without using aria-labelledby to give each inner article a distinct accessible name.

Example

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Why one main landmark per page</h2>
  <p>The <code>&lt;main&gt;</code> landmark identifies…</p>
</article>