атрибуты 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> spec - tab является последним в списке.)
2. aria-selected допустимо только для определенных типов объектов, но tab является однимиз них, так что ты в порядке там.И допустимые значения true и false, так что это тоже нормально.(См. aria-selected spec.)
3. aria-controls должен содержать идентификатор или список идентификаторов.Ваш пример выглядит так, как будто содержит идентификатор.Существует ли упомянутый объект?Когда я просматривал вашу тестовую страницу, первая кнопка / вкладка говорит, что она управляет v-pills-home, но я не видел этот объект на странице.Панель вкладок для первой кнопки / вкладки имеет идентификатор v-pills-login.Та же проблема возникает и на других кнопках.Все они указывают на объект, который не существует.