具有特殊按键事件的元素的 ARIA 处理
ARIA treatment for element with special keydown events
我有一个包含条目列表的组件，用户可以重新排列、删除或添加这些条目。 add/remove 功能和列表内导航很容易用 ARIA 属性标记，但可移动性功能让我不确定。在左侧，每个项目都有一个小手柄按钮，用户可以使用该按钮开始将元素拖动到新位置。
我阅读了一些有关 ARIA 的可拖动元素的方法，并且觉得在我的情况下，因为这严格来说是一个简单的垂直列表，所以增加这个句柄（这是tabbable) 与 keydown 行为比尝试 "describe" aria 术语中的复杂可拖动性。这会带来很多复杂性而没有任何好处，而且会造成混淆，因为在这种情况下，可拖动性是为了方便排序，而不是为了 "I am putting x over inside y" 概念。向上和向下键作为替代方案非常有意义，而且该解决方案具有可能成为所有用户有用的快捷方式的额外质量。
但是我不确定是否可以像这样使用向上和向下键而不以某种方式标记有问题的元素，因为在其他情况下向上和向下是导航性的并且不会导致数据模型发生变化。我可以用不可见的说明或其他东西来标记它，但我不知道这是否足够。
我应该使用不同的密钥吗？请注意，如果是这样，我将失去此功能对于非 ARIA 用户来说很容易发现的优势。是否有角色可以让 "okay" 以这种方式使用箭头键？ aria-label 是一个合适的地方来解释可用的操作是什么，还是为输入保留的？
您在这里将面临的最大障碍是并非所有屏幕 reader 都会将箭头键事件发送到 JavaScript 事件处理程序。保证这一点的唯一方法是在元素上使用 "menuitem" 的 ARIA 角色（或正确发送事件的其他角色之一）。
所以您可能想要做的是添加一个 "menuitem" 按钮，该按钮切换到元素为 "grabbed" 的状态，然后允许使用箭头键向上移动元素或向下。
您可以添加工具提示（或切换状态时显示的帮助文本）以帮助仅使用键盘和屏幕的 reader 用户了解应该使用哪些键来移动元素。您可以使用 aria-describedby 指向帮助文本元素的 ID，将此帮助文本与小部件相关联。
我们使用 ctrl+shift+up / ctrl+shift+down 在列表中移动项目。我们已经在我们的几个应用程序中使用了这种行为，而且它似乎运行良好。因此，您可以跳转到列表，使用 up/down 在列表中移动 focus/selection，或使用 shift+up/down 进行扩展选择，或使用 ctrl+up/down 进行非连续选择（所有标准列表键盘行为），然后 然后 使用 ctrl+shift+up/down 向上或向下移动整个选择。
我们也支持 drag/drop 重新排序，但 ctrl+shift+up/down 是键盘或屏幕 reader 用户重新排序的方式。
我有一个包含条目列表的组件，用户可以重新排列、删除或添加这些条目。 add/remove 功能和列表内导航很容易用 ARIA 属性标记，但可移动性功能让我不确定。在左侧，每个项目都有一个小手柄按钮，用户可以使用该按钮开始将元素拖动到新位置。
我阅读了一些有关 ARIA 的可拖动元素的方法，并且觉得在我的情况下，因为这严格来说是一个简单的垂直列表，所以增加这个句柄（这是tabbable) 与 keydown 行为比尝试 "describe" aria 术语中的复杂可拖动性。这会带来很多复杂性而没有任何好处，而且会造成混淆，因为在这种情况下，可拖动性是为了方便排序，而不是为了 "I am putting x over inside y" 概念。向上和向下键作为替代方案非常有意义，而且该解决方案具有可能成为所有用户有用的快捷方式的额外质量。
但是我不确定是否可以像这样使用向上和向下键而不以某种方式标记有问题的元素，因为在其他情况下向上和向下是导航性的并且不会导致数据模型发生变化。我可以用不可见的说明或其他东西来标记它，但我不知道这是否足够。
我应该使用不同的密钥吗？请注意，如果是这样，我将失去此功能对于非 ARIA 用户来说很容易发现的优势。是否有角色可以让 "okay" 以这种方式使用箭头键？ aria-label 是一个合适的地方来解释可用的操作是什么，还是为输入保留的？
您在这里将面临的最大障碍是并非所有屏幕 reader 都会将箭头键事件发送到 JavaScript 事件处理程序。保证这一点的唯一方法是在元素上使用 "menuitem" 的 ARIA 角色（或正确发送事件的其他角色之一）。
所以您可能想要做的是添加一个 "menuitem" 按钮，该按钮切换到元素为 "grabbed" 的状态，然后允许使用箭头键向上移动元素或向下。
您可以添加工具提示（或切换状态时显示的帮助文本）以帮助仅使用键盘和屏幕的 reader 用户了解应该使用哪些键来移动元素。您可以使用 aria-describedby 指向帮助文本元素的 ID，将此帮助文本与小部件相关联。
我们使用 ctrl+shift+up / ctrl+shift+down 在列表中移动项目。我们已经在我们的几个应用程序中使用了这种行为，而且它似乎运行良好。因此，您可以跳转到列表，使用 up/down 在列表中移动 focus/selection，或使用 shift+up/down 进行扩展选择，或使用 ctrl+up/down 进行非连续选择（所有标准列表键盘行为），然后 然后 使用 ctrl+shift+up/down 向上或向下移动整个选择。
我们也支持 drag/drop 重新排序，但 ctrl+shift+up/down 是键盘或屏幕 reader 用户重新排序的方式。