Accordion Menu Comparison

Easy Accordion

Single site – $29, Business (up to 5 sites) – $99

Pros

1. Can set location of icon that represents open or closed tab.
2. Can use caret in pro version for icon (Norman Nielsen recommendation).
3. Tabs are keyboard accessible.
4. Tabs have focus indicator.
5. Can change colors of tab and text.
6. Uses aria-expanded to announce whether panel is opened or closed.

Cons

1. Toggles in authoring tool aren’t keyboard accessible.
2. There is no ARIA role=”tab” on tabs, so the fact that they are tab panels isn’t clear.
3. Tab text defaults to Heading 3, which can cause issues with page heading structure.

Responsive Accordion

Single site – $9, Unlimited websites – $27

Pros

1. Can use caret in pro version for icon (Norman Nielsen recommendation).
2. Can set location of icon that represents open or closed tab.
3. Uses ARIA role=”tab” on tabs and aria-expanded to announce whether panel is opened or closed.
4. Tabs are keyboard accessible.
5. Tabs have a visible focus indicator.
6. Can change colors of tab and text.

Cons

1. Authoring tool interface not fully keyboard accessible.
2. No focus indicator on authoring tool buttons.
3. Tab text defaults to Heading 4, which can cause issues with page heading structure.

Accordion Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tempor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vestibulum aliquet ex ut gravida. Ut porta turpis elit, in vehicula nunc tempus non. Aliquam sagittis ultrices elit ut efficitur. Suspendisse ac felis iaculis, fringilla leo vitae, vestibulum erat. Morbi arcu dolor, pulvinar non venenatis ac, malesuada a ex. Nam vulputate velit egestas dui finibus, id aliquet est elementum. Donec vehicula libero neque, et elementum ex aliquet at. In nec erat ut ligula vulputate maximus. Quisque mattis dolor ut efficitur dapibus. Morbi tortor mauris, placerat sit amet ipsum ut, ultricies hendrerit sapien. Praesent ac mi non risus porttitor eleifend sed ac arcu. Maecenas in mi vitae arcu sodales gravida. Quisque bibendum lacinia vehicula.

• Test 1
• Test 2
• Test 3

Phasellus mattis malesuada nisi, ac ultrices sapien rutrum quis. Aenean porttitor dignissim metus, eu ullamcorper neque congue quis. Phasellus pharetra purus magna, sed scelerisque leo interdum et. Proin eget odio pulvinar, sollicitudin magna in, eleifend mauris. Mauris efficitur mauris congue ullamcorper elementum. Sed sit amet semper nisl. Vivamus et metus mi.

Accordion Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tempor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vestibulum aliquet ex ut gravida. Ut porta turpis elit, in vehicula nunc tempus non. Aliquam sagittis ultrices elit ut efficitur. Suspendisse ac felis iaculis, fringilla leo vitae, vestibulum erat. Morbi arcu dolor, pulvinar non venenatis ac, malesuada a ex. Nam vulputate velit egestas dui finibus, id aliquet est elementum. Donec vehicula libero neque, et elementum ex aliquet at. In nec erat ut ligula vulputate maximus. Quisque mattis dolor ut efficitur dapibus. Morbi tortor mauris, placerat sit amet ipsum ut, ultricies hendrerit sapien. Praesent ac mi non risus porttitor eleifend sed ac arcu. Maecenas in mi vitae arcu sodales gravida. Quisque bibendum lacinia vehicula.

• Test 1
• Test 2
• Test 3

Phasellus mattis malesuada nisi, ac ultrices sapien rutrum quis. Aenean porttitor dignissim metus, eu ullamcorper neque congue quis. Phasellus pharetra purus magna, sed scelerisque leo interdum et. Proin eget odio pulvinar, sollicitudin magna in, eleifend mauris. Mauris efficitur mauris congue ullamcorper elementum. Sed sit amet semper nisl. Vivamus et metus mi.

Did not work on our version of WordPress, adding to a page using Beaver Builder on WordPress 5.5.

WebMan (WM) Accordion

Accordions aren’t keyboard accessible.

Beaver Builder Accordion

Pros

• Accordions have visible focus indicators.
• Panels don’t have headings.

Cons

• There is an extra tab stop before each accordion item that doesn’t have any function.
• Both the linked title and the open/close button have a tab stop instead of being combined into a single tab stop.
• Beaver Builder interface isn’t keyboard accessible to add a new one – can’t get to modules to add.
• Doesn’t announce a collapse as it happens.
• The extra tab stop is actually there for screen readers mainly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tempor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vestibulum aliquet ex ut gravida. Ut porta turpis elit, in vehicula nunc tempus non. Aliquam sagittis ultrices elit ut efficitur. Suspendisse ac felis iaculis, fringilla leo vitae, vestibulum erat. Morbi arcu dolor, pulvinar non venenatis ac, malesuada a ex. Nam vulputate velit egestas dui finibus, id aliquet est elementum. Donec vehicula libero neque, et elementum ex aliquet at. In nec erat ut ligula vulputate maximus. Quisque mattis dolor ut efficitur dapibus. Morbi tortor mauris, placerat sit amet ipsum ut, ultricies hendrerit sapien. Praesent ac mi non risus porttitor eleifend sed ac arcu. Maecenas in mi vitae arcu sodales gravida. Quisque bibendum lacinia vehicula.

• Test 1
• Test 2
• Test 3

Phasellus mattis malesuada nisi, ac ultrices sapien rutrum quis. Aenean porttitor dignissim metus, eu ullamcorper neque congue quis. Phasellus pharetra purus magna, sed scelerisque leo interdum et. Proin eget odio pulvinar, sollicitudin magna in, eleifend mauris. Mauris efficitur mauris congue ullamcorper elementum. Sed sit amet semper nisl. Vivamus et metus mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tempor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vestibulum aliquet ex ut gravida. Ut porta turpis elit, in vehicula nunc tempus non. Aliquam sagittis ultrices elit ut efficitur. Suspendisse ac felis iaculis, fringilla leo vitae, vestibulum erat. Morbi arcu dolor, pulvinar non venenatis ac, malesuada a ex. Nam vulputate velit egestas dui finibus, id aliquet est elementum. Donec vehicula libero neque, et elementum ex aliquet at. In nec erat ut ligula vulputate maximus. Quisque mattis dolor ut efficitur dapibus. Morbi tortor mauris, placerat sit amet ipsum ut, ultricies hendrerit sapien. Praesent ac mi non risus porttitor eleifend sed ac arcu. Maecenas in mi vitae arcu sodales gravida. Quisque bibendum lacinia vehicula.

• Test 1
• Test 2
• Test 3

Phasellus mattis malesuada nisi, ac ultrices sapien rutrum quis. Aenean porttitor dignissim metus, eu ullamcorper neque congue quis. Phasellus pharetra purus magna, sed scelerisque leo interdum et. Proin eget odio pulvinar, sollicitudin magna in, eleifend mauris. Mauris efficitur mauris congue ullamcorper elementum. Sed sit amet semper nisl. Vivamus et metus mi.