0

The case: I have a menu, with slight differences between the mobile version and the desktop version. So, in the code, I have two unordered lists.

<ul class="Mobile">
</ul>

<ul class="Desktop">
</ul>

And I have two choices for the usage of the nav tag.

One enclosing everything:

<nav>
<ul class="Mobile">
</ul>

<ul class="Desktop">
</ul>
</nav>

Or one enclosing each one.

<nav>
<ul class="Mobile">
</ul>
</nav>

<nav>
<ul class="Desktop">
</ul>
</nav>

Of course, they are turned on or off using some Javascript, but the tags remain on the HTML code.

What would be the best option, for browsers for blind people for example?

2
  • 1
    This feels like it would be more suited to Stack Overflow. While I can see that there may be a semantic clash here, we're not necessarily code-literate. There may be something about ARIA roles but I have only the vaguest idea about that - Try on Stack Overflow May 5, 2023 at 9:38
  • I think this is the proper place because it is more focused on the user than how to write the code. Ty!
    – Rafael
    May 6, 2023 at 19:21

1 Answer 1

1

There is no conflict in using multiple navigation elements on a website. It is common practice to have separate navigation menus for desktop and mobile versions of a website. Therefore, it is acceptable to have a desktop navigation and a mobile navigation for your website.

For more information, see MDN's nav: The Navigation Section element

  • It's not necessary for all links to be contained in a element. is intended only for a major block of navigation links; typically the element often has a list of links that don't need to be in a element.
  • A document may have several elements, for example, one for site navigation and one for intra-page navigation. aria-labelledby can be used in such case to promote accessibility, see example.
  • User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.

Although it's not mandatory to use a nav element for navigation purposes (as you can see in the same link I provided), I highly recommend it. Otherwise, you'll have to provide the ARIA role "navigation" for accessibility purposes, which is not necessary if you use the nav element since screen readers recognize its role automatically, hence why you will see this

enter image description here

in the link I posted above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.