Accordions on your website include important information. Everyone should be able to access this information, even if they do not use a typical keyboard and mouse to browser your website. Many laws around the world also require websites to be accessible, including accordion components.

Yes, HTML buttons are necessary for screen reader and keyboard only users to be able to open and close the accordion.

Yes. Headings are very important for screen reader users to be able to understand and quickly navigate the content. All button text should be contained in a heading tag of the appropriate level (H2, H3, H4, etc.) as makes sense in the outline of your page. Adding a button role to a heading removes the heading from the heading list in screen readers, which is an accessibility failure. You need both a heading tag wrapped around a button tag.

No. The HTML details element is only intended for standalone use and not as a grouped element. It does not support the use of headings and thus cannot be used in place of an accordion.

You can learn more about coding accessible accordions on the Equalize Digital blog, How to Code Accessible Accordions.