DEV Community

Eelco Verbrugge
Eelco Verbrugge

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Sources:

Top comments (0)