有没有一种方法可以使选项卡顺序遵循视觉顺序？

Question

假设我有一个包含链接列表的网页。

<ul class="links">
    <li><a href="#">Alpha</a></li>
    <li><a href="#">Bravo</a></li>
    <li><a href="#">Charlie</a></li>
</ul>

出于设计原因，我需要在更大的屏幕上改变这些链接的顺序，使得“Alpha”在视觉上位于列表底部。

@media (min-width: 30em) {

    .links {
        display: flex;
        flex-direction: column;
    }

    .links > li:first-child {
        order: 1;
    }

}

在页面上通过Tab键遍历各个可聚焦元素时，这些链接的视觉顺序并不被尊重。因此，在遍历列表时，焦点顺序将是“Alpha”、“Bravo”、“Charlie”。

如果我在任何这些链接上设置了正数tabindex，它们将移动到Tab键顺序的末尾（因为所有其他可聚焦元素基本上具有0的tabindex）。

我的问题是：是否有一种方法可以使Tab键顺序尊重视觉顺序？

- James Long

---

可能不会。除非您为“tabindex”指定一个正值，否则焦点将遵循DOM而不真正关心您应用于移动事物的任何CSS。我会创建一个具有正确顺序的单独元素，并在桌面/移动设备上隐藏它。 - I haz kode

https://www.w3.org/TR/css-flexbox-1/#order-accessibility - jeanpaulxiao

@jeanpaulxiao 不错的发现。如果你提供的答案基本上是“根据规格，不行”，并包含该链接，我会接受它作为答案。 - James Long

所以你需要做的是使用脚本移动它...如果没有脚本，你可以复制该项并切换显示值。 - René

@René 我认为你是对的。唯一的解决方案似乎是调整标记而不仅仅是样式。 - James Long

Answer 1

目前似乎没有一种方法可以将弹性排序和HTML排序结合起来，根据https://www.w3.org/TR/css-flexbox-1/#order-property和5.4.1章节“重新排序和可访问性”的规定：

作者必须仅使用顺序进行内容的视觉重排，而不是逻辑重排。使用顺序执行逻辑重排的样式表是不符合规范的。

- jeanpaulxiao