html - 使用 Tab 键在复选框上导航并使用空格键选择它们

Question

我正在使用包裹在 label 标签内的复选框，还使用另一个标签来显示复选框的自定义图标和悬停效果。它使用鼠标工作正常，即我可以使用鼠标选择复选框。

但现在我必须使用 Tab 键浏览这些复选框，并使用空格键使它们可选择。我尝试将 tabindex 添加到输入字段和标签标签，但它们似乎都不起作用。

这是我们使用的代码片段

<label for="checkbox1"> <input class="css-checkbox" type="checkbox" id="checkbox1" tabindex="1"/> <label class="check-label" for="checkbox1"> Health Check </label> </label>

如何使用 Tab 键在这些复选框上导航并使用空格键进行选择？

Answer 1

您可能正在寻找这样的解决方案:

<label for="checkbox1">
    <input class="css-checkbox" type="checkbox" id="checkbox1" tabindex="0"/>
    <span>Health Check</span>
</label>
<br />
<label for="checkbox2">
    <input class="css-checkbox" type="checkbox" id="checkbox2" tabindex="0"/>
    <span>Health Check #2</span>
</label>
<br />
<label for="checkbox3">
    <input class="css-checkbox" type="checkbox" id="checkbox3" tabindex="0"/>
    <span>Health Check #3</span>
</label>

关键点是只使用一个包装label然后tabindex=0。

演示:http://cssdeck.com/labs/oeyqxhhz