Html 一次指定/覆盖DIV标记中所有可制表项的tabindex

假设我有这个

<div id="div1">
 <span tabindex="0">Span0</span>
 <span tabindex="0">Span1</span>
 <span tabindex="0">Span2</span>
</div>
<div id="div2">
 <span tabindex="0">Span20</span>
 <span tabindex="0">Span21</span>
 <span tabindex="0">Span22</span>
</div>

Span0
Span1
Span2
Span20
Span21
Span22

是否有一种方法可以使div2中的所有跨度在选项卡顺序方面优先于dev1中的跨度，尽管它们的tabindex值都设置为0？也就是说，如果我在screenreader打开的情况下使用tab键进入页面，在循环进入div1之前，按下tab键时，它应该首先遍历div2中的跨距

注意：我的实际用例比这个复杂得多……这只是为了说明

注意：我知道我可以将tabindex值修改为非零，但这不是我想要的。我正在寻找一种能力，可以同时设置div中所有项的优先级，尽管这些项被设置为tabindex=0

注意：这通常也适用于所有可使用选项卡的项目，即不仅仅是标记为tabindex=“0”的项目

---

有没有一种不用javascript的方法？使用html、css或ARIA标记：？是否可以使用landmark角色执行此操作：否如果不修改tabindex值，则无法执行此操作

使用Javascript/jQuery，您可以使用

$("#div1 span").attr("tabindex", "1");

此外，您还必须仔细阅读有关焦点顺序的WCAG页面：

---

使用与“-1”和“0”不同的tabindex值是很难访问的。

您可以使用

aria flowto

属性：

此技术的目标是通过使用aria flowto属性指定内容的替代读取顺序。当元素的aria flowto属性只有一个值时，辅助技术可能会放弃正常的文档读取顺序，而转到id等于该值的元素。当aria flowto属性具有多个ID时，辅助技术可以将目标元素作为备选元素呈现给用户，由目标元素的名称标识，用于阅读顺序中的下一个内容

这种技术的问题是，目前屏幕阅读器并不广泛支持它，因此您必须测试目标阅读器的兼容性

这就是标记的外观

<h2 aria-flowto="div2">Header before messy content</h2>
<div id="div1" aria-flowto="after">
 <span tabindex="0">Span0</span>
 <span tabindex="0">Span1</span>
 <span tabindex="0">Span2</span>
</div>
<div id="div2" aria-flowto="div1">
 <span tabindex="0">Span20</span>
 <span tabindex="0">Span21</span>
 <span tabindex="0">Span22</span>
</div>
<h2 id="after">Header after messy content</h2>

凌乱内容前的标题 Span0 Span1 Span2 Span20 Span21 Span22 凌乱内容后的标题

---

不要使用tabindex>0-这会给非屏幕阅读器、键盘用户带来各种可访问性问题非常有趣的方法！但不幸的是，除非浏览器本机理解aria标记，否则它不会影响选项卡顺序。。。我认为op的要求没有真正的解决方案。。。而且，在任何情况下，影响焦点顺序仍然是不可接受的。。。