role="contentinfo" 应直接用于 <footer> 元素，因其本身已隐含该语义；若用 <div> 则属错误，仅当无法使用 <footer> 时才需显式添加，且内容须严格限定为版权、联系方式等静态元信息，不得嵌套导航或表单。
role="contentinfo" 应该用在哪个 HTML 元素上
直接套在 <div> 上是最常见的错误。WAI-ARIA 规范明确建议：优先使用语义化 HTML5 元素，<footer> 本身已隐含 role="contentinfo"，无需手动添加。只有在无法使用 <footer>（比如旧项目用 <div class="footer">）时，才需显式加 role="contentinfo"。
注意：<footer> 必须是其最近的章节根元素（如 <body>、<article>、<section>）的**直接子元素或语义后代**，否则会被屏幕阅读器误读为局部页脚而非全局页脚。
为什么不能给整个页脚容器加 role="contentinfo" 后再嵌套导航或搜索框
role="contentinfo" 的语义边界非常严格——它只应包裹真正属于“版权、法律声明、联系方式”这类静态元信息的内容。一旦混入 <nav>、<form> 或交互控件，会破坏辅助技术对页面结构的解析逻辑。
- 屏幕阅读器进入
contentinfo区域后，通常会跳过内部的navigation或search角色，导致这些功能不可发现 - WCAG 要求
contentinfo内部不应包含主要导航或操作入口 - 正确做法：把版权信息单独用
<footer><p>© 2024 XXX. All rights reserved.</p></footer>，导航和搜索放在独立的<nav>或<aside>中
如何验证 role="contentinfo" 是否被正确识别
不能只靠浏览器开发者工具看属性是否存在。必须用真实辅助技术测试：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Chrome + NVDA：按
Insert + F7打开元素列表，确认contentinfo出现在“Landmarks”中且内容描述准确 - Safari + VoiceOver：按
Ctrl + Option + U呼出 Rotor，选择 “Landmarks”，检查是否能快速跳转到该区域 - Lighthouse（v10+）：运行无障碍审计，若出现 “
[aria-*] attributes do not have valid values” 提示，说明role使用位置或嵌套违规
常见误报点：<footer role="contentinfo"><a href="#">联系我们</a></footer> —— 单个链接不算“信息性内容”，应补充公司地址、邮箱、备案号等实体信息。
兼容性与 polyfill 的现实情况
所有现代浏览器（Chrome 80+、Firefox 75+、Safari 14+）原生支持 role="contentinfo"，但 IE11 及更早版本完全忽略该 role。不过，由于 <footer> 在 IE 中已有基本语义支持，实际影响有限。
不需要引入 ARIA polyfill。唯一需要手动干预的场景是：你用了 <div role="contentinfo"> 且必须支持 IE11，此时应额外加 aria-label="页脚信息"，因为 IE11 对无标签的 contentinfo 不播报。
真正容易被忽略的是多语言站点：如果页脚里有中英文双语版权信息，别只写 <p lang="zh">© 2024 公司</p><p lang="en">© 2024 Company</p>，而要确保父容器声明 lang 或用 aria-labelledby 显式关联主标题，否则屏幕阅读器可能随机切语言朗读。
