VoiceOver读取隐藏元素问题：已隐藏移动端菜单仍被朗读

我明白你现在的困境——同时渲染移动端和桌面端头部，已经用了各种隐藏属性，但旧版MacOS High Sierra的VoiceOver还是执意要读出移动端菜单的内容。结合你提供的代码和系统版本，我来给你几个针对性的解决方案：

问题根源分析 #

MacOS 10.13.6的VoiceOver属于比较旧的版本，对aria-hidden的继承处理、以及hidden属性和CSS隐藏样式的优先级判断，可能存在一些兼容性问题。即使你在父元素上加了aria-hidden="true"，它可能还是会“穿透”到子元素，尤其是带有交互属性（比如按钮）的元素。

针对性修复方案 #

1. 强化容器的隐藏属性，确保从渲染树中彻底移除 #

把你的容器代码修改为：

<div hidden style="display: none !important; visibility: hidden !important;" aria-hidden="true">
  <nav aria-hidden="true">
    <div>
      <div class="react-hamburger-menu" aria-hidden="true" tabindex="-1">
        <!-- 所有子交互元素也要添加对应属性 -->
        <button aria-hidden="true" disabled>菜单按钮</button>
        <!-- 其他菜单子元素同理 -->
      </div>
    </div>
  </nav>
</div>

这里的关键调整：

• 给display: none加上!important：防止任何动态CSS覆盖这个样式，确保元素完全从渲染树中移除（通常VoiceOver不会读取渲染树外的元素）
• 添加tabindex="-1"到菜单容器：阻止VoiceOver通过焦点导航进入这个容器内部
• 给内部所有按钮加上disabled和aria-hidden="true"：双重保险，让旧版VoiceOver明确识别这些元素是不可用且需要忽略的

2. 检查是否有动态样式干扰 #

有时候React或其他框架的动态样式（比如条件渲染的类名）可能会意外移除你的隐藏样式。可以在浏览器开发者工具的Elements面板中，查看移动端菜单容器的最终计算样式，确认display: none确实生效，没有被其他样式覆盖。

3. 测试时的注意事项 #

在High Sierra的VoiceOver中，有时候需要刷新页面后再测试，因为VoiceOver可能会缓存页面的无障碍树。另外，尝试用Cmd + F5重启VoiceOver，再重新导航页面，看是否还会读取移动端菜单。

为什么这些调整有效？ #

旧版VoiceOver对aria-hidden的继承支持不够完善，仅仅在父元素添加可能不足以覆盖子元素的交互属性。通过结合CSS强制隐藏、原生hidden属性、子元素的disabled和aria-hidden，可以从多个层面告诉VoiceOver：这个区域完全不需要被读取。

内容的提问来源于stack exchange，提问作者OZZIE