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.
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.
Leave a Reply