-
Posts
-
Hello, there.
I found the same issue posted here back in 2015 but it was never resolved. Provided link ( http://kriesi.at/documentation/enfold/changing-the-menu-on-mobiles/ ) for setting up a different menu don’t work either.
Here is the problem:
When Enfold clones the main menu to create the #mobile-advanced one, the ids aren’t changed, so there are multiple duplicate ids per page. This is giving us problems with some clients who are looking to be WCAG AA Compliant.Please help.
Thanks.
Here is a workaround for everyone else experiencing the same problem.
I used some jquery to remove duplicate ids from mobile menu items:$(‘#mobile-advanced li’).each(function() {
$(this).removeAttr( “id” )
});i do not believe that an element that is set to display none counts on that ID Problematic.
If you choose for the main menu the footer-menu option too – then it is something different. – And you an avoid that on creating the same menu with different menu name for the footer.
Guenni007 I don’t think you understood the problem.
When you create a menu, Enfold kinda duplicates it for mobile menu. If you’ll inspect your page you’ll be able to see two menus – one desktop and one mobile. Both menus will have same elements (list items) with the same ids. Mobile menu will be hidden (display: none;) on the screen bigger than 768px for example, but it still sit on the page which causing it NOT being WCAG ADA Compliant.
My workaround getting rid of the id attribute of the list items of the mobile menu completely on the page load and now it can pass and be WCAG ADA Compliant.Hi,
Did you update the Enfold to 4.1 version and checked the mobile style in the Enfold theme options?
Best regards,
John Torviki did – but you inspect it with a fire-bug or developer tools – but these list-points are greyed out because they are on display: none !
go and proove your site on W3C Validation site. These “duplicate ID’s” are not mentioned because they are not displayed at the same time.
But – and that is the point i mentioned – if you will make a check mark on menus ( Main Menu and Footer Menu for the same menu) these list points are displayed at the same time – and will cause a duplicate ID Fault.Hey, John.
YES! Thank you! Never got a message for available update. Had to check it manually and a version 4.1 was available.
Updated Enfold and the issue was resolved.
Thanks again!Guenni007 W3C Validation site is the Markup Validation. It has nothing to do with testing site for ADA Compliance.
We use very powerful service siteimprove.com for that and that tool makes sure your site is ADA compliant and it shows that even elements with display: none; cause an error with Content Accessibility if they have duplicated ids.Hey, John.
Here is another similar one.
Search box on the search page has the same id as the search box in the side bar on the same page since they call the same function to pull the same form.
Any ideas how to fix it without javascript workaround?Thank you!
- You must be logged in to reply to this topic.