HTML 表单可访问性：Tab 键焦点跳过新显示的字段

Question

我有一个包含选择字段的表单，该选择字段仅在前一个选择字段的值设置为特定值时显示。这是一个简化版本，如果选择“美国”作为国家/地区，则会出现一个隐藏的“州”选择字段：

HTML：

<style>
  label {
    display:inline-block;    
    min-width:100px;        
    padding:3px;
  }
  .hidden{
    display:none;
  }
</style>

<div>
  <label for="country">Country</label>
  <select id="country">
    <option>Czech Republic</option>
    <option>USA</option>
  </select>
</div>
<div id="stateContainer"  class="hidden">
  <label for="state">State</label>
  <select id="state">
    <option>Alabama</option>
    <option>Arizona</option>
    <option>Arkansas</option>
  </select>
</div>
<div>
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

JS：

$(function(){
  $("#country").on("change",function(){
    if ( $(this).val() === "USA") {
      $("#stateContainer").removeClass("hidden");
    } else {
      $("#stateContainer").addClass("hidden");
    }
  })
})

...在 JSFiddle 中：

http://jsfiddle.net/xoundboy/a2HdZ/5/

使用鼠标时它可以正常工作，但如果用户仅限于键盘输入，则 UX 会损坏。如果焦点位于国家/地区字段中，您可以看到这一点，并且您使用向上/向下箭头选择“美国”作为国家，然后使用 Tab 键移动到下一个字段。它没有移动到新显示的“状态”字段，而是跳到“名称”字段。

我可以通过在 JS 中捕获 tab 键来修复它，将焦点强制到新显示的字段上并防止默认行为，但这似乎是一个丑陋的 hack。处理非常常见的场景的最佳做法是什么？

Answer 1

按下上/下键时不会触发更改事件。所以change事件可以在按键时触发。

js fiddle 代码更改示例。希望对您有所帮助。

编辑 1 我检查了不同的浏览器，发现这个问题出在 Firefox 中，因此解决方案是针对 Firefox 的。对于 chrome，有问题的小提琴对我来说非常好。

编辑 2 我之前的小提琴在keypress 上触发了change。似乎firefox改变了一些东西，它不再起作用了。我已将活动更新为keyup。

Answer 2

只需使用 tabindex 元素属性，Tab 顺序从最低值到最高值

Fiddle

<div>
  <label for="country">Country</label>
  <select id="country" tabindex=1>
    <option>Czech Republic</option>
    <option>USA</option>
  </select>
</div>
<div id="stateContainer"  class="hidden">
  <label for="state">State</label>
  <select id="state" tabindex=2>
    <option>Alabama</option>
    <option>Arizona</option>
    <option>Arkansas</option>
  </select>
</div>
<div>
  <label for="name">Name</label>
  <input type="text" id="name" tabindex=3 />
</div>