ARIA：article 角色

article 角色表示页面中的一个部分，该部分可以轻松地在页面、文档或网站上独立成篇。它通常设置在相关内容项上，例如评论、论坛帖子、报刊文章，或在同一页面中归为一组的其他条目。

html

<div role="article">
  <h2>该部分的标题</h2>
  <p>该部分的段落。</p>
  <p>另一个段落。</p>
  用于与文章交互的控件，例如分享等。
</div>
<div role="article">…</div>

此示例展示了同一页面上并排显示的两个文章，它们可以采用相似的结构，并且相互关联。

备注：请使用 <article> 元素，而不是带有 article 角色的 <div>。如果可用，请始终使用原生元素

不要使用 role="article"，而应使用 <article> 元素。

html

<article>
  <h2>该部分的标题</h2>
  <p>该部分的段落。</p>
  <p>另一个段落。</p>
  用于与文章交互的控件，例如分享等。
</article>
<article>…</article>

描述

article 文档结构角色表示文档、页面或站点中的一个部分，如果将它单独拿出来，它可以被视为一个完整的文档、页面或站点。使用一组文章部分的目的在于表明它们彼此之间的关系。

文章不被视为导航地标，但许多支持地标的辅助技术也提供了在文章之间进行导航的方式。它们还可能支持指示文章内部的嵌套关系。

文章可以嵌套，这表明嵌套的文章与其所嵌套于其中的文章直接相关，但不一定与嵌套层级之外的文章相关。具体用例请参考示例。

如果文章是信息流（feed）的一部分，可以为它设置 aria-posinset 和 aria-setsize 属性，以表明这篇特定的文章在信息流中所处的位置。

在 application 或其他会导致屏幕阅读器和其他辅助技术进入直通模式（pass-through mode）的微件中，可以使用 article 来表明这些技术应切换回将所包含的内容视为常规 Web 内容的处理方式。

不应在非语义元素上添加 article 角色，而应使用 <article> 元素。用户代理会像处理 article 角色那样，将其转换为相应的无障碍信息。使用 <article> 元素还有助于搜索引擎更好地发现页面的结构。适合使用 role="article"（或者更推荐 <article>）的场景包括：博客文章、论坛帖子、针对论坛或博客文章的评论，以及社交媒体信息流中的条目。