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 For aria-expanded

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
ariaExpanded

Screen Reader Support For aria-expanded

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the “false” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedpartial (2/3)supportedsupportedpartial (2/3)
MUST convey the “true” valuepartial (2/3)partial (2/3)partial (2/3)supportedsupportedsupportedsupportedsupportedsupportedsupportedpartial (2/3)
MUST convey change in valuepartial (1/2)partial (1/2)supportedsupportedsupportedsupportedsupportedsupportedsupportedpartial (1/2)partial (1/2)

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

Inherits into Roles

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

Leave a Reply

Your email address will not be published. Required fields are marked *