使用Lighthouse检测页面无障碍时遇aria-*属性值无效错误求助

我来帮你搞定这个Lighthouse的无障碍报错问题～ 这个错误的核心原因是你的tab按钮上的ARIA属性值和页面实际元素不匹配，导致屏幕阅读器这类辅助技术没法正确识别组件之间的关联关系。

先看你贴的这段代码：

<button role="tab" aria-selected="true" aria-controls="v-pills-home" id="v-pills-home-tab" class="nav-link active" data-toggle="pill" href="#v-pills-login">
  <img src="./images/come-funziona/iconLogin.pn...
</button>

这里有两个明显的问题：

• aria-controls和href指向不一致：aria-controls="v-pills-home"告诉辅助技术这个tab控制的是ID为v-pills-home的面板，但你的href="#v-pills-login"却指向了另一个ID为v-pills-login的元素，这种矛盾会让辅助技术无法正确关联tab和对应的面板。
• 按钮ID与目标面板ID逻辑不匹配：按钮ID是v-pills-home-tab，但实际关联的面板是v-pills-login，命名混乱不仅不符合无障碍规范，也会增加后续维护的难度。

具体修复步骤： #

1. 统一关联目标：把aria-controls的值改成和href一致的v-pills-login，确保tab按钮明确指向它实际控制的面板元素。
2. 调整按钮ID：将按钮ID修改为v-pills-login-tab，让它和面板ID形成对应关系，符合WAI-ARIA的tab组件命名规范。
3. 完善面板的关联属性：确保页面上存在ID为v-pills-login的tab面板，并且给这个面板加上aria-labelledby属性，值为按钮的新IDv-pills-login-tab，形成tab和面板的双向关联，让辅助技术能更清晰地识别组件关系。

修复后的代码示例：

<button role="tab" aria-selected="true" aria-controls="v-pills-login" id="v-pills-login-tab" class="nav-link active" data-toggle="pill" href="#v-pills-login">
  <img src="./images/come-funziona/iconLogin.png" alt="登录标签">
</button>

<!-- 对应的tab面板 -->
<div id="v-pills-login" role="tabpanel" aria-labelledby="v-pills-login-tab">
  <!-- 这里放面板的内容 -->
</div>

额外检查建议： #

• 确保同一组tab中，只有当前激活的tab的aria-selected值为"true"，其他未激活的tab要设置为"false"。
• 给按钮内的图片加上有意义的alt文本，比如示例中的alt="登录标签"，帮助屏幕阅读器用户理解这个tab的用途。

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