Using the article role

The article role is used to identify a section of a page that forms an independent part of a document, page or site. Examples of an article include web log posts, newspaper or magazine articles and user-submitted comments. It is independent in that its contents could stand alone, for example in syndication.

Articles can be nested; for example, a web log entry on a site that accepts user-submitted comments could represent the comments as articles nested within the article for the web log entry.

The ARIA article role is similar to the <article> element; however the article element should still be given the ARIA role of article, since not all assistive technologies support HTML5 yet.

Possible effects on user agents and assistive technology

When the user navigates an element assigned the role of article, assistive technologies that typically intercept standard keyboard events SHOULD switch to document browsing mode, as opposed to passing keyboard events through to the web application.

Assistive technologies MAY provide a feature allowing the user to navigate the hierarchy of any nested article elements.

Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

<article role="article">
  <header>
    <h2>Blog Post</h2>
  </header>
  <section class="content">
    <p>A very interesting post</p>
  </section>
  <section class="comments">
    <div class="comment" role="article">
      <p>Meaningful comment</p>
    </div>
    <div class="comment" role="article">
      <p>Positive comment</p>
    </div>
  </section>
</article>

Notes

ARIA attributes used

ARIA Techniques - List of Roles

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources

WAI-ARIA specification for the article role