keyboard - 面板中的键盘可访问性 (WCAG)，其中包含已分配按钮角色的元素列表

嗨 :) 我想问你如何处理组成列表的元素，但他们分配了按钮角色并放在侧面板中（所以它不是菜单或下拉菜单）。我的主要问题是如何决定箭头应该在哪里工作以及标签在哪里。此外，我有不同类型的列表项，其中包括：

请看图片并帮助我:)

粉红色 - “箭头”

蓝色 - “TAB”键

标签： keyboardaccessibilitywcag

您几乎不应该决定哪个组件将使用 TAB 键或箭头键。大量组件的键盘可访问性已在WAI-ARIA 创作实践中定义。

添加不同的行为可能会给有视力和无视力的用户带来问题，因为他们已经知道根据组件使用哪个键，或者他们会因为标准角色而直观地知道，或者他们会在使用键盘时知道更多浏览。

列表框将起作用。箭头键导航和 Enter 键执行操作。

我建议将复选框和单选按钮保留为默认键盘行为。由于您的案例更像是一个列表，您可以将复选框和单选按钮列表转换为单选和多选列表框，并使用复选框和单选按钮作为字体图标或图形来显示选择，类似于在这个列表框示例。当您转换为列表框时，您将满足箭头键要求。

所需的键盘行为存在一些问题：用户如何知道是否需要按下左箭头或右箭头，考虑无视力的用户。

在您的需要中，您希望 Fruit Name 和 i 图标按钮都打开面板，建议不要使用 Arrow-Right to i 图标按钮，只使用 Enter 键打开面板。可能你根本不需要 i 图标按钮。

建议使用 DEL 键删除项目

Accordion 和 Nested List 在这里都不起作用，因为您需要执行两个操作：进行选择，以及展开和折叠。我还没有尝试过TreeView，但你可以检查一下。