ARIA: region role

region 角色用于识别作者认为重要的文档区域。它是一个通用的地标,当其他地标角色都不适用时,可用于辅助导航。

html
<div role="region" aria-label="Example">
  <!-- region content -->
</div>

描述

region 角色是一个 ARIA 地标角色。region 角色应保留给作者认为足够重要的内容区域,以便用户可以轻松导航到该区域,并在页面摘要中列出。Region 角色是一个更通用的术语,仅当需要识别的区域无法被其他地标角色(如 bannermaincontentinfocomplementarynavigation)准确描述时才应使用。

每个具有 region 角色的元素都应包含一个描述该区域内容用途的标签,最好使用 aria-labelledby 引用一个可见的标题。如果没有可见的合适标题,则应使用 aria-label

如果 region 地标角色的内容与文档主内容分离,仍然应该是有意义的。

使用 <section> 元素,如果它有一个可访问的名称,会自动传达该区域具有 region 角色。开发者应始终优先使用正确的语义 HTML 元素,在本例中是 <section>,而不是使用 ARIA。

关联的 WAI-ARIA 角色、状态和属性

aria-labelledbyaria-label

使用此属性为区域设置标签。通常,aria-labelledby 属性的值将是用于为该部分命名的元素的 id。如果没有可见的合适标题,则应使用 aria-label

示例

html
<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">
    This heading's `id` attribute helps this region have an accessible name
  </h2>
  <!-- region content -->
</div>

可访问性考虑

谨慎使用!地标角色旨在少量使用,以识别文档中较大的整体区域。使用过多的地标角色会在屏幕阅读器中产生“噪音”,使理解页面整体布局变得困难。

只有当没有其他相关的 内容分节元素或 地标角色适用时,才使用 region 角色。如果页面上存在多个区域,可能值得重新审视页面的整体结构。

最佳实践

优先使用 HTML

使用 <section> 元素会自动传达该元素具有 region 角色。如果可能,请优先使用语义化的 <section> 元素而不是 region 角色。

标记地标

如果文档中有多个 region 地标角色,请为每个角色提供唯一的标签。此标签将允许辅助技术用户能够快速理解每个地标的用途。

html
<div role="region" aria-labelledby="use-discretion">
  <h3 id="use-discretion">Please use the `region` role with discretion</h3>
  <!-- content -->
</div>

…

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">Please reconsider your document structure</h3>
  <!-- content -->
</div>

在此示例中,区域的标签是通过 aria-labelledby 属性生成的。

具有溢出文本的滚动内容区域

如果存在一个带有 tabindex="0" 的内容区域,请添加 role="region" 以向屏幕阅读器用户传达这是一个通用区域。这样做是为了让仅通过键盘操作的用户能够滚动内容溢出的区域。

SVG

role="region" 可以与 aria-label 一起声明在 <svg> 区域上,以便对 SVG 的各个部分进行描述。

规范

规范
无障碍富互联网应用程序 (WAI-ARIA)
# region
未知规范

另见