Accordion elements should use an ARIA attribute to communicate an open or closed status to screen readers and other assistive technology.
Accessible accordion components
A common way to build an accordion in Webflow consists of a trigger element that is a direct sibling to a content element. An interaction is set on the trigger element to show the sibling content element when clicked. We should also add some specific attributes that are toggled when the accordion is opened or closed in order to announce the state of the accordion to screen readers.
Reference the cloneable project below that uses the proper structure, attributes and code outlined in this task.
Structure & class names
<checks-richtext_class>accordion-item<checks-richtext_class>
<checks-richtext_class>accordion-trigger<checks-richtext_class>
<checks-richtext_class>accordion-content<checks-richtext_class>
Custom attributes
How to add custom attributes: https://university.webflow.com/lesson/custom-attributes
<checks-richtext_class>accordion-item<checks-richtext_class>
- role= "region"
<checks-richtext_class>accordion-trigger<checks-richtext_class>
- role="button"
- aria-expanded="false"
- aria-controls=”{id-of-accordion-content}”
- tabindex="0" (Only needed if the trigger element isn’t already a link or button)
<checks-richtext_class>accordion-content<checks-richtext_class>
- aria-hidden="true"
Custom code
Add the custom code below to the before </body> section of the page or project settings.
Note: the script uses the class of <checks-richtext_code>accordion-trigger<checks-richtext_code> on the trigger element, and the <checks-richtext_code>accordion-content<checks-richtext_code> on the content element. To use different classes, update the class names in the script as well.