Html （可访问性）无法继续使用tabindex处理SPAN元素之后的下一个表单元素

我有一个注册表单，它有一个非常简单的标记，不支持可访问性。基本上是这样的:

<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”

---

如果我把你的代码片段在一个测试文件中重复几次，我就可以成功地标记每个复选框和每个“经济”标签。将复选框的标签设为按钮而不是纯文本有点不寻常，但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"

---

啊哈，所以如果我把它从一个按钮改成另一个组，那么人们听的话会更有意义。实际的问题是，整个页面的标记是相同的，但我需要将Economy作为其他复选框/元素的一个组使用。当经济性是可聚焦的时，它会以某种方式阻止用户访问“后代”元素。我不太确定我是否应该使用tabindex值，似乎我需要动态地更改它们。你想制作手风琴吗？你正在使用的页面公开了吗？