KPC
Kevin Powell - Community•3y ago
Laegnur

Best way to organize multiple menus

In a web that I'm redesigning, I have 3 UL menus (user menu, language menu and main menu) in the head. What is a best practice from an accessibility point of view?: -Have 1 NAV with 3 ARIA-labeled ULs 
<nav id="menus">
    <ul id="menu-user" aria-label="User menu">
        <li>...</li>
    </ul>
    <ul id="menu-language" aria-label="Site Language menu">
        <li>...</li>
    </ul>
    <ul id="menu-main" aria-label="Main menu">
        <li>...</li>
    </ul>
</nav>
<nav id="menus">
    <ul id="menu-user" aria-label="User menu">
        <li>...</li>
    </ul>
    <ul id="menu-language" aria-label="Site Language menu">
        <li>...</li>
    </ul>
    <ul id="menu-main" aria-label="Main menu">
        <li>...</li>
    </ul>
</nav>
-Have 3 separate ARIA-labeled NAVs with is own UL each? 
<nav id="menu-user" aria-label="User menu">
    <ul>
        <li>...</li>
    </ul>
</nav>
<nav id="menu-language" aria-label="Site Language menu">
    <ul>
        <li>...</li>
    </ul>
</nav>
<nav id="menu-main" aria-label="Main menu">
    <ul>
        <li>...</li>
    </ul>
</nav>
<nav id="menu-user" aria-label="User menu">
    <ul>
        <li>...</li>
    </ul>
</nav>
<nav id="menu-language" aria-label="Site Language menu">
    <ul>
        <li>...</li>
    </ul>
</nav>
<nav id="menu-main" aria-label="Main menu">
    <ul>
        <li>...</li>
    </ul>
</nav>
4 Replies
b1mind
b1mind•3y ago
depends how you want it read to the user, and listed by assisted tech. I would prob go with the second if they are truly different navs. Also I would double check if you need the aria there I think it will take the id as name If they are sub menus in a nav how ever I would probably do the first 🤔 (maybe someone with more exp will answer too)
Kevin Powell
Kevin Powell•3y ago
multiple navs with aria-label, I believe is the right way to go, but drop the menu from the name... so aria-label="language", aria-label="main", etc. It's already announced that it's a navigation menu, so it gets repetitive. Maybe the first one could be user options ?
Coder_Carl
Coder_Carl•3y ago
Don't forget to put a skip-link on the site when you have (presumably) many links in the nav
Laegnur
LaegnurOP•3y ago
Yes, first tag inside body is the skip to #content link, visually-hiden and focusable,... Then, until now, I had two designs, a nav with the uls, followed by the header, the main,...or a header with the nav inside. The client (mi sister) prefer the first design, so tomorrow I have to think how to adapt this to the solution pointed by Kevin Thanks for your answers. Because this project is for my sister, I'm trying to do my best on it.

Did you find this page helpful?