时间戳

首页 > 解决方案 > Is there a way to make the tab order honour the visual order?

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

问题描述

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?.

标签： htmlcsstab-ordering

解决方案

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

作者必须仅将 order 用于视觉上的，而不是逻辑上的内容重新排序。使用 order 执行逻辑重新排序的样式表是不一致的。

推荐阅读