article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper 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 similarly and are related.
Instead of a
div with an
article role, use the <article> element. Always use native element if available.
Instead of using
<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>
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-setsize attributes set to indicate which position within the feed this particular article represents.
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 helps search engines 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
- In the context of a feed, indicates the position of this particular article within that feed, based on a count starting at 1.
- In the context of a feed, indicates how many article items there are within that feed.
This role does not support any specific keyboard interaction.
- Event handlers
- This role does not require any event handlers to be present.
- Changing attribute values
- When constructing a feed, set the
aria-setsizeattributes on each article role to the appropriate values, bearing in mind that
Always use native element if available. Instead of a
div with the
article role, the <article> element should be used.
- The restaurant recommendations feed display along with its separate documentation from the WAI-ARIA 1.1 authoring practices feed design pattern
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'article' in that specification.
|WAI-ARIA Authoring Practices
The definition of 'feed' in that specification.
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