Accordion/Toggle: Accordion (toggle) is missing appropriate roles and/or attributes

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How to Fix

Fix this issue by doing ALL of the following:

1. Put the title of each accordion/toggle header in a <button> (or ARIA equivalent) element.
2. Wrap the button in a heading (or ARIA equivalent) element.
3. When the hide/show panel associated with an accordion/toggle header is visible, set the aria-expanded attribute on the button element to true. When the panel is not visible, set aria-expanded to false.

<h3><button aria-expanded="true">When will I receive my refund?</button></h3> <div class="faq-expanded">You should receive your refund within 5 business days....</div>

See the full ARIA accordion design pattern including optional usability enhancements and expected keyboard interactions at: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/