选项卡不起作用....箭头键是否兼容？答案

【问题标题】：Tabbing not working....are arrow keys compliant?选项卡不起作用....箭头键是否兼容？
【发布时间】：2018-06-29 03:28:09
【问题描述】：

关于可访问性，是否使用箭头键而不是在具有多个单选按钮的表单中切换？还是必须允许制表符？我正在做一个测验，选项卡只会转到第一个单选按钮，然后直接转到提交按钮，跳过其他三个选项。但是使用箭头键，它将循环显示问题的所有答案选项。

【问题讨论】：

标签： javascript html css button accessibility

【解决方案1】：

在某些帮助下使用箭头键被认为是合规的。分配role=radiogroup 会让视障人士知道有多个选项可供选择。

此外，将role="radio" aria-checked="false" 分配给每个选项将有助于屏幕阅读器知道哪些已选中，哪些未选中。

完整代码示例：

<div role="radiogroup" aria-labelledby="gdesc1">
  <h3>Pizza Crust</h3>
  <div role="radio" aria-checked="false" tabindex="0">
    Regular crust 
  </div>
 <div role="radio" aria-checked="false" tabindex="-1">
   Deep dish 
 </div>
 <div role="radio" aria-checked="false" tabindex="-1">
   Thin crust 
 </div>

查看此w3 example

【讨论】：

在进入 ARIA 属性之前，请先评估您是否可以使用原生 <input type="radio">。参见 ARIA 的第一条规则 - w3.org/TR/using-aria/#rule1

【解决方案2】：

单选元素的表单控件仅限于箭头键。

您实际上无法通过单选控件“按标签”。

为了回答您的问题，箭头键是合规的

【讨论】：

太棒了！感谢您的帮助。
许多浏览器允许您在每个单选按钮之间切换，直到您实际选择一个，然后浏览器使整个单选组停止一个制表位。这是一种奇怪的行为。

【解决方案3】：

是的，这是单选按钮的预期行为。单选按钮组代表跳位顺序中的一个位置，箭头键提供单选按钮组内的选择方式。

最好使用 HTML 单选输入，因为 Web 浏览器会自动设置此行为，因此您无需对 JavaScript 做任何特殊处理。请参阅First Rule of ARIA Use。

如果您不使用 HTML 单选输入，请遵循 Radio Group pattern from the WAI-ARIA Authoring Practices，它描述了您需要使用 JavaScript 实现的预期键盘行为和 ARIA 语义。样本实现也可以在那里进行研究。

【讨论】：