WAI-ARIA: Role=Article
A section of a page that consists of a composition that forms an independent part of a document, page, or site.
Description
A section of a page that consists of a composition that forms an independent part of a document, page, or site.
An article is not a navigational landmark, but may be nested to form a discussion where assistive technologies could pay attention to article nesting to assist the user in following the discussion. An article could be a forum post, a magazine or newspaper article, a web log entry, a user-submitted comment, or any other independent item of content. It is independent in that its contents could stand alone, for example in syndication. However, the element is still associated with its ancestors; for instance, contact information that applies to a parent body element still covers the article as well. When nesting articles, the child articles represent content that is related to the content of the parent article. For instance, 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. Author, heading, date, or other information associated with an article does not apply to nested articles.
When the user navigates to 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.
When an article is in the context of a feed, the author MAY specify values for aria-posinset and aria-setsize.
Role=Article Example
HTML Example
<div role="article">..</div>HTML5 Example
<main>
<article role="article">...</article>
<aside role="complementary">...</aside>
</main>Characteristics
Superclass Role
- document
Related Concepts
- HTML article
Supported States and Properties
- aria-posinset
- aria-setsize
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
Use the HTML5 <article> tag.
<article class=”film_review”>
<header>
<h2>Jurassic Park</h2>
</header>
<section class=”main_review”>
<p>Dinos were great!</p>
</section>
<section class=”user_reviews”>
<article class=”user_review”>
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime=”2015-05-16 19:00″>May 16</time>
by Lisa.
</p>
</footer>
</article>
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=article.
