aria-hidden="true"仅用于视觉存在但语义上需屏蔽屏幕阅读器的内容，如装饰图标、重复导航文字等；它不影响DOM存在与CSS样式，但会递归屏蔽子元素可访问性，且不阻止焦点进入，须配合tabindex="-1"或focus管理使用。
aria-hidden="true" 什么时候该用
它只该用于**视觉上存在、但语义上不该被屏幕阅读器读出的内容**，比如装饰性图标、重复的导航文字、动态加载中提示等。不是所有“看不见”的内容都适合加 aria-hidden="true——如果元素是通过 display: none 或 visibility: hidden 隐藏的，它本就不在可访问树中，再加 aria-hidden 是冗余甚至有害的。
常见误用场景：
- 给一个折叠菜单容器设
aria-hidden="true"，但里面按钮仍可聚焦 → 屏幕阅读器跳过，键盘用户却能 tab 进去 → 状态不一致 - 在 modal 背景遮罩层上加
aria-hidden="true"，却没同步管理焦点 → 键盘焦点仍可逃逸到背后内容 - 对整个
<main></main>加aria-hidden="true"来“隐藏页面”，而没提供替代的可访问入口 → 直接导致整页不可读
aria-hidden="true" 和 display: none 的区别
display: none 会从渲染树和可访问树中完全移除元素；aria-hidden="true" 只影响可访问树，元素仍在 DOM 中、仍可被 CSS 控制样式、仍可能响应事件（如点击）。
这意味着：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若想彻底禁用交互 + 隐藏 + 不被读取 → 优先用
display: none（或hidden属性） - 若需保留视觉呈现（如图标）、仅屏蔽语音输出 → 用
aria-hidden="true" - 若元素有子节点，
aria-hidden="true"会**递归生效**：父元素设了，所有子元素默认不被读取（除非子元素显式设aria-hidden="false"） -
aria-hidden="true"对<input>、<button></button>等可聚焦元素无效 —— 它们仍能获得焦点，只是没朗读名 → 此时必须配合tabindex="-1"或disabled
如何安全地配合 focus 管理使用
最常出问题的地方：弹窗打开时，背景内容不该被读取也不该被聚焦，但仅靠 aria-hidden="true" 不够。
正确做法是组合控制：
- 弹窗容器设
aria-modal="true"（现代推荐），或手动设aria-hidden="true"给所有非模态区域 - 确保模态框内至少有一个可聚焦元素，并在打开后
focus()到它（如第一个<button></button>或<input>） - 用 JavaScript 动态切换
aria-hidden，不要写死在 HTML 里 —— 否则状态与 DOM 不同步 - 监听
keydown捕获Tab，限制焦点在模态框内循环（trap focus），否则用户按 Tab 仍可能跳到隐藏区域的可聚焦元素上
示例片段：
<div id="modal" aria-modal="true" role="dialog"> <button id="close-btn">关闭</button> <input type="text" aria-label="搜索关键词"> </div> <div id="main-content" aria-hidden="true">...</div>
容易被忽略的兼容性和测试点
aria-hidden 在主流屏幕阅读器（NVDA、JAWS、VoiceOver）中支持良好，但行为细节有差异：
- VoiceOver on iOS 有时会忽略动态添加的
aria-hidden="true"，需触发一次aria-live或重置焦点来刷新上下文 - JAWS 对嵌套
aria-hidden的处理较严格，若父层aria-hidden="true"，子层设aria-hidden="false"可能不生效，建议避免深层覆盖 - 不能依赖
aria-hidden实现安全隔离 —— 它不阻止 JS 访问、不防爬虫、不替代 proper ARIA roles（如该用role="presentation"的地方别硬套aria-hidden） - 测试时务必关掉图形界面，纯靠键盘 + 屏幕阅读器走一遍流程：能否进、能否出、朗读是否合理、焦点是否卡住
最麻烦的从来不是加不加 aria-hidden，而是加在哪一层、何时同步更新、以及是否忘了管焦点。
