VoiceOver阅读隐藏的元素

Question

在我正在努力的网站上，我们有1）移动标题2）桌面标题。两者都已加载，但图像是延迟加载+一些桌面内容。

我们正致力于让盲人访问该网站，我正在使用Mac上的VoiceOver进行测试。

当我测试时，无论我做什么，它似乎都想要阅读移动菜单。

<div aria-hidden="true" hidden style="display: none; visibility: hidden;">
    <nav aria-hidden="true">
        <div>
            <div class="react-hamburger-menu" aria-hidden="true">
                <!-- ... -->
            </div>
        </div>
    </nav>
</div>

我们需要渲染两者，因为在大型平板电脑上，它将是横向模式中的纵向和桌面（ish）标题中的移动标题。

我找不到别的东西让它停止读这个。它仍然将这个最深的孩子读作按钮，然后继续阅读整个手机菜单（在我浏览完整个桌面版之后）

编辑：我使用的是Mac OS High Sierra 10.13.6。

Answer 1

好像我错过了一些使用React Portal移动的元素，VoiceOver似乎也不仅仅读取display: block; visibility: hidden;元素，并且不太关心aria-hidden="true"