ARIA治疗元素与特殊keydown事件

时间:2015-10-07 05:14:25

标签: html accessibility wai-aria

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

我读了一些关于ARIA的可拖动元素的方法,并且觉得在我的情况下,因为这是一个简单的垂直列表,所以增加这个句柄(这是可能的)会更有意义。与keydown行为相比,而不是试图用咏叹调术语“描述”复杂的可拖动性。这将是很多复杂的没有收获,并且会令人困惑,因为在这种情况下,可拖动性是为了方便排序,而不是“我将x放在y里面”的概念。上下键非常适合作为替代方案,并且该解决方案具有可能成为所有用户的有用快捷方式的奖励质量。

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

我应该使用不同的按键吗?请注意,如果是这样,我将失去对非ARIA用户可轻易发现的此功能的优势。是否有一个角色可以让这种方式使用箭头键“没问题”?并且aria-label是一个适当的地方,用于解释可用的操作是什么,或者是为输入保留的?

2 个答案:

答案 0 :(得分:3)

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

所以你可能想要做的是添加一个“menuitem”按钮,该按钮切换到“抓住”元素的状态,然后允许使用箭头键向上或向下移动元素。

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

答案 1 :(得分:3)

我们使用ctrl + shift + up / ctrl + shift + down来移动列表中的项目。我们已在多个应用中使用此行为,但它似乎运行良好。因此,您可以选项卡到列表,使用向上/向下移动列表中的焦点/选择,或使用shift +向上/向下进行扩展选择,或使用ctrl +向上/向下进行非连续选择(全部标准列表键盘行为),然后然后使用ctrl + shift + up / down来向上或向下移动整个选择。

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