CODEWITHSUNDEEP
htmlwai-aria
astolfharry
astolfharry

Reputation: 23

aria-* attributes do not have valid values

I'm running tests with Lighthouse on this page.

When it comes to Accessibility, it keeps give me this error:

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

The code that causes that error is:

<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>

How can I solve it?

Upvotes: 2

Views: 11902

Answers (1)

slugolicious
slugolicious

Reputation: 17593

You only have three ARIA related attributes so let's go through all three.

  1. tab is a valid role and the <button> element is allowed to have that role. (See the <button> spec - tab is the last one in the list.)
  2. aria-selected is only valid on certain types of objects, but tab is one of them so you're ok there. And the valid values are true and false, so that's ok too. (See the aria-selected spec.)
  3. aria-controls should contain an id, or list of ids. Your example looks like it contains an id. Does the referred to object exist? When I viewed your test page, the first button/tab says it controls v-pills-home but I didn't see that object on the page. The tabpanel for the first button/tab has an id of v-pills-login. The same problem happens on the other buttons too. They all point to an object that doesn't exist.

Upvotes: 6

Related Questions