如何更改html文档的一部分的自然Tab键顺序？

Question

我的页面中间有一个表单，我想更改该表单中的Tab键顺序，但不会破坏文档的其余选项卡流程。我基本上有两个按钮，我想交换他们的Tab键顺序。我已经尝试过tabindex 0，-1和其他几个。在菜单中的链接之前设置它们会混淆自然顺序，因为它会选中它们...我已经看到了一些示例，其中tabindex被添加到每个tabbable元素，然后它们的值通过javascript设置。我希望避免这样的事情。也无法移动按钮。构建html是为了响应，他们希望按钮在移动设备上以某种方式排列。实现这个目标的正确方法是什么？

Answer 1

文档只有一个标签顺序，所以如果只为两个元素设置tabindex，则不可避免地影响整个订单：那么这些元素将在缺少该元素的任何元素之前排序属性。因此，为了使它们出现在它们的自然位置，您需要在它们之前的所有元素上设置tabindex。

作为解决方法，您可以考虑通过iframe嵌入表单。如此嵌入的文档有自己的Tab键顺序。

或者，正如@DerekKurth在评论中建议的那样，使元素的源顺序成为所需的标签顺序，并使用CSS格式化可视顺序。

最重要的是，不要造成问题。如果标签顺序与明显顺序不同，则总是偏离良好的可用性和可访问性。