Achieving WCAG 2.1 Status A: Accessible Menubar
Tags: a11y, menubar, html, wcag
Published: 2024-02-06 09:26:50

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

```html
<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
](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
- [Creating Accessible Websites](https://www.udemy.com/course/creating-accessible-websites/)