ARIA: article role

{{ariaref}}The article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a web site. It is usually set on related content items such as comments, forum posts, news paper articles or other items grouped together on one page.

<div role="article">
<h2>Heading of the segment</h2>
<p>Paragraph for the segment.</p>
<p>Another paragraph.</p>
... controls to interact with the article, share it, etc. ...
</div>
<div role="article"> ... </div>

This example shows two articles side by side on one page that could be structured simiarly, and are related.

Instead of a div with an article role, use the <article> element. Always use native element if available.

Instead of using role="article", the <article> element can be used.

<article>
<h2>Heading of the segment</h2>
<p>Paragraph for the segment.</p>
<p>Another paragraph.</p>
... controls to interact with the article, share it, etc. ...
</article>
<article> ... </article>

Description

The article role denotes a section of a document, page or site that, if it were standing on its own, could be viewed as a complete document, page or site. The aim of a set of article sections is to indicate their relationship to one another.

Articles are not considered a navigational landmark, but many assistive technologies that support landmarks also support a means to navigate among articles. They may also support indication of nesting relationships within articles.

Articles can be nested, indicating that a nested article directly relates to the one it is nested in, but not necessarily to the ones outside the nesting hierarchy. See the examples for specific use cases.

If an article is part of a feed, it can have the aria-posinset and aria-setsize attributes set to indicate which position within the feed this particular article is representing.

Inside an application or other widget that causes screen readers and other assistive technologies to be in pass-through mode, an article can be used to indicate that these should switch back to treating the enclosed content as regular web content.

Instead of including the article role on a non-semantic element, the <article> element should be used. User agents translate this to the appropriate accessibility information just like the article role. Using the <article> element also makes sure search engines can better discover the structure of a page. Examples of appropriate uses of the role="article", or preferably <article>, include blog posts, forum posts, a comment to a forum or blog post, a comment to a comment to a forum or blog post, any an item in a social media feed.

Associated WAI-ARIA Roles, States, and Properties

aria-posinset
In the context of a feed, indicates the position of this particular article within that feed, based on a count starting at 1.
aria-setsize
In the context of a feed, indicates how many article items there are within that feed.

Keyboard Interactions

This role does not support any specific keyboard interaction.

Required JavaScript features

Event handlers
This role does not require any event handlers to be present.
Changing attribute values
When constructing a feed, set the aria-posinset and aria-setsize attributes on each article role to the appropriate values, bearing in mind that aria-posinset is 1-based.

Always use native element if available. Instead of a div with the article role, the <article> element should be used.

Examples

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'article' in that specification.
Recommendation
WAI-ARIA Authoring Practices
The definition of 'feed' in that specification.
Working Draft

Precedence order

This role corresponds to the <article> element in HTML, and that element should be used instead if possible. This role does not require any specific roles to be present among its children. It is the only role allowed as a direct child of an element with the feed role.

See Also

Document Tags and Contributors

Contributors to this page: estelle, jswisher, MarcoZ
Last updated by: estelle,