aria-* 属性没有有效值

Question

我运行在 this page 上使用 Lighthouse 进行测试。

当涉及到辅助功能时，它一直给我这个错误：

[aria-*] attributes do not have valid values.
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values.

导致该错误的代码是：

<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 相关的属性，所以让我们检查所有三个。

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

aria-* 属性没有有效值

aria-* attributes do not have valid values

html

wai-aria