屏幕阅读器应播报菜单项链接为「首页、链接、菜单项」还是「首页、菜单项」

问题核心原因分析 #

你遇到的播报歧义本质上是ARIA角色使用不当导致的语义叠加问题，先明确WAI-ARIA规范对菜单相关角色的定义：
role="menu" 及配套的 menuitem 角色仅适用于应用类操作菜单（如软件右键菜单、编辑器顶部的文件/编辑菜单），不适用于普通网站的站点导航菜单，这是很多开发者容易踩的常见误区。

两种场景的规范实现与对应播报规则 #

场景1：普通站点导航菜单（90%以上的业务场景属于这个）

不需要添加任何menu相关的ARIA角色，直接用原生语义标签实现即可：

<nav aria-label="主导航">
  <ul>
    <li>
      <a href="/en-us/">Home</a>
    </li>
    <li>
      <a href="/en-us/search">Search</a>
    </li>
  </ul>
</nav>

规范播报方式：「Home、链接」，不需要播报「菜单项」，用户可以明确感知这是导航跳转控件，符合WCAG无障碍要求。

场景2：应用类操作菜单

如果确实是做应用内的操作菜单，需要把role="menuitem"直接加在可交互元素（也就是<a>标签）上，而不是父级<li>，避免语义叠加：

<ul role="menu" aria-label="操作菜单">
  <li>
    <a role="menuitem" href="/en-us/">Home</a>
  </li>
  <li>
    <a role="menuitem" href="/en-us/search">Search</a>
  </li>
</ul>

规范播报方式：「Home、菜单项」，此时menuitem角色会覆盖<a>的原生链接角色，不会额外播报链接，避免给用户造成角色认知混淆。

你当前代码的问题 #

你把role="menuitem"加在了<li>标签上，<li>本身不是可交互元素，内部的<a>保留了原生链接语义，两个控件语义叠加就导致了屏幕阅读器同时播报「链接、菜单项」，属于不符合规范的非预期表现。

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