Main content

aria-expanded

Characteristics

Type:

  • String

Related Concepts:

  • Tapered prompts in voice browsing. Switch in SMIL

Used in Roles:

  • button
  • document
  • link
  • section
  • sectionhead
  • separator
  • window

Inherits into Roles:

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

Value:

  • true/false/undefined
    • true: The element, or another grouping element it controls, is expanded.
    • false: The element, or another grouping element it controls, is collapsed.
    • 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.

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.

Note  For cross-browser compatibility, always use the aria attribute syntax to access and modify aria properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-expanded="p" ... >
JavaScript
object.setAttribute("aria-expanded",value);var value = object.getAttribute("aria-expanded");

Microsoft Active Accessibility Properties:

  • STATE_SYSTEM_COLLAPSED or
  • STATE_SYSTEM_EXPANDED (get_accState)

UI Automation Properties: 

  • ExpandCollapseState (ExpandCollapse Pattern)

UI Automation AriaProperties Property:

  • expanded
More in this category: « aria-disabled aria-grabbed »