VoiceOver читает скрытые элементы

На сайте, над которым я работаю, у нас есть 1) заголовок для мобильных устройств 2) заголовок для рабочего стола. Оба загружаются, но изображения загружаются лениво + часть содержимого рабочего стола.

Мы работаем над тем, чтобы сделать веб-сайт доступным для слепых, я тестирую его с помощью VoiceOver на Mac.

Когда я тестирую, кажется, что он хочет читать мобильное меню, независимо от того, что я делаю.

<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.


html voiceover accessible
person OZZIE    schedule 19.03.2019    source источник
comment
aria-hidden хорошо поддерживается всеми браузерами, платформами (mac и pc) и программами чтения с экрана. скрытие родительского элемента скроет все дочерние элементы. обратите внимание, что использование атрибутов ARIA — это крайняя мера (см. первое правило использования ARIA — w3.org/TR/aria-in-html/#rule1). если вы можете скрыть элементы обычным способом с помощью display:none или visibility:hidden, это автоматически скроет элемент от программы чтения с экрана, и aria-hidden не понадобится.   -  person slugolicious    schedule 19.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, я пропустил некоторые элементы, которые были перемещены с помощью React Portal, а VoiceOver, кажется, не читает только display: block; visibility: hidden; элементы и не очень заботится о aria-hidden="true"

person OZZIE    schedule 19.03.2019