What ARIA attributes are used in the example of an accordion?

For an accordion (a component with expandable panels), the following ARIA attributes are usually used:

• role="button" — on the element that opens/closes the panel.
• aria-expanded="true|false" — indicates whether the panel is expanded.
• aria-controls="ID_of_panel" — links the button to the panel it controls.
• role="region" or role="tabpanel" — on the panel itself, to denote a content region.
• aria-labelledby="ID_of_button" — links the panel to the button that opens it.

Example:

<div>
  <button aria-expanded="false" aria-controls="section1" id="accordion1">Header 1</button>
  <div id="section1" role="region" aria-labelledby="accordion1" hidden>
    Panel content 1
  </div>
</div>