标准 · ARIA

角色 文档结构

article

标记一个可以独立存在的自包含内容——博客文章、新闻报道、论坛回复或产品卡片。优先使用原生 <article> 元素;仅在无法使用 HTML 元素时才使用 role="article"。

何时使用

应使用 <article>。原生元素自带该角色,并与文档大纲算法集成。

在无法使用原生元素的情况下——通常是模板约束——才在 <div> 上使用 role="article"。每篇文章应包含自己的标题,以便屏幕阅读器用户识别其内容。

若要展示文章流(时间线、博客索引),应将其包裹在 role="feed" 中,并为每篇文章设置 aria-posinset / aria-setsize。否则,两个属性均可省略。

常见失误

  • 对每块内容都使用 <article>。该元素意味着”可以独立存在”。侧边栏中的简短说明文字很少构成一篇文章。
  • 在属于较大文档一部分而非自包含内容的 <section> 上使用 role="article"。应改用 role="region" 或直接使用 <section>
  • 文章没有标题。通过文章导航的屏幕阅读器用户将无法获知其名称。
  • 在评论线程中嵌套 <article> 时,未使用 aria-labelledby 为每个内嵌文章赋予独立的无障碍名称。

示例

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Why one main landmark per page</h2>
  <p>The <code>&lt;main&gt;</code> landmark identifies…</p>
</article>