带有复选框的菜单的正确 HTML 和 ARIA 结构与 JAWS 一起使用?

Question

我有一个由复选框组成的菜单，用户可以在其中选择要在屏幕上显示的一个或多个内容。我的HTML(Angular -*ngFor指令生成多个<li>块(看起来像这样：

<ul role="menu" [id]="'topic-menu' + i" [attr.aria-labelledby]="'topic-menu' + i + 'label'">
<li
[id]="'topic-option' + i + j"
*ngFor="let measure of group.measures; let j = index"
class="topic-option"
role="none"
>
<input
class="checkbox-input"
type="checkbox"
role="menuitemcheckbox"
[attr.aria-labelledby]="'topic-select-input-label' + i + j"
[name]="'group' + i + '-topic-menu'"
[checked]="measure.selected"
[id]="'topic-select-input' + i + j"
(click)="onSelectCheckboxMultiple(measure, group.measures)"
>
<label
[for]="'topic-select-input' + i + j"
[id]="'topic-select-input-label' + i + j"
class="topic-select-label"
>
{{ measure.measureName }}
</label>
</li>
</ul>

当我听到这个时，JAWS会宣布菜单，列出项目的数量，并说"要移动项目，请按向上或向下箭头"。但是，用户不能使用向上或向下箭头，而是必须按 Tab 键浏览复选框。据我所知，这是复选框的预期行为 - 请参阅此处：https://w3c.github.io/aria-practices/examples/checkbox/checkbox-1/checkbox-1.html(。

我对如何修改我的 HTML 以使 JAWS 和行为在同一页面上感到困惑。下面是一个使用 role="menuitemcheckbox" 的菜单示例，实际上，您可以按照 JAWS 的说明使用向上/向下键导航这些选项，但您可以看到它们实际上并没有使用input元素。https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html

似乎我需要在使用role="menu"和使用<input type="checkbox">之间进行选择，但我不知道哪种策略是正确的。请注意，我实际上并没有使用<form>，因此，没有<input>选项是可能的。

任何人都可以在这里提供指导吗？

Answer 1

标记持久显示选定或选中菜单项的可访问菜单的正确方法是通过 menuitemradio 角色，如 ARIA 创作实践文档中的此示例所示。根据准则，menuitem 角色不允许 aria-checked 属性，但 menuitemradio 允许。如果可以选中多个项，则应使用菜单项复选框角色。