Accessibility : Which Wordpress Builder to create a best in class menu

Rédigé le 27/06/2024 par Delphin Batantou

Standards for Creating a Navigable Menu

Web accessibility has become a priority, and this includes the navigability of menus. In this article, we will explore the standards for making a menu navigable and evaluate the accessibility of menus created with different WordPress builders in 2023. We will examine in detail the performance of Brizy, Divi, Avada, BeBuilder (Muffins), and Themify.

Standards for Accessible Navigation

For a menu to be accessible, it must meet several criteria based on the Web Content Accessibility Guidelines (WCAG):

Keyboard Navigation: Users must be able to navigate the menu using the arrow keys, Tab, and Enter. (WCAG 2.1.1 Level A)
Opening and Closing Menus: Submenus must be able to be opened and closed via the keyboard, without requiring hover. (WCAG 2.1.1 Level A)
Mobile: Hamburger menus and close buttons must be accessible via keyboard focus. (WCAG 2.1.1 Level A)
Visible Focus: Each menu item must be reachable and identifiable via keyboard focus. (WCAG 2.4.7 Level AA)

Methodology

For this analysis, I first identified the five most used WordPress builders in 2023.

Builder	Active Installations
Elementor	5.000.000
WPBakery	4.300.000
Avada	835.000
Divi	800.000
Beaver builder	500.000
Brizy	90.000

After testing them, I found that menu navigability heavily depended on the themes used. Therefore, I conducted a more comprehensive search and focused my tests on builders that impose the use of an associated theme and allow visual creation of a menu.

I found 5 builders meeting the criteria:

Builder	Active Installations
Avada	835.000
Divi	800.000
BeBuilder	260.000
Themify	100.000
Brizy	90.000

Test Results

Brizy

Desktop: The menu only opens on hover, making it impossible to navigate with arrow keys, Tab, or Enter. Submenus cannot be opened via the keyboard.
Mobile : Same problem.

Conclusion : Brizy clearly lacks accessibility in terms of keyboard navigation on desktop.

Rating: 1/5

Divi

Desktop: No visible focus. Menus only expand on hover, preventing their use via the keyboard.
Mobile: The hamburger menu is not reachable via keyboard focus.

Conclusion : Divi does not support accessible keyboard navigation, which is a serious issue for assistive technology users.

Rating: 0/5

Avada

Desktop: Visible focus and accessible submenus. Submenus open on focus and close when focus is lost.
Mobile: No focus on the hamburger or close button, but list items are accessible via focus. Submenus can be opened and closed with a button separate from the item.

Conclusion: Avada offers good accessibility on desktop but needs improvements on mobile for control elements like the hamburger menu.

Rating: 4/5

BeBuilder (Muffins)

Desktop : No visible focus. Submenus do not drop down below main menus but appear beside them, complicating navigation.
Mobile : No focus and impossible to open the hamburger menu via the keyboard.

Conclusion : BeBuilder lacks support for keyboard navigation on both desktop and mobile.

Rating: 2/5

Themify

Desktop : Visible focus and accessible submenus.
Mobile : The menu is inaccessible, impossible to open the hamburger menu via the keyboard.

Conclusion : Themify provides good accessibility on desktop but fails on mobile.

Rating: 3.5/5

Conclusion

Thkans to my initial tests on pre-integrated WordPress themes, I realized that most builders imposing a parent theme I tested are less effective or even inaccessible in terms of keyboard navigation.

Among the builders tested, Avada stands out as the most accessible on desktop, although it has limitations on mobile. However, caution is advised when choosing your builder, as we observed during our performance tests that Avada was the least performant.

Read Wordpress Builder Comparison Test.

Other builders, such as Brizy, Divi, BeBuilder, and Themify, show significant shortcomings in keyboard navigation, making them difficult to use for people with specific accessibility needs.

To improve the accessibility of your site, it is crucial to choose a builder and a theme that adhere to accessibility standards, ensuring that every navigation element is easily usable by all users, regardless of their situation.