ARIA：article 角色

article 角色表示页面的一部分，可以轻松地独立存在于页面、文档或网站上。它通常设置在相关的项目内容上，例如评论、论坛帖子、新闻文章或其他在同一页面上分组的项目。

html

<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>

此示例显示了页面上并排的两个文章，它们的结构可能相似且相关。

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

不要使用 role="article"。请改用 <article> 元素。

html

<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 文档结构角色表示文档、页面或网站的一部分，如果它独立存在，可以被视为完整的文档、页面或网站。一组文章部分的目的是指示它们之间的关系。

文章不被视为导航地标，但许多支持地标的辅助技术也支持在文章之间导航的方法。它们还可以支持指示文章内嵌套关系。

文章可以嵌套，表示嵌套的文章与它嵌套在其中的文章直接相关，但不一定与嵌套层次结构之外的文章相关。请参考示例了解具体用例。

如果文章是 feed 的一部分，则可以设置 aria-posinset 和 aria-setsize 属性，以指示此特定文章在 feed 中的位置。

在导致屏幕阅读器和其他辅助技术处于直通模式的 application 或其他小部件内，可以使用文章来指示这些小部件应切换回将封闭内容视为常规 Web 内容的处理方式。

不要在非语义元素上包含 article 角色，而应使用 <article> 元素。用户代理会将其转换为适当的无障碍信息，就像 article 角色一样。使用 <article> 元素还有助于搜索引擎更好地发现页面的结构。role="article" 或优选 <article> 的适当用法示例包括博客文章、论坛帖子、对论坛或博客文章的评论、社交媒体 feed 中的任何项目。