ARIA：区域角色

region 角色用于标识作者认为重要的文档区域。它是一种通用的地标，在没有其他合适的地标角色的情况下，可用于辅助导航。

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

描述

region 角色是一个 ARIA 地标 角色。region 角色应保留用于内容部分，这些部分足够重要，用户可能希望轻松导航到该部分，并将其列入页面摘要中。区域角色是一个更通用的术语，仅在需要标识的部分不能被其他地标角色（例如 banner、main、contentinfo、complementary 或 navigation）准确地描述时才使用。

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

region 地标角色的内容在与文档主内容分离后应有意义。

使用 <section> 元素将自动传达一个部分具有 region 角色，前提是该部分具有无障碍名称。开发人员应始终优先使用正确的语义 HTML 元素（在本例中为 <section>），而不是使用 ARIA。

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

aria-labelledby 或 aria-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 地标角色，请为每个地标提供唯一的标签。此标签将允许辅助技术用户能够快速了解每个地标的用途。

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

可以在 <svg> 的区域上声明 role="region" 以及 aria-label，以允许描述 SVG 的各个部分。

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# 区域
未知规范

另请参阅