在JAWS中使用复选框的菜单的HTML和ARIA结构是什么？

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>，所以可以使用no <input>选项。

有人能在这里提供指导吗？

Answer 1

标记持久显示选定或选中菜单项的可访问菜单的正确方法是通过menuitemradio角色，如来自ARIA authoring practices documentation的this example中所示。根据指导原则，menuitem角色不允许使用aria-checked属性，但menuitemradio允许。在可以选中多个项目的情况下，应使用menuitemcheckbox角色。