WAI-ARIA: aria-expanded (State)

Description

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

For example, this indicates whether a portion of a tree is expanded or collapsed. In other instances, this may be applied to page sections to mark expandable and collapsible regions that are flexible for managing content density. Simplifying the user interface by collapsing sections may improve usability for all, including those with cognitive or developmental disabilities.

If the element with the aria-expanded attribute controls the expansion of another grouping container that is not ‘owned by’ the element, the author SHOULD reference the container by using the aria-controls attribute.

Browser Compatibility

Screen Reader Support

aria-expanded Example

HTML Example

<input type="text" aria-label="Tag" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option">
<ul role="listbox" id="owned_listbox">
  <li role="option">Zebra</li>
  <li role="option" id="selected_option">Zoom</li>
</ul>

HTML Example 2

A page contains a combobox composed of a textbox and a dropdown list of values which the user may choose from. The chosen list item becomes the value of the textbox. As the user navigates through the list via arrow keys, the aria-activedescendant property is adjusted to reflect the id attribute of the current child element which has been navigated to.

<input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true" aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit">
<ul aria-expanded="true" role="listbox" id="cb1-list">
  <li role="option" id="cb1-opt1">Alabama</li>
  <li role="option" id="cb1-opt2">Alaska</li>
  <li role="option" id="cb1-opt3">American Samoa</li>
  <li role="option" id="cb1-opt4">Arizona</li>
  <li role="option" id="cb1-opt5">Arkansas</li>
  <li role="option" id="cb1-opt6">California</li>
  <li role="option" id="cb1-opt7">Colorado</li>
</ul>

Characteristics

Used in Roles

• button
• combobox
• document
• link
• section
• sectionhead
• window

Inherits into Roles

• alert
• alertdialog
• article
• banner
• cell
• columnheader
• complementary
• contentinfo
• definition
• dialog
• directory
• feed
• figure
• form
• grid
• gridcell
• group
• heading
• img
• landmark
• list
• listbox
• listitem
• log
• main
• marquee
• math
• menu
• menubar
• navigation
• note
• progressbar
• radiogroup
• region
• row
• rowheader
• search
• select
• status
• tab
• table
• tabpanel
• term
• timer
• toolbar
• tooltip
• tree
• treegrid
• treeitem

Value

• true/false/undefined:
  Value representing true, false, or not applicable. For example, an element with aria-expanded set to false is not currently expanded; an element with aria-expanded set to undefined is not expandable. The default value for this value type is undefined unless otherwise specified.
• false
• The element, or another grouping element it controls, is collapsed.
• true
  • The element, or another grouping element it controls, is expanded.
• undefined (default)
  • The element, or another grouping element it controls, is neither expandable nor collapsible; all its child elements are shown or there are no child elements.

Semantic HTML

No HTML element equivalent.

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-expanded.
• A11Y Support
  The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-expanded.
• MDN Web Docs
  The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-expanded.