3

NVDA スクリーン リーダーの使用中にキーボードをアクセス可能にしようとしている単純なコードのチャンクがあります。

具体的には、「ボタン」の役割を持つ div があり、その中にネストされた「ボタン」の別の役割を持つ別の div があります。各 div には異なる onkeydown イベントがあり、ユーザーがその div にタブ移動して「Enter」を押したときに発生します。

このキーボード機能はすべて、NVDA スクリーン リーダーをオンにしていない場合でも、希望どおりに機能します。

ただし、スクリーン リーダーをオンにすると、ネストされたキーダウン イベントが発生しなくなります。代わりに、ネストされたイベントがフォーカスされている場合でも、親イベントのみが発生します。

ただし、NVDA を手動で「ブラウズ モード」から「フォーカス モード」に変更すると (NVDA キー + スペースバーを押すことで)、キー イベントは再び希望どおりに機能します。

残念ながら、NVDA を使用している人が手動で「フォーカス モード」に切り替えることを知っていると期待するのは、私には受け入れられません。自動的に「フォーカス モード」に変更するか、「ブラウズ モード」で動作する必要があります。

コードは次のとおりです。

HTML:

<div role="button" 
   tabindex="1" 
   onkeydown="keyEvent(event, outerDivAction)"
   class="outerDiv">
   Outer Div

   <div role="button" 
     tabindex="1"
     onkeydown="keyEvent(event, innerDivAction)"
     class="innderDiv">
     Inner Div</div>
   </div>

<div class="result"></div>

JavaScript:

function outerDivAction(event) {
  event.stopPropagation();
  console.log('outer div');
   $('.result').html('<p>outer div!</p>');
}

function innerDivAction(event) {
  event.stopPropagation();
  console.log('inner div')
  $('.result').html('<p>inner div!</p>');
}

function keyEvent(event, callback) {
  event.stopPropagation();
  if (event.which === 13) {
    callback(event);
  }
}

$('.outerDiv').click(outerDivAction);

$('.innderDiv').click(innerDivAction);

ここで codepen を表示することもできます: http://codepen.io/jennEDVT/pen/Yprova

誰でも提供できるヘルプをいただければ幸いです。

ps ネストされた div を移動してネストされないようにすると、最初の div の兄弟になることがわかります。すべてが希望どおりに機能します。残念ながら、それはオプションではありません。div はネストする必要があります。

4

2 に答える 2

5

これは NVDA のバグではありません。

まず、クリック可能な要素をネストすることはできません。具体的には、インタラクティブ コンテンツをネストすることはできません。リンクをネストしたり、ボタンをネストしたりすることはできません。ボタンにリンクをネストしたり、リンクにボタンをネストしたりすることはできません。将来の参照のために検討する価値のある他の種類のインタラクティブなコンテンツもあります。

あなたのコードが技術的に有効であることに気付くかもしれませんが、それはあなたが書いたものが偽物だからです。

正しい要素 ( ) を使用する代わりに、 を<button>装着することを選択しましrole=buttonた<div>。ネストすることは有効であるため、HTML バリデーターはコードを渡します<div>。

ただし、それぞれに を与えることでrole=button、ユーザー エージェントにそれらを<button>(アクセシビリティ、キー ハンドラー、セマンティクスなど、それらに伴うすべての利点を差し引いて) として扱うように指示します。

ここで、戻って、ユーザー エージェントが (ネストされた s として) 見るように、そのコードを再度検証しましょう<button>。W3C Nu HTML チェッカーは失敗します (テストを実行したのでわかります)。

エラー: 開始タグbuttonが見つかりましたが、同じタイプの要素が既に開いています。

私の提案は次のとおりです。

  • それらを入れ子にしないように、
  • <button>それらをs に変換し、
  • 無効なものを削除しますtabindex=1(これは必要ありません)。
  • 無料で提供されるキーコードのチェックを削除し<button>ます（文字32を含む）、
  • ARIA ライブ リージョン<div class="result">にします(ここにいくつかのヒントがあります)。
  • ボタンの周りにラッパーを配置して、必要な視覚効果を実現します。

再調整されたコードの例:

 <div class="wrapper">
   <button class="outerDiv">
     Outer Div
   </button>
   <button class="innderDiv">
     Inner Div
   </button>
 </div>

 <div class="result" role="alert" aria-live="assertive"></div>
于 2016-11-30T02:19:19.390 に答える