Which Page Builder is the Best (or Worst) at Accessibility with Amber Hinds

Building an accessible website - one that works for people with disabilities and complies with accessibility laws around the world is easiest if you start from a solid foundation. Choosing the right page builder is key if you want to build an accessible website without having to spend a lot of time remediating problems. But which one is the best?
In this presentation, Amber Hinds, CEO of Equalize Digital, compared the accessibility of popular page builders: Avada, Beaver Builder, Breakdance, Bricks, CoBlocks, Divi, Elementor, GeneratePress, Kadence, and Site Origin. Find out which provides the best (or worst) foundation for accessibility.
This is a recording of a July 2024 WordPress Accessibility Meetup.
The WordPress Accessibility Meetup Group is a global group of WordPress developers, designers, and users interested in building more accessible websites. Join us twice per month for meetups on a variety of topics related to making WordPress websites that can be used by people of all abilities.
Learn more about this group at equalizedigita...
To read a transcript of this video and access additional resources at equalizedigita...

[@sophiemulders]

I would love to see the test results of bricks and try to debunk them. 😊

[@SellyS.]

Would love to see how Builderius measures up against these page builders!

[@sophiemulders]

I think its also fair to say : how you use the builder is a big part of how accessible your site will be. I know i can build a complete accessible site with Bricks -> while it scored not to well in your test.

[@amber_hinds]

This is completely true. The major problems with Bricks were in their core components - things like accordions, tabs, etc. are (were?) completely non-functional with a keyboard because they lacked semantic HTML. If you don't use those components because you code your own accordions or tabs or use a different add-on with better underlying HTML or you just don't use accordions or tabs at all, then your website may be just fine. This is really true for any builder - it depends a lot on what components you choose.

[@chris74er90]

I'm sorry, I don't understand your tests. When I look at the code quality and semantics of Elementor, for example, I see a desert with lots of subgroups. No matter which components I use. Other builders, such as Bricks, are more elegant here and offer many options for adding attributes directly without activating additional plugins.

[@EqualizeDigital]

These tests relied on manual and automated testing. If you get access to the spreadsheet shared at equalizedigital.com/wordpress-page-builder-accessibility/ it provides exactly what was looked at for each component.
For example, here are the items that were looked at for Tabs:
- Tab controls container has role="tablist"
- Tab controls are buttons
- Tab controls have role="tab" and aria-controls
- Current tab control button has aria-selected=”true”
- Tab panels have role=”tabpanel”
- Tab panels have aria-labelledby
- Visible focus
The native Bricks tab block failed all of these checks. At the time, that component was completely nonfunctional for people who don't use a mouse. (I understand that might be corrected now.) Can you build an accessible website with Bricks? Yes. But the point of this was to look at native components and see which ones got it right out of the box without requiring intervention. On that front, many other page builders did a better job than Bricks.