aria-expanded html attribute

Question

I am currently making a navbar and came accross the aria-expanded html attribute. I know of course that the element is used to let an element either expand or collapse. I could find very little information with regard to this and the W3C docs aren't that clear IMO.

Question

How does this attribute work exactly?

Answer 1

The aria-expanded attribute is simply a flag for the user agent. It

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

...where that indication is for the element's contents, or if aria-controls is also specified, for the target element.

You set its value to indicate what you've done to the page (e.g., you've expanded or contracted a section). It doesn't have any particular behavior associated with it, it's for letting the user agent know what's going on so it can interpret that for its audience (who may be vision-impaired and need some other indication that a section is/isn't expanded).

Answer 2

ARIA attributes are related to accessibility. In this particular case, it's to let users with assistive technology (e.g. screen readers) know whether an element is expanded or not. It does not have any native effect on the styling of the element, but you can target that with CSS attribute selectors: [aria-expanded="true"]. You can toggle the value with JavaScript as needed.