应优先使用 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" 控制可聚焦性。
