角色 文档结构
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><main></code> landmark identifies…</p>
</article>