Мобильное меню не открывается, когда на 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 {
 display: inline-block;
 vertical-align: middle;
 cursor: pointer;
 width: 33px;
 margin: 0 0 0 15px;
 transition: 275ms all ease;
}
.menu-trigger span {
 display: block;
 height: 3px;
 background: #233e6b;
 margin-bottom: 4px;
 -webkit-transition: 275ms all ease;
 transition: 275ms all ease;
}
.main-menu {
 position: absolute;
 top: 100%;
 right: -10px;
 width: 100vw;
 z-index: 100;
 background: #fff;
}
ul.menu {
max-height: calc(100vh - 55px);
 overflow: auto;
}

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

Answer 1

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

Вместо этого ваш div.menu-триггер должен быть кнопкой [type="button"].

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

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

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

Так что либо сделайте это:

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

или, используя роль aria, 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="open the menu". Затем, после открытия меню, измените метку aria, чтобы сказать "закрыть меню".

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

Answer 2

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

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