two elements with id="avia-menu" (accessibility issue)

You are only looking at the page html source.

You need to go to the inspector (dev tools) and try running this in the javascript console

jQuery('ul#avia-menu').length;

you should see 2 elements. You can also find them manually in the element inspector. As mentioned one is cloned with javascript it seems, and therefore the browser (and hence the screenreader) sees 2 elements with the same ID.

Thanks
J

PS I’m not sure what Enfold is doing under the hood to clone the menu for mobile but note eg under jQuery documentation:

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

https://api.jquery.com/clone/

• This reply was modified 4 years, 11 months ago by codemonkeynorth.

I’ll dig around the settings to see if there’s something specific in our setup regarding mobile menu

Thanks
J

note the second one is nested under header_main_alternate

this is the one in the source code
<div id='header_main_alternate' class='container_wrap'><div class='container'><nav class='main_menu' data-selectname='Select a page' role="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" ><div class="avia-menu av-main-nav-wrap"><ul id="avia-menu" class="menu av-main-nav">

the extra one being generated by js is getting placed below <div id='header_main'.....

• This reply was modified 4 years, 11 months ago by codemonkeynorth.