无障碍侧边栏菜单嵌套交互控件无法被屏幕阅读器识别该如何修复？

报错原因 #

你当前代码触发该报错的核心原因是交互控件嵌套：

• 你给<li>元素设置了role="tab"，该ARIA角色本身代表可交互的切换控件，具备原生可交互属性
• <li>内部嵌套了原生可交互的<a>标签，两类可交互控件嵌套后，屏幕阅读器只会识别外层的tab角色，不会播报内层的链接信息，不符合WCAG规范

另外你当前的示例代码还存在两处基础语法错误：

• 同一tablist下多个tab都设置了aria-selected="true"，规范要求同一时间只能有1个tab处于选中状态
• 末尾的<ul>、<nav>标签未加闭合斜杠，属于无效标签

修复方案 #

分两种业务场景处理：

场景1：侧边栏是纯导航列表，不需要切换内容面板的tab功能

直接删除tab相关的ARIA角色即可，这也是侧边栏导航最常用的实现方式：

<nav aria-label="菜单">
  <ul>
    <li>
      <a href="对应跳转地址">Some link</a>
    </li>
    <li>
      <a href="对应跳转地址">Some link</a>
    </li>
    <li>
      <a href="对应跳转地址">Some link</a>
    </li>
  </ul>
</nav>

场景2：确实需要tab切换能力，点击选项切换对应内容面板

不要在tab内部嵌套a标签，直接将tab本身作为可交互元素，跳转逻辑（如果有）通过JS实现：

<nav>
  <ul role="tablist" aria-label="菜单">
    <li 
      role="tab" 
      aria-selected="true"
      aria-controls="panel1"
      id="tab1"
      tabindex="0"
    >
      Some link
    </li>
    <li 
      role="tab" 
      aria-selected="false"
      aria-controls="panel2"
      id="tab2"
      tabindex="-1"
    >
      Some link
    </li>
    <li 
      role="tab" 
      aria-selected="false"
      aria-controls="panel3"
      id="tab3"
      tabindex="-1"
    >
      Some link
    </li>
  </ul>
</nav>
<!-- 对应tab关联的内容面板示例 -->
<div role="tabpanel" id="panel1" aria-labelledby="tab1">面板1内容</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>面板2内容</div>
<div role="tabpanel" id="panel3" aria-labelledby="tab3" hidden>面板3内容</div>

如果需要点击tab跳转页面，直接在tab的点击事件中调用window.location.href实现即可。

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