Html 你能浏览所有的单选按钮吗？

Can you tab through all radio buttons?

提问by qinking126

I have a list of radio buttons. when I tab through them, seems like only the first radio button or the one that is selected will get focused, the rest of the radio buttons will get skipped. checkbox didnt have this problem.

我有一个单选按钮列表。当我浏览它们时，似乎只有第一个单选按钮或被选中的单选按钮会获得焦点，其余的单选按钮将被跳过。复选框没有这个问题。

http://jsfiddle.net/2Bd32/

http://jsfiddle.net/2Bd32/

I have a hard time to explain to my QA this is not a bug. can someone please explain to me why this happens.

我很难向我的 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"  />

回答by j08691

You can cite the W3C as your source, hereand here.

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

Essentially a radio button is a group that functions as a single element since it retains only a single value. Tabbing to a radio group will bring you to the first item and then using the arrow keys you navigate within the group.

本质上，单选按钮是一个作为单个元素的组，因为它只保留一个值。切换到无线电组会将您带到第一项，然后使用您在组内导航的箭头键。

• Focus can move to a radio group via:
  • The Tab key
  • An Access Key or mnemonic targeting the label
  • Activation of the label (through Assistive Technology mechanism)
• The Tab key moves focus between radio button groups and other widgets.
• When focus is on the group and when no radio button is selected:
  • Tab key press moves focus to the first radio button in the group, but does not select the radio button.
  • Shift+Tab key press moves focus to the last radio button in the group, but does not select the radio button.
• When focus moves to the group in which a radio button is selected, pressing Tab and Shift+Tab keys move focus to the radio button that is checked.
• Up Arrow and Down Arrow keys move focus and selection.
  • Up Arrow key press moves focus and selection forward through the radio buttons in the group. If the first radio button has focus, then focus and selection move to the last radio button in the group.
  • Down Arrow key press moves focus and selection backward through the radio buttons in the group. If the last radio button has focus, then focus and selection move to the first radio button in the group. * Space Bar key press checks the radio button that currently has focus.
• When re-entering the group, focus returns to the point of previous focus (the item with selection set).
• Pressing the Tab key exits the group and moves focus to the next form control.
• Pressing the Shift+Tab keys exits the group and moves focus to the previous form control.

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

回答by antejan

Radio buttons with one nameis like single control (like input or select), you can change it value with arrow keys, tab key moves focus to another control.

同名单选按钮就像单个控件（如输入或选择），您可以使用箭头键更改它的值，Tab 键将焦点移动到另一个控件。

回答by vusan

If you are using angularjs, you can control radio button directly with ng-modelby using same ng-modeland removing name.

如果您使用的是 angularjs，则可以ng-model通过使用相同ng-model和删除name.

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

Now one more advantage beside tab press is that you can first focus through the radio button without actually selecting it. You can then select by pressing space.

现在，除了按 Tab 键之外的另一个优势是，您可以先关注单选按钮，而无需实际选择它。然后您可以按 选择space。

回答by Mike Dinder

Not sure if this is still an issue for anyone but I found a solution. As stated above, this is not a bug, this is default behavior. We just need to think of how we interact with a website differently. When you tab into a radio group of objects, you need to then use the arrow keys to navigate within that set of inputs and then tab or shift+tab to get out of that set of inputs.

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

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

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

回答by David Partyka

If you are using Angular Materialfor your application, you can enable radio button tabbing in a cross-browsercompatible way by adding a tabindexto each <mat-radio-button>:

如果您在应用程序中使用Angular Material，则可以通过向each添加 a以跨浏览器兼容的方式启用单选按钮选项卡：tabindex<mat-radio-button>

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

Otherwise you will be unable to tab to radio buttons in Safari (because this is the default browser behavior - click herefor one discussion).

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