Reputation: 23
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: 11881
Reputation: 17563
You only have three ARIA related attributes so let's go through all three.
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.)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.)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