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

Question

Let's say I have a web page which contains a list of links.

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

For design reasons, I need to change the order of these links on larger screens so that "Alpha" is visually at the bottom of the list.

@media (min-width: 30em) {

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

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

}

When tabbing through the various focusable elements on the page, the visual order of these links is not honoured, thus when tabbing through the list the focus order will be "Alpha" then "Bravo" then "Charlie".

If I set a positive tabindex on any of those links, they are moved to the end of the tab order (since all other focusable elements essentially have a tab index of 0).

My question is: is there a way to make the tab order honour the visual order?.

Answer 1

Currently there doesn't seem to be a way to united flex ordering and HTML ordering, according to https://www.w3.org/TR/css-flexbox-1/#order-property and section 5.4.1. Reordering and Accessibility:

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