有没有办法让标签顺序符合视觉顺序？

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，它们将移至 Tab 键顺序的末尾（因为所有其他可聚焦元素基本上都有 0 的 Tab 键索引）。

我的问题是：有没有办法让 Tab 键顺序符合视觉顺序？。

Answer 1

目前似乎没有办法统一弹性排序和HTML排序，根据 https://www.w3.org/TR/css-flexbox-1/#order-property 和第 5.4.1 节。重新排序和辅助功能：

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

有没有办法让标签顺序符合视觉顺序？

Is there a way to make the tab order honour the visual order?

html

css

tab-ordering