5 replies

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>

KP-C

Kevin Powell - Community•4y ago•

5 replies

Laegnur

Best way to organize multiple menus

<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>

Best way to organize multiple menus

Similar Threads

Best way to organize multiple menus

Similar Threads

Similar Threads

Similar Threads