HTML元素的焦点不在选项卡上，但在shift+tab上是可访问的

Question

我有一个这样的结构：

<div> <a href='#'>Hyperlink</a> </div>
<div>
  <table>
    <tr>
      <td>Row1</td>
      <td><button>Click</button></td>
    </tr>
    <tr>
      <td>Row2</td>
      <td><button>Click</button></td>
    </tr>
    <tr>
      <td>Row3</td>
      <td><button>Click</button></td>
    </tr>
  </table>
</div>

我无法使用选项卡导航到按钮，但在shift+tab上，它们获得了焦点，并且可以访问。每个HTML元素都使用了许多类，但没有使用tabindex。

问题可能是什么？请帮帮忙。

Answer 1

看看HTML中的全局tabindex属性。

http://www.w3schools.com/tags/att_global_tabindex.asp

tabindex="n"

你可以给元素一个跳格键的顺序，这很可能会解决你现在的跳格焦点问题。

Answer 2

您必须为元素定义tabindex并使用一点jQuery

​

$(function(){
  $('#anchor').click(function(){
    $(this).html('Pres Tab now');
  });
});

.hidden{
  position:absolute;
  top:-100px;
}
input{
  width:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href='#' id="anchor" tabindex="1">Click me</a>
</div>
<div>
<table>
<tr>
  <td>Row1</td><td><button tabindex="2">Click</button></td>
</tr>
<tr>
  <td>Row2</td><td><button tabindex="3">Click</button></td>
</tr>
<tr>
  <td>Row3</td><td><button tabindex="4">Click</button></td>
</tr>
</table>
  <div class="hidden"><input type="text" tabindex="5" onfocus="$('#anchor').focus()" /></div>
</div>

​

Answer 3

您需要一个虚拟输入来旋转Tab键顺序它处于隐藏模式

$(function(){
  $('#anchor').click(function(){
    $(this).html('Check Tab now');
  });
});

.hidden{
  position:absolute;
  top:-100px;
}
input{
  width:0px;
}
a{
text-decoration:none;
  color:#ff8800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href='#' id="anchor" tabindex="1">Click me</a>
</div>
<div>
<table>
<tr>
  <td>Row1</td><td><button tabindex="2">Click</button></td>
</tr>
<tr>
  <td>Row2</td><td><button tabindex="3">Click</button></td>
</tr>
<tr>
  <td>Row3</td><td><button tabindex="4">Click</button></td>
</tr>
</table>
  <div class="hidden"><input type="text" tabindex="5" onfocus="$('#anchor').focus()" /></div>
</div>

​