你可以通过所有单选按钮标签吗？

Question

我有一个单选按钮列表.当我通过它们进行选项卡时,似乎只有第一个单选按钮或被选中的单选按钮才会聚焦,其余的单选按钮将被跳过.复选框没有这个问题.

http://jsfiddle.net/2Bd32/

我很难向我的QA解释这不是一个错误.有人可以向我解释为什么会这样.

Soccer: <input type="checkbox" name="sports" value="soccer"  tabindex="1" /><br />
Football: <input type="checkbox" name="sports" value="football"  tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br>
<input type="radio" name="num" value="4" tabindex="4">4<br>
<input type="radio" name="num" value="5" tabindex="5">5<br>
<input type="radio" name="num" value="6" tabindex="6">6<br>
<input type="radio" name="num" value="7" tabindex="7">7<br>

Baseball: <input type="checkbox" name="sports" value="baseball"  tabindex="8"  /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball"  tabindex="9"  />

Answer 1

您可以在此处和此处引用W3C作为您的来源.

本质上,单选按钮是一个作为单个元素运行的组,因为它只保留一个值.通过标签指向收音机组,您将转到第一个项目,然后使用在组内导航的箭头键.

• 焦点可以通过以下方式转移到广播组:
  • Tab键
  • 针对标签的访问密钥或助记符
  • 激活标签(通过辅助技术机制)
• Tab键在单选按钮组和其他小部件之间移动焦点.
• 当焦点在组上并且没有选择单选按钮时:
  • 按Tab键将焦点移动到组中的第一个单选按钮,但不选择单选按钮.
  • Shift + Tab键按下可将焦点移至组中的最后一个单选按钮,但不会选择单选按钮.
• 当焦点移动到选择了单选按钮的组时,按Tab键和Shift + Tab键可将焦点移动到选中的单选按钮.
• 向上箭头和向下箭头键移动焦点和选择.
  • 向上箭头键按下可通过组中的单选按钮向前移动焦点和选择.如果第一个单选按钮具有焦点,则焦点和选择将移动到组中的最后一个单选按钮.
  • 向下箭头键按下可通过组中的单选按钮向后移动焦点和选择.如果最后一个单选按钮具有焦点,则焦点和选择将移动到组中的第一个单选按钮.*空格键按键检查当前具有焦点的单选按钮.
• 重新进入组时,焦点将返回到上一个焦点(具有选择集的项目).
• 按Tab键退出组并将焦点移动到下一个表单控件.
• 按Shift + Tab键退出组并将焦点移至上一个表单控件.

Answer 2

具有一个名称的单选按钮就像单个控件(如输入或选择),您可以使用箭头键更改其值,Tab键将焦点移动到另一个控件.

Answer 3

不确定这是否仍然是任何人的问题，但我找到了解决方案。如上所述，这不是错误，这是默认行为。我们只需要考虑如何以不同的方式与网站互动。当您使用 Tab 键进入单选对象组时，您需要使用箭头键在该组输入中导航，然后使用 Tab 或 Shift+Tab 退出该组输入。

https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html