17370845950

应优先使用 display: none 或 HTML5 的 hidden 属性；二者均彻底移除元素、不占空间、不可见、不被屏幕阅读器读取且不被搜索引擎索引，其中 display: none 最直接，hidden 语义更清晰且兼容良好。

如果目标是让内容**完全不被屏幕阅读器读取**，同时对 sighted 用户也不可见，应优先使用 display: none 或 HTML5 的 hidden 属性。

display: none 是最直接有效的方式

该声明会将元素彻底从渲染树中移除：不占空间、不可见、不参与布局，且所有主流屏幕阅读器（NVDA、JAWS、VoiceOver）默认跳过它，搜索引擎也不会索引其内容。

• 适用于临时隐藏整块区域，如折叠面板关闭时的内容、未激活的模态框主体
• 注意：JS 仍可访问该 DOM 节点，element.style.display = 'block' 可恢复显示
• 不支持 CSS 过渡动画（需配合其他方案，如 height + opacity + transition）

hidden 属性语义更清晰，推荐用于逻辑隐藏

HTML5 原生属性 hidden 行为与 display: none 高度一致，但带有明确语义——表示“当前不应被用户看到”，浏览器默认将其映射为 display: none，且同样屏蔽屏幕阅读器。

• 写法简洁：仅后台用提示
• JS 控制方便：el.hidden = true 或 el.toggleAttribute('hidden')
• 兼容性良好（IE10+ 及所有现代浏览器），旧版 IE 可用 style.

  

  display = 'none' 降级

避免误用这些看似“隐藏”实则仍可读的方案

以下方法**不会阻止屏幕阅读器朗读内容**，仅做视觉隐藏，切勿用于“需要彻底屏蔽”的场景：

• visibility: hidden —— 元素仍占位，且被屏幕阅读器忽略（但部分旧版 VoiceOver 有例外）
• opacity: 0 或 color: transparent —— 内容仍在 DOM 中，屏幕阅读器照读不误
• position: absolute; left: -9999px 或 clip-path: inset(50%) —— 这些是“仅视觉隐藏”，专为 让屏幕阅读器读到、但人眼看不到 设计
• aria-hidden="true" —— 虽能屏蔽阅读器，但需手动维护，且不能替代语义化隐藏；单独使用不改变视觉表现，必须搭配 CSS

特殊情况补充

若需隐藏内容但保留焦点能力（例如跳转锚点或键盘导航入口），不应使用 display: none 或 hidden，而应改用 visibility: hidden + position: absolute，并确保 tabindex="-1" 控制可聚焦性。