Below is an example of the code with an explanation of the attributes
Making the buttons accessible
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
Our panel can be in one of two states:
The block is collapsed so the content is not visible for the user.
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