有没有一种方法可以使制表符顺序遵守视觉顺序？

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;
    }

}

在浏览页面上的各个可聚焦元素时，这些链接的视觉顺序不会得到遵守，因此在浏览列表时，聚焦顺序将为“ Alpha”，“ Bravo”，“ Charlie”。

如果我在这些链接中的任何一个上设置了正数tabindex，它们将移至制表符顺序的末尾（因为所有其他可聚焦元素的制表符索引基本上为0）。

我的问题是：有没有一种方法可以使制表顺序符合视觉顺序？。

Answer 1

目前，似乎还没有统一的Flex排序和HTML排序的方法， 根据{{​​3}}和第5.4.1节。重新排序和可访问性：

  

作者只能将顺序用于内容的视觉而非逻辑重新排序。使用订单执行逻辑重新排序的样式表不符合要求。