VoiceOver：ユーザーがメニュー外のオブジェクトにアクセスするのを防ぐにはどうすればよいですか？

モバイルからwww.arbetsformedlingen.seにアクセスすると、メニューが表示されます。VoiceOver：ユーザーがメニュー外のオブジェクトにアクセスするのを防ぐにはどうすればよいですか？

メニューを開くと、そのメニュー内の項目にアクセスできます。メニューをタップするとメニューが閉じられるためです。
何らかの理由でキーボードを使用している場合は、そのメニューのタブをから外すことはできません。

ただし、screen reader VoiceOver in IOSを使用しているユーザーは、スワイプの左右のジェスチャーを使用してDOM内の前/次のオブジェクトにアクセスするだけで簡単にそのメニューから移動できます。

質問：メニューが表示されているときにこれらのユーザーがメニュー外のオブジェクトにアクセスできないようにする方法はありますか？

<body> 
 
    <div class=”maincontent” aria-hidden=”false”> 
 
     // Main content. 
 
    </div> 
 
    <div class=”mobilemenu” aria-hidden=”true” style="display:none"> 
 
    // Menu. 
 
    </div> 
 
</body>

：によるCMSへ

不適切溶液は、以下の単純化されたコードのように、同じノードレベルで主コンテンツとメニューを配置することであろうメニューが開かれ、aria-hiddenとdisplay：noneはページの内容やメニューを表示するためにトグルされます。

もう1つの不適切な解決方法は、メニューを開いたときに他のすべてのオブジェクトにaria-hiddenを切り替えることですが、パフォーマンスの問題で不可能です。

だから、どんなアドバイスや考えなども大歓迎です！

出典

2017-05-17 Ilias Bennani

あなたは溶液で役立つかもしれないメニュー、外にタブ移動を防止したいなぜあなたが定義することができます。さもなければ、あなたが見るものに基づいて、メニューをモーダルのように扱っています（閉じるときに 'Esc'を許可し、フォーカスを出さず、閉じたときにメニューボタンにフォーカスを戻します。最初に開いた）。それはあなたの意図ですか？ – aardrian

返事が遅れて申し訳ありません。 :-)問題は、メニューから「タブ」を外しているのではなく、メニューが表示されているときにVoiceViewを使用しているユーザーがメニュー外のオブジェクトにアクセスすることを妨げます。（そのメニューにはまだ他の問題がありますが、私たちもそれを認識して処理しています）。 –

あなたはそれをモーダルとして扱いたいと思うように、まだ私には聞こえます。VoiceOverユーザーがメニューに入ることができれば、出て行くことができるはずです。モダルは、バックグラウンドページを不活性にすることによってそれを防止します。 'Esc'キーのサポートを追加する必要があります。 – aardrian

HTML5を使用すると、「タブインデックス」をメニュー内の要素の正の数に設定できます。これにより、これらの要素にフォーカスが設定されます。 `

<div class="menu-container"> 
 
    <div class="menu"> 
 
    <div tabindex="1">Menu Item 1</div> 
 
    <div tabindex="2">Menu Item 2</div> 
 
    <div tabindex="2">Menu Item 3</div> 
 
    </div> 
 
</div>

これが最善の解決策は、あなたが達成しようとするものに応じて、どのようなあなたのコードの構造がどのように見えるではないかもしれません。「タブインデックス」属性は、アクセシビリティを中断しないように正しく使用する必要があります。

Good description and example

WebAIM-tabindex-accessibility

出典

2017-05-19 15:39:07 ciammarino

返事が遅れて申し訳ありません。 :-)問題は、メニューから「タブ」を外しているのではなく、メニューが表示されているときにVoiceViewを使用しているユーザーがメニュー外のオブジェクトにアクセスすることを妨げます。 –

正の 'tabindex'値を使用しないでください。 WebAIM記事の警告を参照してください：「tabindex値が1以上の要素は、tabindex値を持たない要素（またはtabindex = "0" '）の前にキーボードフォーカスを受け取ります。 IOWでは、ユーザーはタブ移動を開始するとすぐにメニューに入ります。 – aardrian

あなたがどういう意味を理解していないのは申し訳ありません。私が知る限り、tabindexはキーボードの使用にのみ適用されます。 VoiceOverでは、ジェスチャーを使用してスクリーンリーダーを制御しています。 –

VoiceOver：ユーザーがメニュー外のオブジェクトにアクセスするのを防ぐにはどうすればよいですか？

答えて

関連する問題