In the accordion panels we are using javascript to change the state of the accordion panels. Changing states are usually visually apparent to users who can see the page but they may not be obvious to users of assistive technologies like screen readers. To fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies we can use Accessible Rich Internet Applications (ARIA) attributes.

Below is an example of the code with an explanation of the attributes

Making the buttons accessible

By adding role="button" we will explain to a screen reader that the accordion-heading has a button control. We also need to indicate whether the collapsible content below is in the extended or in the collapsed state. We can do this by using the aria-expanded attribute

Our panel can be in one of two states:

aria-expanded=false
The block is collapsed so the content is not visible for the user.

aria-expanded=true
The block is expanded and the content is visible for the user.

Creating the relationship between the button and the panel

We need to explain that the heading and the panel are related to each other. We can do this by using the aria-controls to explain that this element has control over and affects the panel. And in the panel we can use the aria-labeledby attribute to describe the relationship and explain that this element is revealed by the header

aria-controls="accordion_1" points to the ID of the panel which the header controls. In the panel you see the aria-labelledby="accordion_1" this attribute establishes relationships between the panel and the header.

Making the Panel accessible

For the panel we are using a div and to explain the role of this div as a content area that has relevant information related to the heading we use role="region".

Source:
https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html