hidden 属性使元素彻底消失，不渲染、不占空间、不响应交互、不进入可访问性树；aria-hidden="true" 仅屏蔽读屏软件，视觉照常显示；display: none 彻底移除渲染，visibility: hidden 保留布局位置。
hidden 属性会让元素彻底消失，不只是“看不见”
写 hidden 就等于告诉浏览器：“这个元素不该存在”，它不渲染、不占空间、不响应点击、不被 Tab 键聚焦、不进可访问性树、也不随表单提交。哪怕你写了 display: block，只要 hidden 存在，它就无效——hidden 优先级高于 CSS。
常见错误包括：hidden="false"（无效，属性存在即生效）、setAttribute('hidden', 'false')（只是多加了个属性，依然隐藏）、用 hidden 替代 input type="hidden"（两者用途完全不同）。
-
hidden是布尔属性：只写hidden或el.hidden = true即可；显示时必须el.removeAttribute('hidden') - IE9 不支持
hidden，且连[hidden] { display: none; }都不生效（IE9 不认属性选择器） - 带
hidden的input、select等控件，在form.submit()和new FormData(form)中完全被忽略
aria-hidden="true" 只是“对读屏软件说不”，视觉照常显示
aria-hidden="true" 不影响布局、不阻止交互、不改变 DOM 结构——按钮还是能点、Tab 还是能进、CSS 样式照常生效。它唯一作用是让屏幕阅读器跳过该元素及其所有子节点。
典型误用场景：给一个 <button aria-hidden="true">提交</button> —— 用户能看到按钮、能点、能 Tab 进去，但读屏完全没提示，造成语义断裂。这不是隐藏方案，而是“辅助功能过滤开关”。
立即学习“前端免费学习笔记（深入）”；
- 只用于纯装饰性内容：如图标
<svg aria-hidden="true"></svg>、轮播指示器容器、无文本的分隔线 - 若图标旁已有明确文字（如“搜索”按钮 + 放大镜图标），可安全加在图标上；但不要加在文字本身或可聚焦容器上
- 模态框开启时，常给背景区域加
aria-hidden="true"，关闭时必须手动移除，否则读屏状态会“卡住”
display: none 和 visibility: hidden 的实际行为差异
display: none 让元素彻底退出渲染树：不占空间、子元素全失效、多数浏览器会暂停 <video> 播放；visibility: hidden 则保留布局位置，子元素可通过 visibility: visible 单独显形——这点常被忽略，导致意外内容露出。
动画中不能用 display: none 做过渡（transition 对它无效），得配合 opacity: 0 + visibility: hidden 实现渐隐效果。
-
display: none触发重排（reflow），visibility: hidden只触发重绘（repaint），但现代浏览器下性能差异几乎不可测 - 两者都会让元素从可访问性树中移除，等效于同时启用了
aria-hidden="true" - 仅靠 CSS 隐藏无法保证语义安全：若用户禁用 CSS，
display: none就失效了；而hidden是 DOM 层原生控制，更可靠
什么时候该组合使用？
真正需要“视觉隐藏 + 辅助技术隐藏”的场景（比如图表旁的数据表格），不能只用 hidden，因为那会把数据也从读屏中剔除。正确做法是：用 CSS 实现视觉隐藏（如 visually-hidden class），再显式设 aria-hidden="false" 确保读屏可读，并通过 aria-describedby 关联图表与表格。
混用风险很高：div hidden aria-hidden="true" 是冗余甚至冲突的——hidden 已经屏蔽了读屏，再加 aria-hidden 没意义；反过来，只加 aria-hidden="true" 却没做视觉隐藏，用户看到空白却听不到解释，体验更差。
- 想语义化移除无关内容 → 用
hidden - 想保留视觉但跳过读屏 → 用
aria-hidden="true"（且确认它真无语义） - 想视觉隐藏但保留读屏可访问 → 用
visually-hiddenclass +aria-hidden="false"
最难的不是语法怎么写，而是每次加 aria-hidden 前问自己一句：如果读屏用户听不到它，还能准确理解当前界面在干什么吗？
