web-dev-qa-db-ja.com

`a`タグに` tabindex = 0`が必要なのはなぜですか？

Webアプリで作業していますが、ページをタブで移動するときに、繰り返されるa（アンカー）要素の1つがキーボードフォーカスを取得しません。 tabindex=0を追加した場合にのみ、タブを付けることができます。

（私の目標はフォーカスを表示することですが、jQueryのスニペットを使用して、要素がフォーカスを取得するかどうかを決定しています。

// Whenever I hit tab, show me which element has focus
$('main').on('keydown',function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    console.log("focus is now on ", $(':focus'));
  } 
});

）

これは私を混乱させます。 仕様 によると、「tabindex属性は、任意の要素をインタラクティブコンテンツにすることもできます」-しかし、aは、デフォルトでインタラクティブとしてリストされているものの1つです。

そして再び、アクセシビリティの記事から：

[tabindex]値0は、要素をデフォルトのナビゲーション順序で配置する必要があることを示します。これにより、ネイティブにフォーカスできない要素（<div>、<span>、<p>など）がキーボードフォーカスを受け取ることができます。もちろん、通常、すべてのインタラクティブ要素にリンクとフォームコントロールを使用する必要があります...（ http://webaim.org/techniques/keyboard/tabindex ）

ページのインタラクティブ要素をタブで移動すると、アンカー要素がスキップされる原因は何ですか？

htmlaccessibility
11
Nathan Long

あなたの質問によると：

ページのインタラクティブ要素をタブで移動すると、アンカー要素がスキップされる原因は何ですか？

tabindex="-1"を追加すると、要素はスキップされます。
また、<a>タグにhrefがない場合は、スキップされます。

21
taxicala

「-1」のタブインデックスが使用されている場合、それが適用される要素はキーボードでフォーカスできなくなります。

W3C仕様 を確認できます。

0
Avijit Kumar