角色地标

`region`

用于不适合 banner、main、navigation、complementary 或 contentinfo 的内容的通用地标 — 但该内容足够重要，值得用户导航至此。<section> 仅在拥有无障碍名称时，才会成为 region 地标。

何时使用

当页面中存在一个有意义的区域、但该区域不匹配任何其他地标，且屏幕阅读器用户应能直接跳转到此处时使用 — 例如”精选产品”栏、多步骤表单的当前步骤，或大型应用中的聊天记录区域。

<section> 仅在拥有无障碍名称（aria-label 或 aria-labelledby）时，才会被暴露为 region 地标。没有名称的 <section> 只是一个通用分组 — 不会作为地标暴露。这是有意为之的设计：过多的地标会使地标菜单失去意义。

在 <div> 上使用 role="region" 的效果相同 — 同样需要名称。

何时使用 region 而非 group

使用 `role="region"`（或 `<section aria-label>`）	使用 `role="group"`
值得作为地标导航的主要页面区域	无需地标状态的相关控件集合
每页一到两个	每页可以有多个
必须有无障碍名称	名称可选

如有疑问，可以问自己：“是否希望屏幕阅读器用户能够直接跳转到此处？“如果是，用 region；如果否，用 group。

常见错误

<section> 没有 aria-label 或 aria-labelledby。不构成地标；包裹元素对无障碍没有任何作用。
将每个 <section> 都标记为 region。这会使地标菜单过于拥挤，削弱每个地标的价值。
aria-label="Section" — 毫无意义。标签应描述该区域的独特内容。
将 role="region" 用于侧边栏 — 应使用 complementary。应选择最具体的地标角色。
在外层 <div> 和内层 <section> 上都使用 role="region" — 对同一内容创建了重复的地标。

示例

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>