VoiceOver 朗读隐藏元素答案

【问题标题】：VoiceOver reading hidden elementsVoiceOver 朗读隐藏元素
【发布时间】：2019-03-19 12:13:15
【问题描述】：

在我正在开发的网站上，我们有 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。

【问题讨论】：

aria-hidden 在所有浏览器、平台（mac 和 pc）和屏幕阅读器上都得到了很好的支持。隐藏“父”元素将隐藏所有子元素。请注意，使用 ARIA 属性是最后的手段（请参阅 ARIA 使用的第一条规则 - w3.org/TR/aria-in-html/#rule1）。如果您可以使用display:none 或visibility:hidden 以“正常”方式隐藏元素，则将自动从屏幕阅读器中隐藏元素，并且不需要aria-hidden。

标签： html voiceover accessible

【解决方案1】：

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

【讨论】：