HTML: the aria-selected attribute

The aria-selected attribute tells assistive technology which item is selected in a widget such as a tab list or listbox.

Tabs example

<div role="tablist" aria-label="Account settings">
  <button role="tab" aria-selected="true" aria-controls="profile-panel">
    Profile
  </button>
  <button role="tab" aria-selected="false" aria-controls="security-panel">
    Security
  </button>
</div>

Only the active tab should normally have aria-selected="true". The script must update the selected state, focus behavior, and visible panel together.

Use the right state

• aria-selected identifies the current item in a selection pattern such as tabs or listbox options.
• aria-pressed describes the on/off state of a toggle button.
• aria-checked describes a checkbox, radio-like item, or switch pattern.

Common mistakes

• Adding aria-selected to an ordinary link or button without implementing a selection pattern.
• Leaving multiple tabs selected while showing only one panel.
• Updating the visual highlight but not the accessible state.
• Forgetting to support the expected arrow-key or focus behavior for a custom tab or listbox.