修复由 flex-direction 反转的单选按钮的键盘导航顺序答案

【问题标题】：Fixing the keyboard navigation order of radio buttons reversed by flex-direction修复由 flex-direction 反转的单选按钮的键盘导航顺序
【发布时间】：2020-10-07 05:22:22
【问题描述】：

上下文：

我们有一些卡片是单选按钮组中的单选按钮，我们希望以不同的顺序显示大小断点。我想知道是否有一种方法可以很好地做到这一点，它不涉及为不同的断点复制 html，并且不会破坏可访问性。

所需的大断点：

|Large|Medium|Small|

想要的小断点：

|Small|
|Medium|
|Large|

所需的可访问性行为：

对于单选组，您通常希望点击 tab 以访问单选组中的第一个选项，然后使用箭头键选择不同的选项。

我的尝试：

我尝试使用display:flex 并将flex-direction 更改为row 或column-reverse，具体取决于断点。然后因为 flex 只是可视的，我还把tabindex 放在无线电输入上。虽然它修复了选项卡行为，但箭头键与您期望的相反。

超级削减示例：

<html lang="en">
    <head>
      <meta charset="utf-8">
    </head>

    <body>
    
        <p>Standard view:</p>
        <div style="display:flex;">
            <div>
                <input type="radio" id="featured" name="tier2" value="featured" tabindex="1">
                <label for="featured">Featured</label><br>
            </div>
            
            <div>
                <input type="radio" id="standard" name="tier2" value="standard" tabindex="2">
                <label for="standard">Standard</label><br>
            </div>
            
            <div>
                <input type="radio" id="basic" name="tier2" value="basic" tabindex="3">
                <label for="basic">Basic</label>
            </div>
        </div>
    
        <p>Mobile view:</p>
        <div style="display:flex; flex-direction:column-reverse">
            <div>
                <input type="radio" id="featured" name="tier" value="featured" tabindex="3">
                <label for="featured">Featured</label><br>
            </div>
            
            <div>
                <input type="radio" id="standard" name="tier" value="standard" tabindex="2">
                <label for="standard">Standard</label><br>
            </div>
            
            <div>
                <input type="radio" id="basic" name="tier" value="basic" tabindex="1">
                <label for="basic">Basic</label>
            </div>
        </div>
            
    </body>
</html>

问题：

是否有其他属性（如 tabindex）可用于定义箭头键的工作顺序？
还有其他不涉及复制 html 的方法吗？

谢谢！

【问题讨论】：

标签： html css flexbox accessibility

【解决方案1】：

简答

不要使用 tabindex、flex 等

改为提供移动版本的 HTML，并在页面加载时使用 JavaScript 重新排序组件的 DOM 顺序以适应更大的屏幕。

更长的答案

是否有其他属性（如 tabindex）可用于定义箭头键的工作顺序？

不，遗憾的是没有。

同时使用tabindex 是一个糟糕的主意，因为您将破坏应用程序其余部分的逻辑标签顺序。（几乎）不惜一切代价避免它！

还有其他不涉及复制 html 的方法吗？

如果不复制 HTML，就没有干净的方法（适用于所有屏幕阅读器和浏览器组合）。

你确实有一些选择

在服务器上重新排序 HTML - 您可以在查询屏幕宽度后通过 AJAX 加载组件。根据屏幕大小决定发送哪个版本（通过 AJAX 请求将屏幕大小发送到服务器）。
在页面加载时重新排序 HTML - 我将从您的移动布局开始作为基本 HTML（以尽量减少 JS 在移动设备上的工作，因为它们的功能较弱）。然后，如果屏幕大小超过您的断点，则在页面加载时使用 JS 重新排列项目以获取更大的屏幕。

两者的关键是 DOM 顺序是正确的。 如果您能以某种方式获得您想要的 DOM 顺序而不是尝试使用 CSS 更改它，它将为您省去很多麻烦， tabindex等

这两个选项都做同样的事情，但都各有利弊：-

选项 1 - 在服务器上重新排序 HTML

专业版 - 页面加载速度更快，延迟加载项目具有性能优势。

专业版 - 您的 HTML 简洁明了，完全符合您的要求，如果您愿意，它甚至可以完全提供不同列表的选项。

Pro - 可能更容易维护，因为您只需在服务器上编辑一个原始 HTML 文件（尽管有 2 个文件，每个视图一个），并且如果列表变长，不需要进行心理操来重新排序.

Con - 当您的 JavaScript 失败时，项目将根本不会加载

Con - 额外的网络调用实际上可能最终会变慢，您必须进行测试。是的，这与第一个“Pro”冲突，因此您必须对其进行测试！

选项 2 - 在页面加载时重新排序 HTML

专业版 - 通过首先使用移动设备，它不会向需要在桌面上重新排序的页面添加 KB 的 JavaScript 以外的任何内容。

专业版 - 当您的 JavaScript 失败时，该项目仍会呈现，只是可能不是您想要的顺序。

Con - 随着列表的增长，可能更难维持重新排序。

Con - 尽管早期关于 JavaScript 大小的“Pro”，它也是一个“con”，您仍然需要通过网络发送额外的信息并且必须进行屏幕大小检查。小问题，但如果性能很重要，则需要考虑。

我会怎么做？

如果我必须这样做，我可能会选择选项 2。

主要原因是与完整的 AJAX 调用相比，少量的 JS 微不足道，性能是关键。

这是假设表单不是“首屏”，在这种情况下，我会选择选项 1 来避免 Cumulative Layout Shift，因为这会惹恼用户在页面加载时看到列表重新排序。

【讨论】：

谢谢你，这很有帮助。我忘了提到我正在使用 Angular，但我应该能够使用指令进行重新排序，如果它太复杂/性能不佳，我可以复制 html。很高兴知道没有更优雅的方法，并感谢有关移动设备性能的提示:)