aria-* 属性没有有效值

Question

我正在此页面上使用 Lighthouse 运行测试。

当谈到辅助功能时，它不断给我这个错误：

[aria-*] 属性没有有效值。
辅助技术（如屏幕阅读器）无法解释具有无效值的 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.png" width="60" alt="login"> Login</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-profile" id="v-pills-profile-tab" class="nav-link" data-toggle="pill" href="#v-pills-localizzazione"><img src="./images/come-funziona/iconLocalizzazione.png" width="60" alt="localizzazione mezzi"> Localizzazione</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-messages" id="v-pills-messages-tab" class="nav-link" data-toggle="pill" href="#v-pills-badge"><img src="./images/come-funziona/iconBadgeRFID.png" width="60" alt="badge rfid"> Badge</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-settings" id="v-pills-settings-tab" class="nav-link" data-toggle="pill" href="#v-pills-manutenzione"><img src="./images/come-funziona/iconManutenzione.png" width="60" alt="manutenzione mezzi"> Manutenzione</button>

<button role="tab" aria-selected="false" aria-controls="v-pills-reports" id="v-pills-report-tab" class="nav-link" data-toggle="pill" href="#v-pills-report"><img src="./images/come-funziona/iconReport.png" width="60" alt="report attività mezzi"> Report</button>

我该如何解决？

Answer 1

您只有三个与 ARIA 相关的属性，所以让我们来看看所有三个。

1. tab是有效的，role并且<button>允许该元素具有该角色。（请参阅<button>规范 -tab是列表中的最后一个。）
2. aria-selected仅对某些类型的对象有效，但它tab是其中之一，所以你没问题。有效值为trueand false，所以也可以。（见aria-selected规格。）
3. aria-controls应该包含一个 id 或 id 列表。您的示例看起来包含一个 id。引用的对象是否存在？当我查看您的测试页面时，第一个按钮/选项卡说它控制v-pills-home但我没有在页面上看到该对象。第一个按钮/选项卡的选项卡面板的 id 为v-pills-login。同样的问题也发生在其他按钮上。它们都指向一个不存在的对象。