Achieving WCAG 2.1 Status A: Accessible Menubar

Unlock the secrets of building a Menubar that meets WCAG 2.1 Status A guidelines. My step-by-step guide makes accessibility in webdevelopment simple and effective.

Accessibility Considerations (WCAG 2.1 Level A):

1.4.1 Use of Color: Ensure that color is not the only means of conveying information or indicating an action.

2.1.1 Keyboard: The MenuBar, including dropdowns and submenus, must be fully navigable using a keyboard.

1.3.1 Info and Relationships: The structure of the menu and its items should be clearly defined for assistive technologies.

2.4.4 Link Purpose (In Context): Ensure that the purpose of each menu item link is clear from its text or context.

Key words

• Menubar= A Menubar is the container of items that represents any choices
• Menuitem = A Menuitem is each choice within a Menubar
• Menu = A Menu opens a submenu, also known as a parent Menuitem.

Rules

• A Menubar should exist of these semantic html elements <nav>, <ul>, <li> and <a> .
• If there are multiple menu's, use aria-label to distinguish them from each other.
• A Menu has the aria-expanded set to false when collapsed and set to true when expanded
• The menu has the attribute tabindex set to -1 or 0
• The menu has the attribute aria-activedescendant set to the ID of the focused item
• Each item in a menu has the attribute tabindex set to -1, except in a menubar where the first item has tabindex 0
• Whenever a menuitem is disabled the attribute aria-disabled is set to true
• A menubar has the attribute aria-label OR aria-labeledby when the menubar has a visible label. Aria-labeledby refers to the labelling element.
• The menubar has a default value of aria-orientation for horizontally orientation. If it is vertically oriented, set the attribute aria-orientation to vertical.

Hamburgermenu

• If some trigger will open a Menu (submenu) or mobile version of the Menubar, set aria-haspopup to true to indicate
• Add aria-label=“Menu” when there is a hamburger icon within the button and not any text
• Hamburgemenu icon preferably needs to be 44 x 44 pixels
• Button need to be triggered by Enter or Space key
• When expanded, focus need to stay on hamburgemenu
• When Tab is pressed, the first element of the content must be selected
• When javascript turned off, the menu should be expanded

Example

<nav aria-label="Accessible Menubar">
    <ul role="menubar" aria-label="Accessible Menubar">
        <li role="none">
            <a role="menuitem" href="#home"> Home </a>
        </li>
        <li role="none">
            <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#about">
                About
            </a>
            <ul role="menu" aria-label="About">
                <li role="none">
                    <a role="menuitem" href="#overview">Overview</a>
                </li>
                <li role="none">
                    <a role="menuitem" href="#administration">Administration</a>
                </li>
                <li role="none">
                    <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#facts">
                        Facts
                    </a>
                    <ul role="menu" aria-label="Facts">
                        <li role="none">
                            <a role="menuitem" href="#history">History</a>
                        </li>
                        <li role="none">
                            <a role="menuitem" href="#current-statistics">Current Statistics</a>
                        </li>
                        <li role="none">
                            <a role="menuitem" href="#awards">Awards</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Sources:

• W3 Menu and Menubar Pattern
• Creating Accessible Websites