Components often hide or show content. Some examples:
An FAQ, where each question is a button that expands or collapses the answer.
A hamburger menu in a mobiel viewport, it slides in or out of view.
A simple dropdown, expanding or collapsing the subitems.
A screenreader user can't see if the component is expanded or collapsed. That's where the aria-expanded attribute (spec) comes in.
Place the attribute on the element thats initiates the change, in most cases a button. For example, the FAQ component:
<button aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
Synchronize the value of the attribute (aria-expanded="false" or "true") with the visual state of the component. This will communicate the status (expanded or collapsed) to screenreaders when the button receives focus. Don't place the attribute on the content that get's shown or hidden. A common mistake which makes the attribute useless.
As you can see in the code example, the ARIA specification also provides an aria-controls attribute to tell screenreaders which content the button controls. Unfortunately, there's poor support for the attribute.