为何Windows Narrator未提示菜单存在子菜单？已加ARIA属性仍无效

结论 #

Windows Narrator应该在带自菜单的菜单项获得焦点时，提示存在可展开的子菜单。你的代码存在ARIA属性使用错误，导致辅助技术无法正确识别。

错误分析与修复步骤 #

• 属性位置错误：你把aria-haspopup="true"和aria-expanded="true"加到了父级<ul>上，但这两个属性属于触发子菜单的菜单项（即Options对应的<a>标签），因为是这个元素控制子菜单的展开状态。
• 缺少关联关系：触发元素需要通过aria-controls属性关联到子菜单的ID，明确告知辅助技术哪个元素被该菜单项控制。
• 图标alt文本模糊：下拉图标alt="toggle"描述不够清晰，应改为"展开子菜单"，让屏幕阅读器用户明确图标的功能。

修复后的完整代码 #

<!doctype html>
<html>
<body>
  <div>
    <nav aria-label="Menu">
      <ul role="menu">
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Dashboard</div>
          </a>
        </li>
        <li role="none">
          <!-- 移至触发菜单项并添加aria-controls关联子菜单 -->
          <a tabindex="0" role="menuitem" aria-haspopup="true" aria-expanded="true" aria-controls="options-submenu">
            <div>Options</div>
            <div>
              <img src="_content/MyCompany.Blazor.Components/images/drop-down-icon.svg" alt="展开子菜单"/>
            </div>
          </a>
          <!-- 给子菜单添加ID用于关联 -->
          <ul id="options-submenu" role="menu" aria-hidden="false">
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 1</div>
              </a>
            </li>
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 2</div>
              </a>
            </li>
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 3</div>
              </a>
            </li>
          </ul>
        </li>
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Support</div>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>

额外提示 #

• 要保证键盘交互符合WAI-ARIA菜单规范：用方向键导航菜单项，按Enter/Space展开/收起子菜单，Esc键关闭子菜单并返回父项。
• aria-expanded的值要根据子菜单的实际显示状态动态切换（展开时设为true，收起时设为false）。

内容的提问来源于stack exchange，提问作者Peter Morris