ARIA:contentinfo 角色
contentinfo 角色定义了一个页脚,其中包含在站点内每个文档中都能找到的标识信息,例如版权信息、导航链接和隐私声明。这个部分通常被称为页脚。
<div role="contentinfo">
<h2>Footer</h2>
<!-- footer content -->
</div>
这是一个网站页脚。建议使用 <footer> 元素来代替。
<footer>
<h2>Footer</h2>
<!-- footer content -->
</footer>
描述
contentinfo 角色是 一个地标,用于标识页面页脚。辅助技术可以使用地标来快速识别和导航到文档的大部分区域。每页应该只有一个顶级的 contentinfo 地标角色。
每页应该只有一个 contentinfo 地标,该地标是通过使用 <footer> 元素或声明 role="contentinfo" 来创建的。通过 <iframe> 嵌入的内容中存在的 contentinfo 地标不计入此限制。
注意:使用 <footer> 元素将自动传达一个区域具有 contentinfo 的角色。开发者应该始终优先使用正确的语义 HTML 元素,而不是使用 ARIA,并确保 测试 VoiceOver 中已知的 Issues。
示例
<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> 元素的直接后代使用。
巨型页脚
标记地标
多个地标
如果文档中存在多个 contentinfo 地标角色或 <footer> 元素,请为每个地标使用 aria-label 属性提供一个标签。这个标签将允许辅助技术用户快速理解每个地标的用途。
<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>。请注意,嵌套在 article、aside、main、nav 或 section 中的 footer 元素不被视为 contentinfo。
新增优势
某些技术(如浏览器扩展)可以生成页面上所有地标角色的列表,允许非屏幕阅读器用户也能快速识别和导航到文档的大部分区域。
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # contentinfo |
| 未知规范 |