html - 非表示の要素を 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>

大きなタブレットでは、縦向きのモバイル ヘッダーと横向きのデスクトップ (っぽい) ヘッダーになるため、両方をレンダリングする必要があります。

これを読むのをやめる他に何も見つかりません。この最も深い子をボタンとして読み取り、モバイル メニュー全体を読み取ります (デスクトップ バージョン全体を確認した後)。

編集: Mac OS High Sierra 10.13.6 を使用しています。