固定单向按钮的键盘导航顺序(由flex-direction反转) [英] Fixing the keyboard navigation order of radio buttons reversed by flex-direction
问题描述
上下文:
我们有一些卡，它们是单选按钮组中的单选按钮，对于较小和较大的断点，我们希望以不同的顺序显示.我想知道是否有一种方法可以很好地做到这一点，而不涉及为不同的断点复制html，并且不会破坏可访问性.
We have some cards that are radio buttons in a radio group, that we want to display in a different order for small and large breakpoints. I want to know if there is a way to do this nicely that doesn't involve duplicating the html for the different breakpoints, and doesn't break accessibility.
所需的大断点:
|Large|Medium|Small|
所需的小断点:
|Small|
|Medium|
|Large|
所需的辅助功能:
对于收音机组，通常希望按 tab 进入收音机组中的第一个选项，然后使用箭头键选择其他选项.
With a radio group, you'd normally expect to hit tab to get to the first option in the radio group, and then use the arrow keys to select different options.
我尝试过的事情:
我尝试使用 display:flex 并将 flex-direction 更改为 row 或 column-reverse 取决于断点.然后，因为flex仅是可视的，所以我也将 tabindex 放到了无线电输入中.尽管它可以解决选项卡的行为，但是箭头键与您期望的相反.
I've tried using display:flex and changing flex-direction to either row or column-reverse depending on the breakpoint. And then because flex is visual only, I have also put tabindex onto the radio inputs. Although it fixes the tab behaviour, the arrow keys are the reverse of what you'd expect.
超级删减示例:
<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吗?
- Is there another attribute like
tabindexthat you can use to define the order the arrow keys work? - Is there any other way of doing this that doesn't involve duplicating html?
谢谢！
推荐答案
简短回答
请勿使用tabindex，flex等.
Short Answer
Don't use tabindex, flex etc.
取而代之的是提供HTML的移动版本，并在页面加载时使用JavaScript为大型屏幕重新排列组件的DOM顺序.
Instead serve the mobile version of the HTML and reorder the DOM order of your component using JavaScript on page load for larger screens.
不，可惜没有.
也使用 tabindex 是一个糟糕的主意，因为您将破坏应用程序其余部分的逻辑制表符顺序.不惜一切代价避免它！
Also using tabindex is a terrible idea as you will break logical tab order for the rest of your application. Avoid it at (nearly) all costs!
没有复制HTML的干净方法(这将适用于所有屏幕阅读器和浏览器组合).
There is no clean way to do it without duplicating the HTML (that will work with all screen reader and browser combinations).
-
在服务器上重新排列HTML -您可以在查询屏幕宽度后通过AJAX加载组件.根据屏幕尺寸确定要发送的版本(将屏幕尺寸发送给具有AJAX请求的服务器).
Reorder the HTML on the server - You could load the component via AJAX after querying the screen width. Decide which version to send based on the screen size (send the screen size to the server with the AJAX request).
对页面加载时的HTML进行重新排序-我将从您的移动设备布局开始，将其作为基本HTML(以最大程度地减少JS在移动设备上的功能，因为它们的功能较弱).然后，如果屏幕尺寸超出了您的断点，则在页面加载时，请使用JS重新排列较大屏幕的项目.
Reorder the HTML on page load - I would start with your mobile layout as the base HTML (to minimise JS work on mobiles as they are less powerful). Then if the screen size is over your break point rearrange the items using JS on page load for larger screens.
两者的关键是 DOM顺序正确.如果您能够以某种方式获得DOM顺序而不是尝试使用CSS进行更改，它将为您省去很多麻烦. tabindex 等.
The key to both is that DOM order is correct. It will save you a lot of headaches if you can somehow get your DOM order as you want it rather than trying to change it with CSS, tabindex etc.
两个选项都做同样的事情，但是都各有利弊:-
Both options do the same thing but both have pros and cons:-
选项1-重新排序服务器上的HTML
专业版-页面加载速度更快，并且延迟加载项目具有性能优势.
Pro - the page will load faster and lazy loading the item in has performance benefits.
专业版-您的HTML干净无误，完全符合要求，甚至可以根据您的需要提供完全不同的列表选项.
Pro - your HTML is clean and exactly what is required, it even gives the option for different lists entirely if you desire.
Pro-可能更易于维护，因为您只需要在服务器上编辑一个原始HTML文件(尽管2个文件，每个视图一个)，并且如果列表变长，则不需要进行精神体操来重新排序
Pro - probably easier to maintain as you just have a raw HTML file to edit on the server (albeit 2 files, one for each view) and don't need to do mental gymnastics to work out reordering if the list grows longer.
Con-当您的JavaScript失败时，该项目将根本不会加载
Con - when you JavaScript fails the item will not load in at all
缺点-额外的网络通话实际上可能会变慢，您必须进行测试.是的，这与第一个"Pro"代理冲突.因此您必须对其进行测试！
Con - an extra network call may actually end up slower, you would have to test. Yes this conflicts with the first "Pro" so you would have to test it!
选项2-在页面加载时重新排列HTML
专业版-首先使用移动设备，除了在桌面上需要重新排序所需的页面外，它不会向页面添加任何Java脚本.
Pro - By going mobile first it will not add anything other than maybe a KB of JavaScript to the page needed to reorder on desktop.
Pro- (当您的JavaScript失败时)，该项目仍将呈现，但可能与您期望的顺序不符.
Pro - when your JavaScript fails the item will still render, it just might not be in the order you desire.
缺点-随着列表的增加，可能更难维持重新排序.
Con - As your list grows it may be harder to maintain the reordering.
缺点-尽管较早的专业版"关于JavaScript大小，它也是一个骗局"，您仍在通过有线方式发送额外的信息，并且必须进行屏幕大小检查.次要点，但如果性能很重要，则需要考虑一些问题.
Con - Despite the earlier "Pro" about JavaScript size, it is also a "con", you are still sending extra info down the wire and have to do a screen size check. Minor points but if performance is important something to consider.
如果必须这样做，我可能会选择选项2.
If I had to do this I would probably go for option 2.
主要原因是与完全的AJAX调用相比，少量的JS无关紧要，而性能是关键.
The main reason being that the tiny amount of JS is nothing compared to a full AJAX call and performance is key.
这是假设表单不是非折"，在这种情况下，我会选择选项1以避免累积版式移位，因为那样会使用户在页面加载时看到列表重新排序.
This is assuming the form is not "above the fold", in which case I would go for option 1 to avoid Cumulative Layout Shift, as that would annoy users seeing the list reorder while the page loads.
这篇关于固定单向按钮的键盘导航顺序(由flex-direction反转)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
