IOSでボイスオーバーが有効になっているときにモバイルメニューが開かない

Question

私はサファリブラウザを使用してiosで自分のウェブサイトを開きます。モバイルメニューは正常に動作しています。

メニューアイコン（3行のアイコン）をタップすると表示されます。しかし、私はボイスオーバーを有効にしてブラウザに来て、そのメニューアイコンをタップすると、モバイルメニューは開いていません。

これは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; 
} 

を

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

注：あなたは、これがアクセスできるようにしたい場合は、あなたが理解し、aria-*属性を使用する必要があります

は、このように、例えば、クラスを切り替えるためにJSを使用しています。これは、VoiceOverでメニューを開くことができるかどうかとは関係ありませんが、VoiceOverを使用しているユーザーは、対話について混乱する可能性があります。あなたがクリックイベントを添付するのdivを使用しているので、

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

これは、次のとおりです。

ここaria-*属性なし例です。

div.menu-triggerは代わりに[type = "button"]ボタンである必要があります。

スクリーンリーダーは、マークアップのセマンティクスを使用して、何かが実行可能かどうかを示します。 Divはネイティブに実行可能な要素ではありません。

divにフォーカスが当てられていないため、キーボードやキーボードのようなデバイス（点字キーボードやスイッチデバイスなど）を使用している人にも問題があります。また、enterやスペースバーを押しても操作できません。ボタン要素は、これらの問題のすべてを処理します。

本当にボタンを使用できない場合は、いくつかのaria、tabindex、およびJS heavy-liftingを行う必要があります。

だから、どちらかが、この操作を行います。

<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 = "メニューを開く"を追加してください。次に、メニューが開いたら、 "閉じるメニュー"と言うようにaria-labelを変更します。

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