Specifying/overriding 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 值修改为非零值，但这不是我想要的。我正在寻找一次性设置 div 中所有项目优先级的功能，尽管这些项目被设置为 tabindex=0...

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

的那些

有没有不用 javascript 的方法？ IE。使用 html、css 或 ARIA 标签：https://msdn.microsoft.com/en-us/library/ie/gg701982%28v=vs.85%29.aspx? Is it possible to do it with the landmark roles: http://www.w3.org/WAI/PF/aria-practices/#focus_tabindex <--搜索 "Assign landmark roles to each region"？

如果可以，我该怎么做

Answer 1

不，不修改 tabindex 值是不行的。

使用Javascript/jQuery，您可以使用

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

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

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

Answer 2

您可以使用 aria-flowto 属性：

此技术的 objective 是通过使用 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>

Specifying/overriding DIV 标签内所有可制表项的 tabindex 一次

Specifying/overriding tabindex of all tab-able items within a DIV tag at once

html

css

accessibility

tabindex

wai-aria