带有特殊按键事件的元素的 ARIA 处理答案

【问题标题】：ARIA treatment for element with special keydown events带有特殊按键事件的元素的 ARIA 处理
【发布时间】：2015-10-07 05:14:25
【问题描述】：

我有一个包含条目列表的组件，用户可以重新排列、删除或添加这些条目。添加/删除功能和列表内导航很容易使用 ARIA 属性进行标记，但可移动性功能让我不确定。在左侧，每个项目都有一个小的手柄按钮，用户可以使用该按钮开始将元素拖动到新位置。

我阅读了一些关于 ARIA 的可拖动元素的方法，并认为在我的情况下，因为这严格来说是一个简单的垂直列表，所以增加这个句柄（它是可选项卡）会更有意义与 keydown 行为相比，尝试用 aria 术语“描述”复杂的可拖动性。这将带来很多复杂性，而且会令人困惑，因为在这种情况下，可拖动性是为了方便排序，而不是“我将 x 放在 y 内”的概念。向上和向下键作为替代方案非常有意义，并且该解决方案具有可能成为所有用户有用的快捷方式的额外质量。

但是我不确定是否可以像这样使用向上和向下键而不以某种方式标记有问题的元素，因为在其他情况下向上和向下是导航并且不会导致数据模型发生变化。我可以用不可见的说明或其他东西标记它，但我不知道这是否足够。

我应该使用不同的键吗？请注意，如果是这样，我将失去非 ARIA 用户可以轻松发现此功能的优势。是否有一个角色可以“可以”以这种方式使用箭头键？ aria-label 是解释可用操作的适当位置，还是保留用于输入？

【问题讨论】：

标签： html accessibility wai-aria

【解决方案1】：

我们使用 ctrl+shift+up / ctrl+shift+down 来移动列表中的项目。我们已经在我们的几个应用程序中使用了这种行为，它似乎运行良好。所以你可以tab到列表，使用up/down在列表中移动焦点/选择，或者使用shift+up/down进行扩展选择，或者使用ctrl+up/down进行非连续选择（所有标准列表键盘行为），然后然后使用 ctrl+shift+up/down 向上或向下移动整个选择。

我们还支持拖放以重新排序，但 ctrl+shift+up/down 是键盘或屏幕阅读器用户可以重新排序的方式。

【讨论】：

您的回答和 unobf 的回答都非常有帮助，谢谢。由于在我的情况下无法选择多个列表项，因此仅使用 ctrl+up/down 似乎很完美。我认为我应该在整个项目上实现这一点，而不仅仅是句柄，因为列表项已经是箭头导航的，听起来这将最符合用户对您所描述的期望。然后拖动手柄可以隐藏 aria-hidden，因为它的功能将由父元素可访问地提供。
无论您使用什么键，我都同意它应该适用于整行。在使用键盘快捷键之前，您不必将焦点放在手柄上。但我是在不知道您的场景的所有细节的情况下这么说的。

【解决方案2】：

您将面临的最大障碍是并非所有屏幕阅读器都会将箭头键事件发送到 JavaScript 事件处理程序。保证这一点的唯一方法是在元素上使用 ARIA 角色“menuitem”（或正确发送事件的其他角色之一）。

因此，您可能想要做的是添加一个“menuitem”按钮，该按钮切换到元素被“抓取”的状态，然后允许使用箭头键向上或向下移动元素。

您可以添加工具提示（或在切换状态时显示的帮助文本）以帮助仅使用键盘和屏幕阅读器的用户了解应该使用哪些键来移动元素。您可以使用aria-describedby 将此帮助文本与小部件相关联，以指向帮助文本元素的 ID。

【讨论】：