display:none完全移出可访问性树，visibility:hidden保留在树中但不可见，aria-hidden="true"仅屏蔽辅助技术读取。三者对屏幕阅读器影响不同，需依语义和交互需求选择。
三者都会让元素在视觉上不可见，但对辅助技术（如屏幕阅读器）的影响截然不同——关键区别在于是否从可访问性树中移除内容。
display:none：完全移出可访问性树
元素不仅不可见、不占布局空间，还会被屏幕阅读器彻底忽略，如同不存在。用户无法通过键盘导航或读屏软件感知它。
- 适合真正不需要被访问的隐藏内容（如已废弃的旧模块、纯装饰性占位）
- 注意：若临时隐藏后需快速恢复（如切换菜单），用它会导致焦点丢失、阅读器状态中断
- 动态添加
display:none时，屏幕阅读器不
会播报“内容已隐藏”
visibility:hidden：保留在可访问性树中
元素仍占据空间、不可见，但多数屏幕阅读器仍能读取其文本内容（除非被父级 aria-hidden="true" 阻断）。键盘焦点仍可进入（如果元素本身可聚焦）。
- 适合需要保留语义结构但暂时隐藏视觉呈现的场景（如悬停前的提示文字）
- 风险：用户可能听到内容却看不到对应界面，造成困惑
- 若元素内含交互控件（如按钮），建议配合
tabindex="-1"或禁用状态，避免焦点落入不可见区域
aria-hidden="true"：仅影响可访问性树，不影响渲染
元素照常显示和布局，但屏幕阅读器跳过它及其所有子节点（除非子元素显式设 aria-hidden="false"）。它不改变视觉或行为，只“告诉”辅助技术“别读这个”。
- 典型用途：隐藏纯图标（无文本）、重复装饰、加载动画中的冗余文字
- 慎用：不能替代视觉隐藏；若同时加
display:none，aria-hidden就无效（因为元素已不在树中） - 必须确保隐藏后不破坏信息完整性——例如隐藏图标时，应有配套的可见文字标签（
aria-label或visually-hidden类）
实际组合更常见：比如用 visibility:hidden + aria-hidden="true" 实现“视觉暂隐但保留焦点管理”，或用 display:none + 动态控制 aria-live 区域来通知状态变化。核心原则是——视觉隐藏 ≠ 可访问性隐藏，得按意图分别处理。
