Question

我在this page上使用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相关的属性，所以让我们来看看这三个属性。

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

aria- *属性没有有效值

1 个答案: