display:none / visibility:hidden / aria-hidden 的可访问性差异

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 区域来通知状态变化。核心原则是——视觉隐藏 ≠ 可访问性隐藏，得按意图分别处理。