引导4-在使用order类时记录顺序可访问性

Question

对于可访问性而言，使用引导顺序类(如order-2 order-md-1 )和选项卡顺序( tab order )存在一些问题，因为我希望选项卡流遵循可视流。

查看以下标记：

<div class="row">
    <div class="col-12 col-md-6 order-2 order-md-1">
        <a href="link.html"
           class="back-link">
            Back
        </a>
    </div>

    <div class="col-12 col-md-6 order-1 order-md-2">
        <input type="button"
               class="btn btn-brand btn-sm-block"
               value="Continue"/>
    </div>
</div>

它在浏览器中生成以下视图：

当前选项卡行为

​

本质上，我希望选项卡流遵循可视化流，而这并不是只使用order类。

期望选项卡行为

​

从技术上讲，一方面可以使用带有正数的tabindex属性，但知道这是错误的做法。

Answer 1

不幸的是，这方面没有“简单的解决办法”。

有趣的轶事: Firefox曾经在屏幕上订购物品时保留了标签顺序，但据说这是一个bug，并在稍后的版本中进行了更改。

一篇关于它的文章与firefox的bugreport

有两种方法可以更改选项卡的顺序：

您可以通过JS:来实现这一点。

循环遍历每个元素，并根据其位置设置适当的表索引。取决于您的站点，这可能或多或少是复杂的。

或您通过复制的内容来完成它

您不使用flexbox的order属性，而只使用隐藏的sm (-md，.)类引导，以始终显示您的内容的顺序，它应该通过选项卡。这是比较容易的方法，但是它会导致HTML中有两次元素。