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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-aria-selected-on-element-button
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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