0

I am fairly ignorant when it comes to things like tab focus. I am using JQuery Datatables.

In one window, hitting tab scrolls through the elements, excluding the table rows, but including the table footer with the pagination buttons for "first, previous, next, last".

In another window the tab focus stops at the end of the table rows and goes back to the top of the page, skipping over the pagination buttons for "first, previous, next, last".

I coded both of these datatables, and they are very similar, as the the pop up windows themselves. I don't think this is a big deal, but someone on my dev team opened a bug for it, and since it's my code I'd like to fix it (I have no idea why anyone would waste their time testing things like this, I'm sure our customers use their cursor to click on the pagination buttons, I doubt many of them even realize hitting tab repeatedly would bring them there).

My question is, what decides which elements can get tab focus? Why would two very similar pieces of code behave so differently? How can I make them consistent (allowing all elements to get tab focus, or at least the pagination buttons)?

4

1 に答える 1

2

私が考えることができる主な理由：

  1. input、buttonおよび(anchor) 要素は、非標準ですが、ほとんどのブラウザがサポートを提供する属性aを持っていない限り、デフォルトで「タブ可能」です。tabindex="-1"タブ移動を無効にするのに役立ちます。値が の場合、ボタンからその属性を削除します-1。また、JS が要素を設定していないことも確認しtabIndexて-1ください。

  2. tabindex(例: )を持つデフォルトのタブ可能要素以外の要素もtabindex="0"タブ可能になります。

  3. 可能性は低いですが、ボタンに関連付けられた別の場所にフォーカスをリダイレクトするonfocusプロパティやハンドラーがないことを確認してください。キーもトラップ可能ですが、それはほとんどありませんfocus。tab

上記を説明するデモを次に示します。

于 2012-12-18T16:48:21.140 に答える