[Resolved] Mobile menu IDs

[digitalservices]

Hi,

We use a system called siteimprove to help check our site and part of it’s accessability checks (4.1.1: Parsing) show we have duplicate IDs which are caused by the mobile and desktop menus.

Is it possible to add “mobile-” to the start of all IDs found in the mobile menu? so #primary-menu becomes #mobile-primary-menu?

Thanks,

Stuart

[Tom]

Hi there,

There shouldn’t be any duplicate IDs by default.

I just checked out your source and I’m seeing 1 primary-menu and 1 mobile-menu. I’m not seeing any duplicate IDs.

Let me know 🙂

[digitalservices]

I though the same and quried it with them and this was their response:

It seems that we are seeing duplicate element IDs due to the mobile navigation menu having the same IDs as the regular menu. The reason that you are not seeing this in the static showing of the HTML source code is because our Accessibility checker looks as the dynamic content of the page where it also finds the mobile menu.

So I would argue that the platform is right in showing these as issues, because the element IDs actually appear twice/is duplicated.

To resolve these issues, I see two ways of going about it:

One would be for us to cut out the mobile menu from the crawl, so we are certain to only see the navigation menu once.

The other would be for you to give the mobile navigation menu unique IDs that only belongs to the mobile menu, making all IDs on the pages still be unique.

Do you think it’ll just be easier to get them to remove thew mobile menu from the scan?

[Tom]

Ah I see the issue – that’s happening because the sticky mobile header is cloned and used to prevent the page from jumping when it becomes sticky. It would probably be easiest to exclude it from the scan for now 🙂

[digitalservices]

Tom,

That’s what I thought but wanted to ask just in case.

Thanks for your help.

Stuart

[Tom]

No problem 🙂

[Author]

Posts