一次指定/覆盖 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 中的所有 span 在 tab 顺序方面优先于 dev1 中的 span，尽管它们的 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?是否可以使用地标角色来做到这一点：http://www.w3.org/WAI/PF/aria-practices/#focus_tabindex

如果是这样，我该怎么做

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>

Answer 2

不，你不能不修改 tabindex 值。

使用 Javascript/jQuery，你可以做到这一点

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

另外，您必须仔细阅读 WCAG 页面中关于焦点顺序的内容： http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html

使用不同于“-1”和“0”的 tabindex 值是很少可访问的。