aria-* attributes do not have valid values

Question

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?

Check what are the valid values for aria-selected and aria-controls for Lighthouse. They should have documentation for it. — pawamoy
– pawamoy, Commented Apr 24, 2018 at 13:50

slugolicious · Accepted Answer · 2018-04-24 16:01:55Z

6

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.

answered Apr 24, 2018 at 16:01

slugolicious

17.9k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

astolfharry Over a year ago

Thank you, you were right. I changed them and now they works.

gaurav5430 Over a year ago

why do they need to exist? Can the controlled elements not be inserted dynamically into the DOM when the controlling element is interacted with?

slugolicious Over a year ago

> why do they need to exist? - because that's what the spec says. if you try validator.w3.org/nu (the official w3c validator), change "check by" to "text input" and try to validate <button aria-controls="fooID">bar</button>, it'll fail with Error: The aria-controls attribute must point to an element in the same document. if you dynamically create the element that is controlled, then dynamically add aria-controls once the element exists.

Collectives™ on Stack Overflow

aria-* attributes do not have valid values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related