辅助功能问题使用空格键选择复选框会跳过内容

Question

我有一个带复选框的下拉菜单，我可以在菜单中切换，进入下拉菜单，然后 select 使用空格键选择复选框。但是，当我再次点击选项卡时，焦点现在回到了页面顶部，它应该转到下拉列表中的下一个复选框。这只是 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>

Answer 1

尽管将 <input/> 嵌套在 <label> 中在理论上是标准的并且是完全允许的，但不推荐这样做，尤其是因为众所周知它会导致屏幕阅读器出现问题。

因此，在继续之前我的第一个建议是将您的代码更改为更常规的代码，其中 <label> 元素使用属性 for 和 id。其他的，乍一看还不错。

Answer 2

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

如果您试图使项目可聚焦，您应该使用 tabindex=0。

制表符索引上的任何正整数都会将其置于指定位置的制表符顺序中，并覆盖 DOM 的顺序。

tabindex=0 使项目可聚焦，但顺序为 DOM。

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

此外，您的 for 需要是一个单词，在 for 和输入 id[ 上都使用 AllPrograms 而没有 space =21=]

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

辅助功能问题使用空格键选择复选框会跳过内容

Accessibility Issue Selecting Checkbox with Spacebar skips content

html

accessibility

wai-aria

web-accessibility