ARIA:contentinfo 角色

contentinfo 角色定义了一个页脚,其中包含在站点内每个文档中都能找到的标识信息,例如版权信息、导航链接和隐私声明。这个部分通常被称为页脚。

html
<div role="contentinfo">
  <h2>Footer</h2>
  <!-- footer content -->
</div>

这是一个网站页脚。建议使用 <footer> 元素来代替。

html
<footer>
  <h2>Footer</h2>
  <!-- footer content -->
</footer>

描述

contentinfo 角色是 一个地标,用于标识页面页脚。辅助技术可以使用地标来快速识别和导航到文档的大部分区域。每页应该只有一个顶级的 contentinfo 地标角色。

每页应该只有一个 contentinfo 地标,该地标是通过使用 <footer> 元素或声明 role="contentinfo" 来创建的。通过 <iframe> 嵌入的内容中存在的 contentinfo 地标不计入此限制。

注意:使用 <footer> 元素将自动传达一个区域具有 contentinfo 的角色。开发者应该始终优先使用正确的语义 HTML 元素,而不是使用 ARIA,并确保 测试 VoiceOver 中已知的 Issues

示例

html
<body>
  <!-- other page content -->

  <div role="contentinfo">
    <h2>MDN Web Docs</h2>
    <ul>
      <li><a href="#">Web Technologies</a></li>
      <li><a href="#">Learn Web Development</a></li>
      <li><a href="#">About MDN</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
    <p>
      © 2005-2012 Mozilla and individual contributors. Content is available
      under <a href="#">these licenses</a>.
    </p>
  </div>
</body>

可访问性考虑

谨慎使用

地标角色旨在标识文档的大部分区域。使用过多的地标角色可能会在屏幕阅读器中产生“噪音”,使页面整体布局难以理解。

每页一个 contentinfo 地标

<body> 元素

每个文档应该只有一个 contentinfo 地标,作为 <body> 元素的直接后代使用。

巨型页脚

不要在文档的页脚内嵌套额外的 <footer> 元素或 contentinfo 地标。请改用其他 内容分段元素

标记地标

多个地标

如果文档中存在多个 contentinfo 地标角色或 <footer> 元素,请为每个地标使用 aria-label 属性提供一个标签。这个标签将允许辅助技术用户快速理解每个地标的用途。

html
<body>
  …

  <article>
    <h2>Everyday Pad Thai</h2>
    <!-- article content -->
    <footer aria-label="Everyday Pad Thai metadata">
      <p>
        Posted on <time datetime="2021-09-23 12:17">September 23</time> by
        <a href="#">Lisa</a>.
      </p>
    </footer>
  </article>

  …

  <footer aria-label="Footer">
    <!-- footer content -->
  </footer>
</body>

冗余描述

屏幕阅读器会播报地标的类型。因此,您不需要在标签中描述地标是什么。例如,声明 role="contentinfo" 并带有 aria-label="Footer" 的标签可能会被冗余地播报为“contentinfo footer”。

最佳实践

优先使用 HTML

当它是 <body> 元素的直接后代时,使用 <footer> 元素将自动传达一个区域具有 contentinfo 的角色(除了 VoiceOver 中 已知的一个问题)。如果可能,请优先使用 <footer>。请注意,嵌套在 articleasidemainnavsection 中的 footer 元素不被视为 contentinfo

新增优势

某些技术(如浏览器扩展)可以生成页面上所有地标角色的列表,允许非屏幕阅读器用户也能快速识别和导航到文档的大部分区域。

规范

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

另见