0

menu および menuitem としてロールを追加して、div タグを使用して水平メニュー項目を作成しています。

<div class="ul" role="menu">
  <div tabindex="0" class="li" role="menuitem"><a href="#home">Home</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#news">News</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#contact">Contact</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#about">About</a></div>
</div>

私が作成している上記のコードのように。これを水平ナビゲーションとしてスタイリングし、イベントをバインドしてこれを行います(左矢印と右矢印)

const btns = document.querySelectorAll(".li")
console.log(btns)
btns.forEach(btn => {
   btn.addEventListener('keydown', event => {
      if (event.keyCode == 39)
      document.activeElement.nextElementSibling.focus() 
      else if (event.keyCode == 37) document.activeElement.previousElementSibling.focus()
   });

});

しかし、あごが読むとき、その読書のように、上と矢印ボタンを使用してナビゲートします。どうすればこれを変更できますか? 私の場合、左右の矢印ボタンを使用してナビゲートするように読む必要があります。

以下はプランカーですhttps://plnkr.co/edit/rVOGMFHoWFt7F3Aicipz?p=preview

4

1 に答える 1

3

短い答えは、あなたができないということです。a を指定するroleと、オブジェクトが特定の方法で動作するというスクリーン リーダー (SR) の手がかりになります。SR がmenuを確認すると、上/下矢印キーを使用してナビゲートできることをアナウンスします。これは、SR が を確認したときに「スペースバーを押してアクティブ化してください」と言うのと同様role="button"です。

ただし、通常のSRユーザーは、「メニュー」と聞くと、メニューをナビゲートするために上下または左右のいずれかを使用することを知っており、一般に、SRが指示した方法を無視することを理解するでしょう.相互作用する。実際、経験豊富な SR ユーザーは、対話フレーズ (「上/下矢印を使用」または「スペースバーを押す」) がまったく通知されないように、詳細度を「低」に変更する可能性があります。

メニューの「キーボード操作」パターンに従っている限り、問題ありません。

そうは言っても、(やや) 新しい属性を使用できるかもしれませんaria-roledescriptionが、すべてのブラウザーとスクリーン リーダーの組み合わせでどれだけサポートされているかはわかりません。その値を設定すると、「メニュー」のアナウンスに影響するだけで、「矢印キーを使用してください」というメッセージは変更されません。いくつかのテストを行う必要があります。

元の例は少し奇妙であることに注意してください。基本的に、メニュー項目ごとに 2 つのタブ位置があります。<div> 用 (tabindex="0" があるため) とリンク用です。内側の <div> 要素はまったく必要ありません。次のようなものがあります：

<div class="ul" role="menu">
  <a role="menuitem" href="#home">Home</a>
  <a role="menuitem" href="#news">News</a>
  <a role="menuitem" href="#contact">Contact</a>
  <a role="menuitem" href="#about">About</a>
</div>
于 2019-03-15T05:16:24.143 に答える