含ul-li结构的选项卡中a标签需配置什么ARIA角色？

你当前的选项卡结构存在ARIA角色冲突问题，导致Lighthouse报错。先看你现有的代码：

<ul class="nav ms-5" role="tablist">
  <li role="tab">
    <a role="tab" class="tjs-tab__link text-dark active" href="#couponcode" data-bs-toggle="tab">Coupon Code</a>
  </li>
  <li role="tab">
    <a role="tab" class="tjs-tab__link text-dark" href="#giftcards" data-bs-toggle="tab">Gift Cards</a>
  </li>
</ul>

问题核心是重复设置了role="tab"：li和a标签同时拥有tab角色，这不符合ARIA语义规范——tablist下的tab角色应该直接赋予可交互控件，而非容器元素。

正确的配置方案 #

1. 移除li标签的role="tab"，给li添加role="presentation"（或role="none"），消除列表项的默认语义，避免干扰tablist的结构逻辑。
2. 只给a标签保留role="tab"，同时补充必要的ARIA属性完善交互语义：
   • aria-selected：标记当前激活状态，激活的tab设为true，未激活设为false
   • aria-controls：关联对应tab面板的id，让辅助技术明确tab与内容区域的关联关系

修正后的代码示例：

<ul class="nav ms-5" role="tablist">
  <li role="presentation">
    <a id="couponcode-tab" role="tab" class="tjs-tab__link text-dark active" href="#couponcode" data-bs-toggle="tab" aria-selected="true" aria-controls="couponcode">Coupon Code</a>
  </li>
  <li role="presentation">
    <a id="giftcards-tab" role="tab" class="tjs-tab__link text-dark" href="#giftcards" data-bs-toggle="tab" aria-selected="false" aria-controls="giftcards">Gift Cards</a>
  </li>
</ul>

配套的tab面板配置 #

对应的内容面板（即#couponcode、#giftcards元素）也需要完善ARIA属性：

• 添加role="tabpanel"
• 用aria-labelledby关联对应tab的id，示例：

<div id="couponcode" role="tabpanel" aria-labelledby="couponcode-tab">
  <!-- 优惠券代码内容 -->
</div>

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