--- title: Use cases for aria-expanded | daily.dev description: A practical guide to correctly using the aria-expanded attribute in web development. Covers two main categories of collapsible widgets: collapsible sections... canonical: https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Use cases for aria-expanded | daily.dev og:description: A practical guide to correctly using the aria-expanded attribute in web development. Covers two main categories of collapsible widgets: collapsible sections... og:url: https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth og:image: https://api.daily.dev/og/posts/tgq9KcGTH.png og:image:alt: Use cases for aria-expanded og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Use cases for aria-expanded **[Piccalilli](https://daily.dev/sources/piccalilli)** · 11 min read · 6 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### When should I use aria-expanded versus the native details and summary elements? Use the native details and summary elements when a simple disclosure widget is all that's needed, since they work in all major browsers and are recognized by assistive technology out of the box. Reserve aria-expanded with a custom button and JavaScript for cases requiring more complex behavior, like accordions, menus, or tree views, where native elements can't fully cover the interaction pattern. _daily.dev surfaces accessibility guidance like this for developers deciding between native HTML and custom ARIA patterns._ ### Does a hamburger button need aria-haspopup or just aria-expanded? It depends on what the button reveals: if it toggles a navigation bar, aria-expanded alone is sufficient, but if it opens a menu, aria-haspopup is also required alongside aria-expanded. Additional attributes like aria-controls, aria-activedescendant, or aria-checked may be needed depending on whether the menu supports selection or multiple items. _Developers building accessible navigation patterns can find breakdowns like this through daily.dev._ ### Can I build an accessible modal dialog without any JavaScript? Yes, using the native dialog element together with the Invoker Commands API, a button with command="show-modal" and commandfor pointing to the dialog's id can open and close it with zero JavaScript. The dialog element has had solid browser support and assistive technology support for some time, making aria-modal-based custom implementations unnecessary for most cases. _daily.dev helps developers track platform capabilities like invoker commands before committing to a modal implementation._ ## Similar posts on daily.dev - [Link \+ Popover Navigation](https://daily.dev/posts/link-popover-navigation-ojnhasllg) · Adrian Roselli · 0 upvotes · 0 comments - [Replacing JS with just HTML](https://daily.dev/posts/replacing-js-with-just-html-63nvjchya) · Hacker News · 12 upvotes · 1 comments - [I Learned The First Rule of ARIA the Hard Way](https://daily.dev/posts/i-learned-the-first-rule-of-aria-the-hard-way-bf3esumgq) · CSS-Tricks · 210 upvotes · 12 comments - [Building Better Buttons](https://daily.dev/posts/building-better-buttons-kfg2u6xfq) · Simple Thread · 68 upvotes · 5 comments --- Tags: [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Use cases for aria-expanded","url":"https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth"},"datePublished":"2026-07-16T12:12:27.360Z","dateModified":"2026-09-13T18:51:18.596Z","description":"A practical guide to correctly using the aria-expanded attribute in web development. Covers two main categories of collapsible widgets: collapsible sections...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/15b2c69832fe8ac12ac87991a53fc0ac?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/15b2c69832fe8ac12ac87991a53fc0ac?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Piccalilli","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Piccalilli","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/6864a3872e444ed8a46d4e28a71883e3","url":"https://daily.dev/sources/piccalilli"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"html,accessibility,web-components","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Piccalilli","item":"https://daily.dev/sources/piccalilli"},{"@type":"ListItem","position":3,"name":"Use cases for aria-expanded"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth#faq","mainEntity":[{"@type":"Question","name":"When should I use aria-expanded versus the native details and summary elements?","acceptedAnswer":{"@type":"Answer","text":"Use the native details and summary elements when a simple disclosure widget is all that's needed, since they work in all major browsers and are recognized by assistive technology out of the box. Reserve aria-expanded with a custom button and JavaScript for cases requiring more complex behavior, like accordions, menus, or tree views, where native elements can't fully cover the interaction pattern. daily.dev surfaces accessibility guidance like this for developers deciding between native HTML and custom ARIA patterns."}},{"@type":"Question","name":"Does a hamburger button need aria-haspopup or just aria-expanded?","acceptedAnswer":{"@type":"Answer","text":"It depends on what the button reveals: if it toggles a navigation bar, aria-expanded alone is sufficient, but if it opens a menu, aria-haspopup is also required alongside aria-expanded. Additional attributes like aria-controls, aria-activedescendant, or aria-checked may be needed depending on whether the menu supports selection or multiple items. Developers building accessible navigation patterns can find breakdowns like this through daily.dev."}},{"@type":"Question","name":"Can I build an accessible modal dialog without any JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Yes, using the native dialog element together with the Invoker Commands API, a button with command=\"show-modal\" and commandfor pointing to the dialog's id can open and close it with zero JavaScript. The dialog element has had solid browser support and assistive technology support for some time, making aria-modal-based custom implementations unnecessary for most cases. daily.dev helps developers track platform capabilities like invoker commands before committing to a modal implementation."}}]} ```