A practical guide to correctly using the aria-expanded attribute in web development. Covers two main categories of collapsible widgets: collapsible sections (disclosure widgets, accordions) and collapsible interactive elements (navigation, menus, tree views, combo boxes). For each pattern, the appropriate ARIA attributes are explained with code examples. Also covers similar patterns like dialogs, tabbed interfaces, and tooltips that use aria-haspopup or aria-modal instead of aria-expanded. Highlights how modern HTML native elements (details/summary, dialog) and browser APIs (Popover, Invoker Commands) can often replace custom ARIA implementations entirely, reducing JavaScript dependency.
Table of contents
The two categoriesCollapsible sectionsCollapsible interactive elementsSimilar but differentWrapping upSteve Frenzel16.9K Impressions