您可以浏览所有单选按钮吗？

Question 1

我有一个单选按钮列表。当我在它们之间切换时，似乎只有第一个单选按钮或所选的单选按钮会集中显示，其余的单选按钮将被跳过。复选框没有这个问题。

我很难向质量检查人员解释这不是错误。有人可以向我解释为什么会这样。

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"  />

Question 2

您可以在此处和此处引用W3C作为源。

本质上，单选按钮是一个组，由于仅保留单个值，因此可以用作单个元素。切换到收音机组将使您进入第一项，然后使用箭头键在该组中导航。

焦点可以通过以下方式移至广播组：
Tab键
定位标签的访问密钥或助记符
激活标签（通过辅助技术机制）

Tab键可在单选按钮组和其他小部件之间移动焦点。
当焦点位于组上并且未选择任何单选按钮时：
按Tab键可将焦点移至组中的第一个单选按钮，但不会选择单选按钮。
按Shift + Tab键可将焦点移至组中的最后一个单选按钮，但不会选择单选按钮。

当焦点移到选择了单选按钮的组时，按Tab和Shift + Tab键将焦点移到选中的单选按钮。
向上箭头和向下箭头键可移动焦点和选择。
向上箭头键的按下将使焦点和选择通过组中的单选按钮向前移动。如果第一个单选按钮具有焦点，则焦点和选择移至组中的最后一个单选按钮。
向下箭头键的按下通过组中的单选按钮将焦点和选择向后移动。如果最后一个单选按钮具有焦点，则焦点和选择将移至组中的第一个单选按钮。*按空格键可检查当前具有焦点的单选按钮。

重新进入该组时，焦点将返回到上一个焦点（已设置选择的项目）。
按Tab键退出该组，并将焦点移到下一个窗体控件。
按下Shift + Tab键可退出该组，并将焦点移至上一个窗体控件。

Question 3

具有一个名称的单选按钮就像单个控件（例如输入或选择），您可以使用箭头键更改其值，使用Tab键将焦点移至另一个控件。

Question 4

不知道这是否对任何人来说都是问题，但我找到了解决方案。如上所述，这不是错误，这是默认行为。我们只需要考虑如何与网站交互即可。当您跳入一组单选对象时，需要使用箭头键在该组输入中导航，然后使用Tab或Shift + Tab退出该组输入。

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

Question 5

如果您使用的是angularjs，则可以ng-model通过使用ng-model并删除来直接控制单选按钮name。

<input type="radio" value="0" ng-model="status">
<input type="radio" value="1" ng-model="status">

现在，除了按Tab键之外，另一个优点是您可以先通过单选按钮进行对焦，而无需实际选择它。然后可以按进行选择space。

Question 6

如果将Angular Material用于您的应用程序，则可以通过向每个浏览器添加来启用跨浏览器兼容的单选按钮制表符：tabindex<mat-radio-button>

<mat-radio-button [tabindex]="0">

否则，您将无法在Safari中切换至单选按钮（因为这是默认的浏览器行为-单击此处进行讨论）。