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 中的已知问题进行测试。

示例

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 页脚”。

最佳实践

优先使用 HTML

当它是 <body> 的直接后代时，使用 <footer> 元素将自动传达一个部分具有 contentinfo 的角色（除了 VoiceOver 中的已知问题）。如果可能，优先使用 <footer>。请注意，嵌套在 article、aside、main、nav 或 section 内的 footer 元素不被视为 contentinfo。

额外的好处

某些技术（例如浏览器扩展）可以生成页面中所有地标角色的列表，允许非屏幕阅读器用户快速识别和导航到文档的较大部分。

规范

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

另请参阅