Elementor recently introduced its new Menu Widget as part of the release of Elementor Pro 3.12.0, as an alpha feature. With this update, they also renamed the previous “Nav Menu” widget to “WordPress Menu”. The new Menu widget brings a host of exciting features and flexibility to the way we create mega menus. However, it is crucial to evaluate whether sufficient attention has been given to accessibility in this update.
A well-designed navigation menu should incorporate specific features that aid assistive technologies like screen readers, and enable search engines to identify the main navigable sections or pages of your website. It serves as a site map guiding users to relevant pages efficiently. As a basic requirement, the menu should be enclosed within a <nav> tag, indicating to screen readers that it is a navigation menu. If there are multiple navigation landmarks on your page, consider including an aria label to differentiate between them.
Additionally, the menu should utilise an unordered list structure, represented by <ul> and <li> tags, particularly for top-level menu items. This structure informs screen readers about the number of items in the navigation menu.
When dropdown items are present, there should be a visual indication, such as an icon, to convey their interactive nature. To ensure proper interactivity and inform screen readers about the status of the dropdown menu (open or closed), relevant javascript and aria attributes should be employed.
In this latest YouTube tutorial, I delve into an accessibility audit of Elementor’s new Menu widget. Join me as I explore whether the menu meets the standards I’ve outlined. I invite you to share your thoughts and insights in the comments section as well.