Мобильное меню не открывается, когда включен режим передачи голоса по IOS

Question

Я открываю свой сайт в ios, используя браузер Safari. Мобильное меню работает нормально.

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

Это вопрос css или мне нужно добавить некоторые атрибуты aria?

Может кто-нибудь мне помочь?

 

 
jQuery('.menu-trigge').once('menuMobile').click(function() { 
 
        jQuery(this).toggleClass('expand'); 
 
        if (jQuery('.menu-trigger').hasClass('expand')) { 
 
         jQuery('.menu-trigger').first().slideDown(); 
 
        } else { 
 
         jQuery('.menu-trigger').first().slideUp(); 
 
        } 
 
        });

.menu-trigger { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t cursor: pointer; 
 
\t width: 33px; 
 
\t margin: 0 0 0 15px; 
 
\t transition: 275ms all ease; 
 
} 
 
.menu-trigger span { 
 
\t display: block; 
 
\t height: 3px; 
 
\t background: #233e6b; 
 
\t margin-bottom: 4px; 
 
\t -webkit-transition: 275ms all ease; 
 
\t transition: 275ms all ease; 
 
} 
 
.main-menu { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t right: -10px; 
 
\t width: 100vw; 
 
\t z-index: 100; 
 
\t background: #fff; 
 
} 
 
ul.menu { 
 
max-height: calc(100vh - 55px); 
 
\t overflow: auto; 
 
}

<div class="menu-block"> 
 
    <div class="main-menu"> 
 
\t <div class="menu_wrapper"> 
 
\t <ul class="menu"> 
 
\t \t <li>Menu 1</li> 
 
\t \t <li>Menu 2</li> 
 
\t </ul> 
 
\t </div> 
 
    </div> 
 
    <div class="menu-trigger"> 
 
\t <span></span> 
 
\t <span></span> 
 
\t <span></span> 
 
    </div> 
 
</div>

Answer 1

aria-* атрибуты не будут вызывать такую ​​проблему в таком случае, насколько я могу судить. У вас что-то не так с таргетингом JS/CSS. Я не могу сказать, как вы цель и как вы на самом деле изменить его видно, но вы можете попробовать это:

Добавить еще один CSS класс .main-menu-on и использовать правильные свойства для него, что-то вроде этого:

.main-menu-on { 
    top: 50px; 
    right: 10px; 
} 

Затем с помощью JS для переключения класса, например, так:

document.querySelector('.menu-trigger').addEventListener('click', function() { 
var menu = document.querySelector('.main-menu'); 
menu.classList.toggle('main-menu-on'); 
}, false); 

Примечание: если вы хотите, чтобы сделать это доступным, вы должны понимать и использовать aria-* атрибуты. Это не связано с тем, можно ли открыть меню с помощью VoiceOver или нет, но пользователь, который использует VoiceOver, может запутаться в взаимодействии.

Вот пример без aria-* атрибутов:

document.querySelector('.menu-trigger').addEventListener('click', function() { 
 
var menu = document.querySelector('.main-menu'); 
 
menu.classList.toggle('main-menu-on'); 
 
}, false);

.menu-trigger { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t cursor: pointer; 
 
\t width: 33px; 
 
\t margin: 0 0 0 15px; 
 
\t transition: 275ms all ease; 
 
} 
 
.menu-trigger span { 
 
\t display: block; 
 
\t height: 3px; 
 
\t background: #233e6b; 
 
\t margin-bottom: 4px; 
 
\t -webkit-transition: 275ms all ease; 
 
\t transition: 275ms all ease; 
 
} 
 
.main-menu { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t right: -10px; 
 
\t width: 100vw; 
 
\t z-index: 100; 
 
\t background: #fff; 
 
} 
 
.main-menu-on { 
 
\t top: 50px; 
 
\t right: 10px; 
 
} 
 
ul.menu { 
 
max-height: calc(100vh - 55px); 
 
\t overflow: auto; 
 
}

<div class="menu-block"> 
 
    <div class="main-menu"> 
 
\t <div class="menu_wrapper"> 
 
\t <ul class="menu"> 
 
\t \t <li>Menu 1</li> 
 
\t \t <li>Menu 2</li> 
 
\t </ul> 
 
\t </div> 
 
    </div> 
 
    <div class="menu-trigger"> 
 
\t <span></span> 
 
\t <span></span> 
 
\t <span></span> 
 
    </div> 
 
</div>

Answer 2

Это потому, что вы использовали DIV, чтобы прикрепить событие щелчка к.

Ваш триггер должен быть кнопкой [type = "button"].

Считыватели экрана используют семантику разметки, чтобы рассказать об этом, если что-то действие. Div не является элементом, способным к действию.

У вас также будут проблемы с кем-то, использующим клавиатуру с клавиатурой или клавиатурой (например, брайлевскую клавиатуру или коммутационное устройство), так как div не фокусируется и не может быть задействован, нажав клавишу ввода или пробел. Элемент кнопки выполняет все эти проблемы.

Если вы действительно не можете использовать кнопку, вам нужно будет сделать арию, табуиндекс и тяжелую атлетику JS.

Так как это сделать:

<button type="button" class="menu-trigger"> 

или, используя арию роль, TabIndex и дополнительные JS вам нужно будет сделать это:

<div class="menu-trigger" role="button" tabindex="0"> 
// then make sure the JS fires on click and on the enter and spacebar keypress events. 
// this mimics the keyboard and focus features that are baked in with the button element 

важно: не забудьте есть какой-то экранный текст для чтения, чтобы рассказать читателю экрана о том, для чего предназначена кнопка меню. Легко делается с помощью элемента кнопки - просто добавьте aria-label = "откройте меню". Затем, после открытия меню, измените aria-label, чтобы сказать «закрыть меню».

<button type="button" class="menu-trigger" aria-label="open the menu">