display:none 彻底移除元素渲染与可访问性，跳过布局计算、绘制及辅助技术暴露；hidden 是语义化隐藏，保留 dom 但支持无障碍映射；visibility:hidden 仍可被读取，opacity:0 仍可交互。

display:none 会彻底移除元素的渲染和可访问性

它不只是“看不见”，而是让浏览器完全跳过该元素的布局计算、绘制和辅助技术暴露。屏幕阅读器不会读取 display:none 元素里的任何内容，搜索引擎也不会索引它，JavaScript 查询 getBoundingClientRect() 或 offsetTop 会返回 0 或 NaN。

常见误用场景：

• 用 display:none 隐藏表单错误提示，但没同步移除 aria-invalid="true" 或关联的 aria-describedby，导致屏幕阅读器仍报错却找不到提示文本
• 在响应式切换导航时，仅对移动端菜单加 display:none，但没处理焦点管理（比如按 Tab 键仍能进入被隐藏的链接）
• 动画中用 display:none 配合 transition —— 不生效，因为 display 是不可过渡的 CSS 属性

hidden 属性是语义化隐藏，保留 DOM 结构与可访问控制权

hidden 是 HTML5 原生布尔属性，效果接近 display:none，但它明确表达了“此内容当前不适用于当前上下文”，且可被 JavaScript 动态切换、被 CSS 覆盖（比如 [hidden] { display: block; }），更重要的是：它支持无障碍 API 的标准映射 —— 浏览器会将其暴露为 aria-hidden="true"，但允许开发者显式覆盖。

使用建议：

• 适合临时性、逻辑性隐藏，比如未激活的 tab 面板、未展开的详情区域
• 比 display:none 更易维护：不用操心是否漏写了对应 class，也不用在 JS 里反复操作样式对象
• 注意兼容性：hidden 在 IE 中完全不支持，如需兼容，得回退到 display:none + 手动管理 aria-hidden

visibility:hidden 和 opacity:0 的行为差异很关键

这两者都保持元素在文档流中占位，但语义和可访问性完全不同：

• visibility:hidden：元素不可见、不可交互，但屏幕阅读器默认仍会读取其内容（除非额外加 aria-hidden="true"）
• opacity:0：视觉上透明，但元素仍可聚焦、可点击、可被屏幕阅读器读取 —— 它根本不是隐藏，只是“看不见而已”
• 若目标是“隐藏但保留占位”，优先用 visibility:hidden；若目标是做淡入动画，必须用 opacity，但得同步加 pointer-events:none 和 aria-hidden="true" 防止误操作

真正影响可访问性的不是“怎么藏”，而是“藏没藏干净”

无论用哪种方式，只要元素还存在于 DOM 中，就可能被键盘焦点捕获、被屏幕阅读器意外读出、或被自动化工具判定为“内容缺失”。最稳妥的做法是：

• 隐藏动态内容时，同步更新 aria-hidden、tabindex="-1"、inert（若支持）
• 服务端渲染或静态生成页中，避免把本不该出现的内容先塞进 HTML 再靠 CSS 隐藏 —— 直接不输出更干净
• display:none 和 hidden 都不能替代逻辑删减；当某块内容在语义上已失效（如已提交成功的表单区域），最好用 JS 移除节点本身，而非隐藏