Question

 <ul class="draggable-list" role="listbox">
    -- list runs in for loop around 5 li elements (all draggable elements)
    <li tabindex="0" role="option">
    </li>
 </ul>

在鼠标单击拖放时，所有拖放li元素都可以正常工作。但是，当我尝试使用键盘输入进行辅助操作时。.有一个按键功能，该功能在chrome中可以正常使用，但在IE和Safari中无法使用。我尝试过role =“ listitem”，但是在按Enter键时，任何浏览器都没有任何反应。我是否可以在所有浏览器中使用任何特定角色来列出需要移动的列表项（基本上需要触发按键事件来触发，而我要确定要移动的位置）。我已经尝试过使用role =“ application”在整个浏览器中工作，但是出现了其他一些可访问性问题。团队中的每个人都建议不要将应用程序用作列表元素的角色（这对我来说似乎也不正确，但是这是唯一在IE和safari Safari浏览器上用于按键事件的唯一角色）

list item

注意：列表项没有任何键盘交互

Answer 1

请注意，指定role不会不会给您任何行为。参见“ What adding a role does not do”

添加ARIA角色不会使使用辅助技术的人的元素外观或行为有所不同。它不会更改宿主元素的行为，状态和属性，而只会更改本地角色的语义。

换句话说，更改角色只会更改屏幕阅读器宣布元素的方式（“ 语义”）。不会导致元素的行为有所不同。

还请注意，上一个答案中的以下内容不太准确：

“许多屏幕阅读器（取决于用户设置）不会将按键传递给浏览器”

这不是事实。根据元素的角色，屏幕阅读器（具有默认设置）可以在虚拟/浏览器/浏览模式与应用程序/表单模式之间切换，从而将按键传递给浏览器（进而传递给元素）。有关执行此操作的角色的列表，请参见“ 5.1 Fundamental Keyboard Navigation Conventions”。即使该部分讨论了键盘导航以及要求您实施箭头键导航的角色，它实际上还是告诉您哪些角色将允许按键传递到您的元素。

因此，如果要按键，请使用该部分列出的角色之一。不得已时，请使用role="application"。

Answer 2

根据我的经验，您永远无法确定setToRotation(Math.atan2(a, b))会时常工作。

角色：：role="application"应该在选择一个或多个选项时使用。您所描述的内容在我看来更像是用户可以重新排序的常规列表，而不是role="listitem"。如果我是正确的话，您可以考虑将<select>与role="list"一起用于儿童-碰巧的是，当使用role="listitem"时这是免费的，因此您可以完全跳过{ {1}}个属性。您还可以继续使用<ul>，因为某些屏幕阅读器会让用户更轻松地逐项浏览。取决于您的需求和偏好。

但是要解决真正的问题：许多屏幕阅读器（取决于用户设置）不会将按键传递给浏览器，因此您的role不会启动。至少不可靠。这是因为屏幕阅读器严重依赖于键盘快捷键，并且这些快捷键可能因用户而异。您不想覆盖这些内容。但是，当可以选择选项卡时，当用户按下Enter键时，屏幕阅读器会很高兴地触发role="listitem"事件。

在抓取项目时，您可以考虑添加onkeypress和onclick。两者都被标记为“已弃用”，因为它们正在传达一种新的表达方式，但是我认为它们仍受到一些主要屏幕阅读器的支持，而且我还没有找到合适的替代方法。

aria-grabbed="true"：https://www.w3.org/TR/wai-aria-1.1/#aria-grabbed
aria-dropeffect="move"：https://www.w3.org/TR/wai-aria-1.1/#aria-dropeffect

找不到列表元素的正确辅助功能角色

2 个答案: