0

我有一个带有复选框的下拉菜单，我可以在菜单中切换，进入下拉菜单，然后选择带有空格键的复选框。但是，当我再次点击选项卡时，焦点现在回到页面顶部，它应该转到下拉列表中的下一个复选框。这只是IE中的一个问题。

<label class="checkbox" tabindex="1" for="All Programs">
     <input name="programNameSelection" tabindex="1" id="All Programs" type="checkbox" checked="" value="All Programs">
     <span class="checkbox-text">All Programs</span> 
</label>

新更新

<label class="checkbox" for="All Programs">
     <input name="programNameSelection" tabindex="0" id="All Programs" type="checkbox" checked="" value="All Programs">
     <span class="checkbox-text">All Programs</span> 
</label>
4

2 回答 2

1

虽然嵌套在<input/>里面<label>是理论上的标准并且完全允许，但不建议这样做，特别是因为已知它会导致屏幕阅读器出现问题。

因此，在继续之前，我的第一个建议是将您的代码更改为更传统的代码，其中<label>元素链接到<input/>使用属性for和id. 其余的，乍一看还不错。

于 2019-11-07T19:38:13.533 回答
1

您正在使用tabindex=1（两次）。

如果您试图使项目具有焦点，您应该使用tabindex=0.

选项卡索引上的任何正整数都将其置于指定位置的选项卡顺序，并覆盖 DOM 的顺序。

tabindex=0使项目可聚焦，但按照 DOM 的顺序。

tabindex对于您的示例，如果您将输入放在 a中，则根本不需要 a ，form因为输入会自动聚焦，除非您覆盖该功能（并将其放入表单中有助于屏幕阅读器）。

此外，您for需要是一个单词，在输入和输入AllPrograms上都没有空格forid

作为一般规则（我从来不需要亲自打破），没有充分的理由tabindex在项目上使用肯定，而是修复HTML元素的顺序。

于 2019-11-07T20:02:53.900 回答