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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaExpanded | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support For aria-expanded
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey the “false” value | supported | supported | supported | supported | supported | supported | supported | partial (2/3) | supported | supported | partial (2/3) |
| MUST convey the “true” value | partial (2/3) | partial (2/3) | partial (2/3) | supported | supported | supported | supported | supported | supported | supported | partial (2/3) |
| MUST convey change in value | partial (1/2) | partial (1/2) | supported | supported | supported | supported | supported | supported | supported | partial (1/2) | partial (1/2) |
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
- W3C (opens new window)
- A11Y Support
- MDN Web Docs