时间戳

首页 > 解决方案 > 无法为列表元素找到正确的辅助功能角色

html - 无法为列表元素找到正确的辅助功能角色

问题描述

 <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" 但是在输入键时，任何浏览器都没有任何反应。是否有任何特定的角色可以跨浏览器用于需要移动的列表项（基本上需要在按键事件上触发，我决定移动的位置）。我已经尝试过 role="application" 这适用于浏览器，但出现了其他一些可访问性问题。团队中的每个人都建议不要将应用程序用作列表元素的角色（这对我来说似乎也不正确，但这是唯一在 IE 和 safari safari 上用于按键事件的角色）

项目清单

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

标签： htmluser-interfaceaccessibilityrolesaccessibilityservice

解决方案

请注意，指定 arole不会给您任何行为。请参阅“添加角色不能做什么”

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

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

另请注意，先前答案中的以下内容并不十分准确：

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

这不是真的。根据元素的角色，屏幕阅读器（使用默认设置）可以在虚拟/资源管理器/浏览模式和应用程序/表单模式之间切换，从而将按键传递给浏览器（进而传递给您的元素）。有关执行此操作的角色列表，请参阅“ 5.1 基本键盘导航约定”。尽管该部分讨论了键盘导航以及哪些角色需要您实现箭头键导航，但它本质上告诉您哪些角色将允许按键传递到您的元素。

因此，如果您想要按键，请使用该部分中列出的角色之一。作为最后的手段，使用role="application".

推荐阅读