Le menu mobile ne s'ouvre pas lorsque la fonction voice over est activée sur IOS

Question

J'ouvre mon site Web dans ios en utilisant le navigateur safari. Le menu mobile fonctionne correctement.

Il s'ouvre lorsque je tape sur l'icône du menu (icône représentant trois lignes). Mais quand j'active la voix, alors venez dans le navigateur et appuyez sur cette icône de menu, le menu mobile ne s'ouvre pas.

Est-ce le problème css ou dois-je ajouter quelques attributs aria?

Quelqu'un peut-il m'aider?

 

 
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

attributs aria-* ne causera pas un tel problème dans ce cas, pour autant que je peux dire. Vous avez un problème avec le ciblage JS/CSS. Je ne peux pas dire comment vous cibler et comment vous réellement changer à visible, mais vous pouvez essayer ceci:

Ajouter une autre classe CSS .main-menu-on et utiliser les bonnes propriétés pour lui, quelque chose comme ceci:

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

Ensuite, utilisez JS à la classe basculer, par exemple, comme ceci:

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

Remarque: si vous voulez rendre accessible, vous devez comprendre et utiliser aria-* attributs. Ce n'est pas lié à si vous êtes en mesure d'ouvrir le menu avec VoiceOver ou non, mais l'utilisateur qui utilise le VoiceOver, peut être confus au sujet de l'interaction.

Voici l'exemple sans aria-* attributs:

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

Ceci est parce que vous avez utilisé un div pour attacher un événement click.

Votre div.menu-trigger doit être un bouton [type = "button"] à la place.

Les lecteurs d'écran utilisent la sémantique du balisage pour lui indiquer si quelque chose est exploitable. Div n'est pas un élément natif-actionable. Vous aurez également des problèmes avec quelqu'un utilisant un clavier à dents bleues ou un périphérique semblable à un clavier (comme un clavier braille ou un dispositif de commutation) puisqu'une div n'est pas focalisable, et qu'elle ne peut pas être actionnée en appuyant sur Entrée ou Barre d'espace. L'élément bouton prend en charge tous ces problèmes.

Si vous ne pouvez vraiment pas utiliser un bouton, vous devrez faire un aria, tabindex et JS heavy-lifting.

donc soit le faire:

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

ou, en utilisant le rôle aria, tabindex et JS supplémentaires que vous devez faire ceci:

<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 

importante: ne pas oublier de avoir du texte à l'écran uniquement pour indiquer à un utilisateur du lecteur d'écran à quoi sert le bouton de menu. Facilement fait avec un élément de bouton - il suffit d'ajouter aria-label = "ouvrir le menu". Ensuite, après que le menu s'ouvre, changez l'étiquette d'aria pour dire "fermez le le menu". Pouvez-vous ajouter du code ici pour répliquer le problème?

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