Javascript 如何确定手风琴瓷砖菜单的标签顺序？

我正在创建一个瓷砖/手风琴实用程序。 单击互动程序后，我将通过在最近的第三个li元素下面添加div内容来显示与该互动程序相关的内容，并将手动设置该div内容部分的焦点

在JS和CSS的帮助下，我现在能够实现此功能：

然而，可访问性/选项卡顺序功能是错误的。如果我单击Tile 1并为其显示内容（div将附加在第三个li元素的下面），在使用键盘进行tabbing时，链接后，焦点应该转到Tile 2，但它转到Tile 4（因为DOM中元素的顺序是这样的，并且我已经以不同的显示顺序相对定位了元素）

如果我删除元素的相对定位，外观就会变得一团糟

我认为可以解决的可能解决方案：

移除元素的相对位置，并在每次单击平铺时，计算顶部和左侧位置值，并相对重新对齐平铺的位置

使用键盘事件，按需要的顺序强制聚焦

有人对这个简单的解决方案有什么建议吗

正确的选项卡顺序：

如果单击了磁贴1

• 第一个选项卡-关注div内的链接
• 第二个选项卡-焦点应移到平铺2
• 第三个选项卡-焦点应移到平铺3
• 第四个选项卡-焦点应移到平铺4

如果单击了磁贴2

• 第一个选项卡-关注div内的链接
• 第二个选项卡-焦点应移动到平铺
• 第三个选项卡-焦点应移动到平铺
• 第四个选项卡-焦点应移动到平铺

$（文档）.ready（函数（）{
$（“#tiles>li”）。单击（函数（）{
var idVal=$（this.find（“a”）.attr（“rel”）；
dynamicContainerClass=“”；
var indexVal=parseInt（$（this.attr（“rel”））；
$（“.dynamicContainer”）.remove（）；
var id=parseInt（$（this.attr（“rel”））；
var$positionObj=$（“#contentDiv”）.html（）；
//$（“如果可能，尝试使用
tabindex
避免。如果页面上只有平铺，那么混用
tabindex
可能没问题。但是一旦设置了一个对象的
tabindex
，就必须为所有对象设置它。也就是说，你必须完全控制选项卡这一页上的每一件事都会变得一团糟

标记的DOM顺序通常是最好的顺序，因此如果必须更改标记顺序，通常最好更改DOM

但是，请记住，视力低下的用户，尤其是那些使用放大镜（如ZoomText）的用户，可能会对您的选项卡顺序感到困惑，因为它不一致。放大镜会滚动页面以将焦点保持在视图内

如果磁贴1打开，则顺序为：

地砖1
链接
地砖2
瓷砖3
如果磁贴2打开，则顺序为：

地砖1
地砖2
链接
瓷砖3
如果磁贴3打开，则顺序为：

地砖1
地砖2
瓷砖3
链接
屏幕放大镜将以“看似”随机的方式不断地前后移动。用户在跳到打开的部分之前不知道焦点是否会在瓷砖上移动

这并没有回答您最初的问题（虽然
tabindex
算是一个答案），但希望能从可访问性的角度提供一些思考的素材。
能够通过使用此解决方案实现预期的选项卡顺序。使用绝对、顶部和左侧属性重新定位互动程序。它起到了作用


$（文档）.ready（函数（）{
$（“#tiles>li”）。单击（函数（）{
var idVal=$（this.find（“a”）.attr（“rel”）；
dynamicContainerClass=“”；
var indexVal=parseInt（$（this.attr（“rel”））；
$（“.dynamicContainer”）.remove（）；
var id=parseInt（$（this.attr（“rel”））；
var$positionObj=$（“#contentDiv”）.html（）；
var listItems=$（“#li”）；
listItems.each（函数（idx，li）{
$（li）.css（{'position'：''，'top'：''，'left'：''}）；
});
//$（'Hi，请不要通过发布一个链接作为“代码”来规避您在大红条幅中看到的要求。请在问题本身中包含您的代码（请参阅了解更多信息）。代码现在已包含。