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

2022-01-21 00:00:00 radio-button html

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

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/

我很难向我的 QA 解释这不是错误.有人可以向我解释为什么会发生这种情况.

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

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

推荐答案

你可以引用 W3C 作为你的来源，这里和这里.

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

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

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.

  • 焦点可以通过以下方式移动到单选组:
    • Tab 键
    • 针对标签的访问密钥或助记符
    • 激活标签(通过辅助技术机制)
    • Tab 键按下移动焦点到组中的第一个单选按钮，但不选择单选按钮.
    • Shift+Tab 按键移动焦点到最后一个电台组中的按钮，但不选择单选按钮.
    • 向上箭头键按下移动焦点和通过组中的单选按钮向前选择.如果第一个单选按钮有焦点，然后焦点和选择移到最后组中的单选按钮.
    • 向下箭头键按下移动焦点并通过组中的单选按钮向后选择.如果最后一个单选按钮有焦点，然后焦点和选择移动到组中的第一个单选按钮.*空格键按下检查当前具有焦点的单选按钮.

相关文章