CODEWITHSUNDEEP
htmlcssaccessibility
user9664977
user9664977

Reputation: 849

A Navigation for Desktop and Mobile with Same IDs Issue with ADA?

I am tasked with going through a site and making it fully ADA compliant. The current issue I am on that has me stumped is how to fix an issue with duplicate IDs.

Reading here: https://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse

it states that duplicate IDs are an issue for ADA.

The reason there are duplicate IDs on this site is because it has two main navigations. One for desktop and one for mobile. At a certain viewport the mobile menu will switch its CSS styles from display: none; to display: block; and vise-versa for the desktop menu.

I read here: https://www.html5accessibility.com/tests/hidden2013.html

That display: none; is an way that is supported to hide content from screen readers. So what I am wondering is if the issue with duplicate IDs is a non-issue and since the mobile and desktop menus are never displayed at the same time it isn't an issue.

These IDs also are not connected to labels for forms, table header cells, etc. So is this a non-issue to worry about? Or is this something that still will not be ADA compliant, and if so what step can I take to make it ADA compliant without combining the desktop and mobile menus into one or giving them both unique IDs?

Upvotes: 2

Views: 1054

Answers (1)

Josh
Josh

Reputation: 4322

You are correct that using display:none will hide content from all users, which will in practice nullify the issue of duplicate IDs.

However, you should still tread lightly as this is a sub-optimal practice with potential pitfalls.

For one thing, having duplicate IDs isn't valid HTML. The HTML5 specification clearly states that:

"The value must be unique amongst all the IDs in the element's home subtree" https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

Furthermore, any scripts (current or future) that targets elements by ID will likely choke on duplicate IDs and may produce unpredicatable results.

Upvotes: 1

Related Questions