ARIA: region role
region 角色用于识别作者认为重要的文档区域。它是一个通用的地标,当其他地标角色都不适用时,可用于辅助导航。
<div role="region" aria-label="Example">
<!-- region content -->
</div>
描述
region 角色是一个 ARIA 地标角色。region 角色应保留给作者认为足够重要的内容区域,以便用户可以轻松导航到该区域,并在页面摘要中列出。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。
示例
<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 地标角色,请为每个角色提供唯一的标签。此标签将允许辅助技术用户能够快速理解每个地标的用途。
<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 |
| 未知规范 |