我的应用程序中经常有一些用例，在这些用例中，我需要一个需要交互的项目列表，例如单击某个项目应执行某些操作。
我通常将列表项（li）的内容包装在button中，这有点有意义，因为列表项是交互式的。这也有助于使列表项键盘可以通过 TAB 进行访问。但是，据我了解，这也带来了一个问题，键盘用户将不得不在整个列表中通过 TAB 才能摆脱困境。而是使用roving tabindex之类的方法来管理列表中的焦点，并允许箭头键在列表中进行导航并使 TAB 聚焦于列表和从列表中移出会更好吗？
我正在寻求验证，这是否是实现这种功能的好方法，以及指向任何现实世界实现的指针
答案 0 :(得分：3)
我的现实经验是，您不应在按钮内放置任何与按钮语义角色无关的东西。严格来说，您不应将列表项放在列表以外的任何内容中。
将按钮放在列表项内会更好，但请继续阅读。
“执行某些动作”的项目列表（在语义上）是菜单（或也许是类似于菜单，但没有菜单所期望的打开/关闭功能的工具栏）。
因此，如果将role="menu"放在包含按钮的元素上，并将role="menuitem"放在按钮上，则应该会获得良好的结果。
不要在菜单内放置用于打开菜单的按钮（“菜单按钮”）。 （我在此上浪费了很多时间。）
没有“菜单按钮”角色。只需使用html <button>或其他role="button"。然后使用aria-controls="yourMenuID"将菜单按钮与菜单相关联。您还应该使用其他一些aria属性，例如aria-expanded="true"/"false"（在菜单和菜单按钮上-并与javaScript保持同步）和aria-haspopup="true"在菜单按钮上。
如果您稍加注意，可以使用CSS属性选择器根据aria属性设置菜单样式。例如：
*[role='menu'][aria-expanded='false'] {
display:none;
}
*[role='menu'][aria-expanded='true'] {
display:block;
}
是的，您应该管理焦点。可以使用流动的tabindex技术或aria-activedescendant。我更喜欢后者，因为它使事情更明确，但巡回使用tabindex似乎更为普遍。两种技术在一系列浏览器/ AT组合中均得到良好支持。
对于可访问菜单的行为（带有示例代码的链接）here，有明确的建议。菜单按钮和工具栏的行为在同一文档中进一步介绍。这是极好的资源。
祝你好运。