HTML代码中aria-hidden与hidden属性对比-html教程-PHP中文网

hidden 属性使元素彻底消失，不渲染、不占空间、不响应交互、不进入可访问性树；aria-hidden="true" 仅屏蔽读屏软件，视觉照常显示；display: none 彻底移除渲染，visibility: hidden 保留布局位置。

html代码中aria-hidden与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></video> 播放；visibility: hidden 则保留布局位置，子元素可通过 visibility: visible 单独显形——这点常被忽略，导致意外内容露出。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

动画中不能用 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" 却没做视觉隐藏，用户看到空白却听不到解释，体验更差。