Bad value X for attribute “aria-selected” on element “button”.

The aria-selected attribute only accepts the values true, false and undefined, written in lowercase.

aria-selected tells assistive technologies which item in a set is the selected one, such as the active tab in a tab list. It is an ARIA state, not an HTML boolean attribute, so the old habit of repeating the attribute name as its value (checked="checked", selected="selected") doesn't work here. Writing aria-selected="aria-selected" is the most common way to trigger this error. The value undefined is allowed and means the same as leaving the attribute out.

The validator rejects every other value too: selected, yes, 1, TRUE, an empty value, or true with spaces around it. A screen reader can't tell from such a value whether the tab is selected, so users may not hear which one is active. Scripts that switch tabs cause this when they write anything other than the strings "true" and "false" into the attribute.

Set aria-selected="true" on the selected item and aria-selected="false" on the others. On a button, the attribute only has a meaning when the button has a role that supports it, usually role="tab" inside an element with role="tablist". On a button without a role, the validator also reports that the button is missing a role attribute. For a button that turns something on and off, use aria-pressed instead.

Invalid example

<div role="tablist" aria-label="Billing period">
  <button role="tab" id="tab-monthly" aria-controls="panel-monthly" aria-selected="aria-selected">Monthly</button>
  <button role="tab" id="tab-yearly" aria-controls="panel-yearly">Yearly</button>
</div>
<div role="tabpanel" id="panel-monthly" aria-labelledby="tab-monthly">Monthly prices</div>
<div role="tabpanel" id="panel-yearly" aria-labelledby="tab-yearly" hidden>Yearly prices</div>

Valid example

<div role="tablist" aria-label="Billing period">
  <button role="tab" id="tab-monthly" aria-controls="panel-monthly" aria-selected="true">Monthly</button>
  <button role="tab" id="tab-yearly" aria-controls="panel-yearly" aria-selected="false">Yearly</button>
</div>
<div role="tabpanel" id="panel-monthly" aria-labelledby="tab-monthly">Monthly prices</div>
<div role="tabpanel" id="panel-yearly" aria-labelledby="tab-yearly" hidden>Yearly prices</div>

Learn more:

MDN Reference

MDN - aria-selected

→

MDN Reference

MDN - ARIA tab role

→