html - 一次指定/覆盖 DIV 标签内所有可制表项的 tabindex

Question

假设我有这个

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

有没有办法让 div2 中的所有跨度在 Tab 顺序方面优先于 dev1 中的跨度，尽管它们的 tabindex 值都设置为 0？ IE。如果我在打开屏幕阅读器的情况下进入页面，它应该在循环进入 div1 之前按 Tab 键时首先遍历 div2 中的跨度

注意:我的实际用例比这复杂得多....这只是为了说明目的

注意:我知道我可以将 tabindex 值修改为非零值，但这不是我想要的。尽管元素设置为 tabindex=0...

注意:这也应该适用于一般所有可制表符的元素，即。不仅仅是标记为 tabindex="0"

的那些

有没有不用 javascript 的方法？ IE。使用 html、css 或 ARIA 标签:https://msdn.microsoft.com/en-us/library/ie/gg701982%28v=vs.85%29.aspx ？是否可以使用具有里程碑意义的 Angular 色来做到这一点:http://www.w3.org/WAI/PF/aria-practices/#focus_tabindex <--搜索“为每个区域分配地标 Angular 色”？

如果是这样，我该怎么做

Answer 1

您可以使用 aria-flowto 属性:

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

using aria-flowto

此技术的问题在于它目前并未得到屏幕阅读器的广泛支持，因此您必须测试目标阅读器的兼容性。

这是标记的样子

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