Question

看起来很简单，但这对我来说有点头脑风云。给出以下（有效的xhtml过渡）代码：

<form action="weird.html">

           <label for="test1">T1</label>
           <input type="radio" id="test1" name="test" value="1" />

           <label for="test2">T2</label>
           <input type="radio" id="test2" name="test" value="2" />

           <label for="test3">T3</label>
           <input type="radio" id="test3" name="test" value="3" />

           <label for="test4">T4</label>
           <input type="radio" id="test4" name="test" value="4" />

           <label for="test5">T5</label>
           <input type="radio" id="test5" name="test" value="5" />

        </form>

为什么我不能在单选按钮之间切换？这个问题似乎是因为它们都具有相同的名称属性，但就可访问性而言，这似乎与我相反。为什么焦点状态只适用于一个？这是因为该组被视为单个元素吗？访问键是否是唯一的非Javascript解决方案？

Answer 1

您实际上使用箭头键在单选按钮内移动，因为正如您所说，它们被视为单个元素。这是正常行为。

Answer 2

正如James和Tatu所说，这是正常的，我不知道你是否使用过“TABINDEX”，它可能会有效。

<input type="radio" id="test5" name="test" value="5" tabindex="5" />

但由于它们被视为单一元素，因此可能无效。

Answer 3

是的，每个单选按钮组都被视为一个表单元素 - 如果要在组元素之间跳过，请使用箭头键。它确实有意义;如果你用一组10个单选按钮在一半的长形状中进行选项，如果你必须在所有10个无线电选项之间进行制表，那么在移动到下一个表单项之前，你会感到恼火。

如果他们不在同一组中，那么您可以在他们之间进行选项卡。在下面的示例中，T5将获得单独的选项卡焦点到其余部分：

<form action="weird.html">

       <label for="test1">T1</label>
       <input type="radio" id="test1" name="test" value="1" />

       <label for="test2">T2</label>
       <input type="radio" id="test2" name="test" value="2" />

       <label for="test3">T3</label>
       <input type="radio" id="test3" name="test" value="3" />

       <label for="test4">T4</label>
       <input type="radio" id="test4" name="test" value="4" />

       <label for="test5">T5</label>
       <input type="radio" id="test5" name="test2" value="5" />

    </form>

键盘焦点打破单选按钮组

3 个答案: