Skip to main content
HTML Validation

Element “button” is missing one or more of the following attributes: “aria-expanded”, “type”.

About This HTML Issue

A <button> with role="combobox" needs an aria-expanded attribute, and the validator reports this message when the button doesn't have one.

Custom select menus often use a <button> as a combobox. Clicking it opens a popup, usually an element with role="listbox", where the user picks a value. ARIA requires aria-expanded on every combobox so screen readers can announce whether that popup is open. Start with false in the markup, then have your script set it to true when the list opens and back to false when it closes.

The message also lists type, but type on its own won't clear it: add only type="button" and the validator reports that aria-expanded is required instead. Keep type="button" anyway, since a <button> inside a form submits that form by default.

A button that already has aria-expanded can still trigger this message if it also carries an aria-activedescendant written with no value, as in <button aria-activedescendant role="combobox" aria-expanded="false">. Depending on the order of the attributes, the validator reports this message instead of flagging the empty value. The value of aria-activedescendant has to be the id of the option that currently has focus, so leave the attribute out of the markup until an option is active.

Invalid example

<button role="combobox" aria-controls="sort-options" aria-label="Sort by">
  Newest first
</button>
<ul id="sort-options" role="listbox" hidden>
  <li id="sort-newest" role="option" aria-selected="true">Newest first</li>
  <li id="sort-oldest" role="option" aria-selected="false">Oldest first</li>
</ul>

Valid example

<button type="button" role="combobox" aria-expanded="false" aria-controls="sort-options" aria-label="Sort by">
  Newest first
</button>
<ul id="sort-options" role="listbox" hidden>
  <li id="sort-newest" role="option" aria-selected="true">Newest first</li>
  <li id="sort-oldest" role="option" aria-selected="false">Oldest first</li>
</ul>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Help us improve our guides

Was this guide helpful?
🌍 Trusted by teams worldwide

Validate at scale.
Ship accessible websites, faster.

Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.

Scheduled Reports
API Access
Open Source Standards
€5 / week

1K Weekly

1,000 monthly checks. Cancel anytime.

Get 1K Weekly →

Join teams across 40+ countries