（辅助功能 ARIA）无法继续使用 tabindex 的 SPAN 元素之后的下一个表单元素

Question

我有一个带有非常简单标记的注册表单，它不支持可访问性。基本如下：

<div class="responsiveCell responsiveCellSize2">
          <div class="alignBottom minSize2">
            <div id="cont_id_f_c816dab2f221e8118135e0071b652f51" class="stat_group checkbox-container group group-id-cont_id_f_c816dab2f221e8118135e0071b652f51 has-children">
              <input class="floatLeft" id="f_c816dab2f221e8118135e0071b652f51" name="f_c816dab2f221e8118135e0071b652f51" leadfield="" contactfield="" aria-labelledby="label-cont_id_f_c816dab2f221e8118135e0071b652f51" type="checkbox">
              <span style="font-family:Arial; font-weight:normal; font-size:16px; color:#A40084;" class="group-title active" id="label-cont_id_f_c816dab2f221e8118135e0071b652f51" role="button" aria-expanded="true" tabindex="0">Economy</span>
            </div>
          </div>
          <div class="clear">&nbsp;</div>
          <div style="alignTop minSize2">
            <div id="required_info_f_c816dab2f221e8118135e0071b652f51" class="requiredInfo floatLeft">&nbsp;
    </div>
          </div>
        </div>
        <div class="responsiveCell responsiveCellSize1 emptyCell">&nbsp;</div>

这种模式在页面上出现了大约 50 次。这个标记已经有我的额外标记来支持可访问性。

标记不能在后端更改。

现在我面临一个问题，即用户在按 Tab 时无法继续到下一个元素。

键盘导航停止到具有以下属性的 SPAN 元素的第一个实例：

• role="按钮"
• aria-expanded="true"
• tabindex="0"

Answer 1

如果我使用您的代码 sn-p 并在测试文件中重复几次，我可以成功地选择每个复选框和每个“经济”标签。让复选框的标签成为按钮而不是纯文本有点不寻常，但 html 并没有任何无效的地方。屏幕阅读器会很好地宣布它。

"Economy check box not checked"
"Economy button expanded"
"Economy2 check box not checked"
"Economy2 button expanded"
"Economy3 check box not checked"
"Economy3 button expanded"