如何更改一个控件（div）中的Tab键顺序 - html

Question

我有一个复合控制，它由两个不同的部分组成 - 基于反应和基于d3。生成的Tab键顺序不正确。我可以使用tabindex属性修复它，但这会与整个页面的Tab键顺序冲突。

是否有办法仅在某个元素下修改Tab键顺序，以免影响整体Tab键顺序？

更新（提供示例）：以下控件（以蓝色标出）有4个可聚焦元素。现在Tab键顺序不正确。它遵循如何在DOM中定义元素。更改元素的顺序很棘手（例如，d3.brush以相反的顺序添加画笔元素）。

使用制表符索引解决了控件中的问题，但它打破了整个页面的Tab键顺序。

Answer 1

将tabindex与正值一起使用是一个坏主意，因为屏幕阅读器仍然会使用DOM顺序读取页面，并且键盘导航的顺序不同会非常令人不安。

在可访问性方面，你应该有一个等价：visual order（= CSS order），screenreader reading order（= DOM order）和keyboard order。

在您的情况下，最好的解决方案是反转DOM顺序以匹配视觉顺序。

您还可以禁用标签顺序中的链接（通过设置tabindex=-1）并提供其他可访问的控件。