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

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